Random Experiment 2 :React native navigation

npx react-native init myToDoapp
npm install @react-native-community/async-storage
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-viewnpm install @react-navigation/native @react-navigation/stack
npm install native-base 
npm install shortid
package.json
Folder structure
import 'react-native-gesture-handler';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import React from 'react'import Add from './Screens/Add';import ToDoHome from './Screens/ToDoHome'const Stack = createStackNavigator();const App=()=>{return(<NavigationContainer><Stack.Navigator initialRouteName="Home"><Stack.Screenname="Home"component={ToDoHome}options={{headerStyle:{backgroundColor:"gray"},title:"To Do App",headerTitleAlign:'center',headerTitleStyle:{color:"#FFFFFF"}}}></Stack.Screen><Stack.Screenname="AddToDo"component={Add}></Stack.Screen></Stack.Navigator></NavigationContainer>)}export default App;
import React,{ useState,useEffect } from 'react'import { Fab,Icon, Left, ListItem,List, Right, Body, CheckBox} from 'native-base';import {ScrollView,Text,StyleSheet} from 'react-native'import AsyncStorage from '@react-native-community/async-storage'import { useIsFocused } from '@react-navigation/core';const ToDoHome=({navigation,route})=>{const [listofToDo,setListofToDo] = useState([])const focus = useIsFocused()const getData = async()=>{const storedvalues = await AsyncStorage.getItem('@todoitem')const readableForm = await JSON.parse(storedvalues)setListofToDo(readableForm)console.log("========================================================");console.log(listofToDo.length);}const handleDelete = async(id)=>{const anotherList = listofToDo.filter((list)=>list.id!==id)await AsyncStorage.setItem('@todoitem',JSON.stringify(anotherList))setListofToDo(anotherList)}const isitMarked=async(id)=>{const newList = listofToDo.map((item)=>{if(item.id==id){item.isDone= !item.isDone}return item})await AsyncStorage.setItem('@todoitem',JSON.stringify(newList))setListofToDo(newList)}useEffect(()=>{getData()},[focus])return(<ScrollView contentContainerStyle={styles.scroolview}>{listofToDo.length ==0?(<Textstyle={{backgroundColor:"black",color:"white",textAlign:'center'}}>Please Add An item</Text>):(<List>{listofToDo.map((todo)=>(<ListItem key={todo.id} style={styles.listItem}><Left><Icon style={styles.actionButton} onPress={()=>handleDelete(todo.id)} active name="trash"/><Icon style={styles.actionButton} active name="wifi"/></Left><Body><Text>{todo.task}</Text><Text note> {todo.details}</Text></Body><Right><CheckBoxchecked={todo.isDone}onPress={()=>isitMarked(todo.id)}></CheckBox></Right></ListItem>))}</List>)}<Fabstyle={{backgroundColor:"#507FFF"}}position="bottomRight"activeonPress={()=>navigation.navigate("AddToDo")}><Icon name="add"/></Fab></ScrollView>)}export default ToDoHome;const styles=StyleSheet.create({scroolview:{flex:1,backgroundColor:"gray"},actionButton: {marginLeft: 5,justifyContent:'space-between'},listItem: {marginLeft: 0,marginBottom: 3,backgroundColor:"#FFFFFF",},})
import { Text,Container,Content,Form,Input,Item, Button } from 'native-base';import React from 'react'import { useState } from 'react';import {StyleSheet} from 'react-native'import AsyncStorage from '@react-native-community/async-storage'import shortid from 'shortid';const Add=({navigation,route})=>{const [task,setTask] = useState('')const [details,setDetails] = useState('')const handleInput=async()=>{try {if(!task || !details){return alert("Please Enter valid values")}const taskToAdd = {id:shortid.generate(),task:task,details:details,isDone:false}const storedToDo = await AsyncStorage.getItem('@todoitem')const previousList =await JSON.parse(storedToDo)if(!previousList){const newList = [taskToAdd]await AsyncStorage.setItem('@todoitem',JSON.stringify(newList))}else{previousList.push(taskToAdd)await AsyncStorage.setItem('@todoitem',JSON.stringify(previousList))}navigation.navigate('Home')} catch (error) {console.log(error);}}return(<Container style={styles.container}><Content><Form><Item rounded style={styles.items} ><Input placeholder="Enter your work" value={task} onChangeText={(event)=>setTask(event)}/></Item><Item rounded style={styles.items}><Input placeholder="additional" value={details} onChangeText={(event)=>setDetails(event)}/></Item><ButtonroundedsuccessonPress={handleInput}style={{alignSelf:'center',paddingHorizontal:25}}><Text>Add</Text></Button></Form></Content></Container>)}export default Add;const styles = StyleSheet.create({container:{flex:1,padding:10,justifyContent:'space-between',marginBottom:10},items:{marginBottom:15,paddingStart:5}})

npx react-native start
and
npx react-native run-android

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A quick guide to help you understand and create ReactJS apps

Query vs. URL Parameters in Express.js

How To Convince Your Superiors To Opt For React Native?

JavaScript #7 — Using Variables

React Native Effective Patterns

What I learned last month in Full stack web app development

React Vis: Crypto Chart Hints

Angular onPush Change Detection Strategy User Login Page — Demo

Angular onPush Change Detection Strategy User Login Page - Demo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nilay Paul

Nilay Paul

More from Medium

React The Next Big Thing

Why I Like redux-observable

What’s and why’s of state in React.

Styling RNW Application with Styled Components