Random Experiment 2 :React native navigation

3 min readJun 11, 2021

First of all run ->

npx react-native init myToDoapp

To use storage we will be using https://react-native-async-storage.github.io/async-storage/docs/install/ this module.

npm install @react-native-community/async-storage

Run ->

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

To use react navigation

visit https://reactnavigation.org/docs/getting-started/ for more info.

Now install native base .

npm install native-base

Install shortid

npm install shortid

Check your package.json for these dependencies

Create a new folder Screens and create new files “ToDoHome.js” and “Add.js”.

In App.js add->

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;

In ToDoHome.js add->

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",},})

Add.js

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}})