{"size": 1184, "ext": "js", "max_stars_repo_path": "components/Tasks.js", "max_stars_repo_name": "Musab-Al-omari/to-do-react-native", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/Tasks.js", "max_issues_repo_name": "Musab-Al-omari/to-do-react-native", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/Tasks.js", "max_forks_repo_name": "Musab-Al-omari/to-do-react-native", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 18.7936507937, "max_line_length": 72, "alphanum_fraction": 0.5016891892}
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const Task = ({ text }) => {


    return (
        <View style={style.item}>
            <View style={style.itemLeft}>
                <View style={style.square}></View>
                <Text style={style.itemText}>{text}</Text>
            </View>
            <View style={style.circular}></View>
        </View>
    )
}


const style = StyleSheet.create({

    item: {
        backgroundColor: '#FFF',
        padding: 15,
        borderRadius: 15,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 20,


    },
    itemLeft: {
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap'

    },
    square: {
        width: 24,
        height: 24,
        backgroundColor: '#55BCF6',
        opacity: 0.4,
        borderRadius: 5,
        marginRight: 15
    },
    itemText: {
        maxWidth: '80%',

    },
    circular: {
        width: 12,
        height: 12,
        borderColor: '#55BCF6',
        borderWidth: 2,
        borderRadius: 5,
    },
})


export default Task


