74 lines
No EOL
3.5 KiB
JavaScript
74 lines
No EOL
3.5 KiB
JavaScript
import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
|
|
import React, { useState } from 'react'
|
|
import { AntDesign } from '@expo/vector-icons';
|
|
import { BottomModal, ModalContent, ModalTitle, SlideAnimation } from 'react-native-modals';
|
|
|
|
const index = () => {
|
|
const todo = [];
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [addToDo, setAddToDo] = useState('');
|
|
|
|
return (
|
|
<>
|
|
<View style={{marginHorizontal:20, marginVertical:20, alignItems: "center", flexDirection: "row", gap: 10}}>
|
|
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
|
|
<Text style={{color: "white", textAlign: "center"}}>All</Text>
|
|
</Pressable>
|
|
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
|
|
<Text style={{color: "white", textAlign: "center"}}>Work</Text>
|
|
</Pressable>
|
|
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center", marginRight: "auto"}}>
|
|
<Text style={{color: "white", textAlign: "center"}}>Personal</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => setModalVisible(!modalVisible)}>
|
|
<AntDesign name="plus" size={24} color="black" />
|
|
</Pressable>
|
|
</View>
|
|
<ScrollView style={{flex:1, backgroundColor: "white"}}>
|
|
<View style={{padding: 10}}>
|
|
{todo?.length > 0 ? (
|
|
<View></View>
|
|
) : (
|
|
<View style={{flex:1, justifyContent:"center", alignItems:"center", marginTop:150, marginLeft:"auto", marginRight:"auto"}}>
|
|
<Image
|
|
style={{width: 100, height: 100, resizeMode: "containe"}}
|
|
source={{
|
|
uri:"./assets/images/to-do.png",
|
|
}}
|
|
/>
|
|
<Text style={{fontSize:16, fontWeight:600, marginTop: 20, textAlign:"center"}}>Hooray! There is no tasks</Text>
|
|
<Pressable onPress={() => setModalVisible(!modalVisible)} style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}>
|
|
<Text style={{fontSize:14, fontWeight:600, textAlign:"center", color: "white"}}>Add task <AntDesign name="plus" size={16} color="white" /></Text>
|
|
</Pressable>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<BottomModal
|
|
onBackdropPress={() => setModalVisible(!modalVisible)}
|
|
onHardwareBackPress={() => setModalVisible(!modalVisible)}
|
|
swipeDirection={['up', 'down']}
|
|
swipeThreshold={200}
|
|
modalTitle={<ModalTitle title="Add Task"/>}
|
|
modalAnimation={
|
|
new SlideAnimation({
|
|
slideFrom: 'bottom',
|
|
})
|
|
}
|
|
visible={modalVisible}
|
|
onTouchOutside={() => setModalVisible(!modalVisible)}
|
|
>
|
|
<ModalContent style={{width:"100%", height:200}}>
|
|
<View style={{marginTop: 10}}>
|
|
<TextInput value={addToDo} onChangeText={(text) => setAddToDo(text)} style={{padding:10, borderColor: "#61677A", borderRadius:5, borderWidth:1, flex:1, outlineStyle: 'none', color: "#31363F"}} placeholder='Add your new task'/>
|
|
</View>
|
|
</ModalContent>
|
|
</BottomModal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default index
|
|
|
|
const styles = StyleSheet.create({}) |