Passing Data B/W Screens (Routes) App - Js

Passing data b/w screens (routes)
App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ScrollView, Button, TouchableOpacity, Image, TextInput, Flat
List } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import RowOne from './components/RowOne';
import RowTwo from './components/RowTwo';
import RowThree from './components/RowThree';
import RowFour from './components/RowFour';
import RowFive from './components/RowFive';
function HomeScreen({ navigation }) {
return (
<View>
<Image source={require('./img/data.png')} style={styles.imgg} />
<View style={styles.container}>
<Text style={styles.tt}>Welcome to Data Center !!!</Text>
{/* <Text >Home Screen </Text>
<Button title="Update"
onPress={()=> navigation.navigate('Update')}/> */}

<ScrollView horizontal={true}>
<View style={{ flexDirection: 'column' }}>
<View style={{ flexDirection: 'row' }}>
<RowOne />
<TouchableOpacity style={{ marginLeft: 16, height: 40, justifyContent: 'center'
, color: 'tomato' }}
onPress={() => navigation.navigate('UpdateRowOne', { name: 'Rajesh', gender:
'male', occupation: 'snr software engg', city: 'Dindigul', state: 'Tamil Nadu', phone: '95005
28001', email: 'rajeshkannan.r@jeanmartin.com' })}>
<Image style={{ width: 50, height: 49 }} source={require('./img/re.png')} />
</TouchableOpacity>
, color: 'tomato' }}>
<Image style={{ width: 50, height: 48 }} source={require('./img/del.png')} />
</TouchableOpacity>
</View>
<RowTwo />
<TouchableOpacity style={{ marginLeft: 8, height: 40, justifyContent: 'center',
color: 'tomato' }} onPress={() => navigation.navigate('UpdateRowTwo', { name: 'Prasant', gend
er: 'male', occupation: 'snr software engg', city: 'Dindigul', state: 'Tamil Nadu', phone: '9
</TouchableOpacity>
</TouchableOpacity>
</View>
<RowThree />
, color: 'tomato' }} onPress={() => navigation.navigate('UpdateRowThree', { name: 'Samuel', g
ender: 'male', occupation: 'snr software engg', city: 'Dindigul', state: 'Tamil Nadu', phone:
'9500528001', email: 'rajeshkannan.r@jeanmartin.com' })}>
</TouchableOpacity>
</TouchableOpacity>
</View>
<RowFour />
, color: 'tomato' }} onPress={() => navigation.navigate('UpdateRowFour', { name: 'James', gen
der: 'male', occupation: 'snr software engg', city: 'Dindigul', state: 'Tamil Nadu', phone: '
</TouchableOpacity>
</TouchableOpacity>
</View>
<RowFive />
, color: 'tomato' }} onPress={() => navigation.navigate('UpdateRowFive', { name: 'Srikant', g
ender: 'male', occupation: 'snr software engg', city: 'Dindigul', state: 'Tamil Nadu', phone:
'9500528001', email: 'rajeshkannan.r@jeanmartin.com' })}>
</TouchableOpacity>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</View>
</View>
)
}
function UpdateRowOneScreen({ navigation, route }) {
const getDetails = (type) => {
if (route.params) {
switch (type) {
case "name":
return route.params.name
case "gender":
return route.params.gender
case "occupation":
return route.params.occupation
case "city":
return route.params.city
case "state":
return route.params.state
case "phone":
return route.params.phone
case "email":
return route.params.email
}
}
return ""
}
const [name, setName] = useState(getDetails("name"))
const [gender, setGender] = useState(getDetails("gender"))
const [occupation, setOccupation] = useState(getDetails("occupation"))
const [city, setCity] = useState(getDetails("city"))
const [state, setState] = useState(getDetails("state"))
const [phone, setPhone] = useState(getDetails("phone"))
const [email, setEmail] = useState(getDetails("email"))
return (
<View style={{ flex: 1, }}>
<Image source={require('./img/update.png')} style={{ width: 150, height: 150, alignSelf
: 'center' }} />
<TextInput placeholder={"Name"} placeholderTextColor="#003f5c"
value={name}
onChangeText={text => setName(text)}
style={{ height: 48, fontSize: 20, width: "90%", borderWidth: 1.8, marginLeft: 18, ma
rginBottom: "5%", marginTop: "5%" }} />
<TextInput placeholder={"Gender"} placeholderTextColor="#003f5c"
value={gender}
onChangeText={text => setGender(text)}
rginBottom: "3%", }} />
<TextInput placeholder={"Occupation"} placeholderTextColor="#003f5c"
value={occupation}
onChangeText={text => setOccupation(text)}
<TextInput placeholder={"City"} placeholderTextColor="#003f5c"
value={city}
onChangeText={text => setCity(text)}
<TextInput placeholder={"State"} placeholderTextColor="#003f5c"
value={state}
onChangeText={text => setState(text)}
<TextInput placeholder={"Mobile No."} placeholderTextColor="#003f5c"
value={phone}
onChangeText={text => setPhone(text)}
<TextInput placeholder={"Email Id"} placeholderTextColor="#003f5c"
value={email}
onChangeText={text => setEmail(text)}
<Button title="Update" onPress={() => navigation.navigate('Data Center')} />
{/* <Button
title="Go to Details... again"
onPress={() => navigation.push('Update')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} /> */}
</View>
)
}
function UpdateRowTwoScreen({ navigation, route }) {
if (route.params) {
switch (type) {
case "name":
case "gender":
case "occupation":
case "city":
case "state":
case "phone":
case "email":
}
}
return ""
}
return (
: 'center' }} />
value={name}
value={gender}
value={occupation}
value={city}
value={state}
value={phone}
value={email}
</View>
)
}
function UpdateRowThreeScreen({ navigation, route }) {
if (route.params) {
switch (type) {
case "name":
case "gender":
case "occupation":
case "city":
case "state":
case "phone":
case "email":
}
}
return ""
}
return (
: 'center' }} />
value={name}
value={gender}
value={occupation}
value={city}
value={state}
value={phone}
value={email}
</View>
)
}
function UpdateRowFourScreen({ navigation, route }) {
if (route.params) {
switch (type) {
case "name":
case "gender":
case "occupation":
case "city":
case "state":
case "phone":
case "email":
}
}
return ""
}
return (
: 'center' }} />
value={name}
value={gender}
value={occupation}
value={city}
value={state}
value={phone}
value={email}
</View>
)
}
function UpdateRowFiveScreen({ navigation, route }) {
if (route.params) {
switch (type) {
case "name":
case "gender":
case "occupation":
case "city":
case "state":
case "phone":
case "email":
}
}
return ""
}
return (
: 'center' }} />
value={name}
value={gender}
value={occupation}
value={city}
value={state}
value={phone}
value={email}
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'aquamarine',
alignItems: 'center',
marginTop: 25,
elevation:50,
shadowColor: 'black'
},
tt: {
color: 'black',
fontSize: 20,
color: 'red',
fontStyle: 'italic',
fontFamily: 'bold'
},
imgg: {
width: 330,
height: 260,
alignSelf: 'center',

}
});
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Data Center" component={HomeScreen} />
<Stack.Screen name="UpdateRowOne" component={UpdateRowOneScreen} />
<Stack.Screen name="UpdateRowTwo" component={UpdateRowTwoScreen} />
<Stack.Screen name="UpdateRowThree" component={UpdateRowThreeScreen} />
<Stack.Screen name="UpdateRowFour" component={UpdateRowFourScreen} />
<Stack.Screen name="UpdateRowFive" component={UpdateRowFiveScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
RowOne.js
import { StatusBar } from 'expo-status-bar';
import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, View,ScrollView,TouchableOpacity } from 'react-native';
const RowOne = () => {
const [enteredData, setEnteredData] = useState({name : 'Rajesh', gender : 'male', occupatio
n: 'snr software engg', city: 'Dindigul', state: 'Tamil Nadu', phone: '9500528001', email: 'r
ajeshkannan.r@jeanmartin.com'});
return(
<View style={{flexDirection:'row'}}>
<Text style={style.txt}>{enteredData.name}</Text>
<Text style={style.txt}>{enteredData.gender}</Text>
<Text style={style.txt}>{enteredData.occupation}</Text>
<Text style={style.txt}>{enteredData.city}</Text>
<Text style={style.txt}>{enteredData.state}</Text>
<Text style={style.txt}>{enteredData.phone}</Text>
<Text style={style.txt}>{enteredData.email}</Text>
</View>
)
}
const style = StyleSheet.create({
txt: {
fontSize: 20,
padding: 10,
color: 'black',
marginTop: 10,
borderTopWidth: 2,
borderBottomWidth: 2,
}
});
export default RowOne;
SWIPE LEFT GESTURE

npm install --save react-native-swipeout
APP.JS 
import React from 'react';
import { StyleSheet, Text, View , Button} from 'react-native';
import Swipeout from 'react-native-swipeout';
// Buttons
export default function App() {
var swipeoutBtns = [
{
text: 'Button',
backgroundColor: 'red',
// underlayColor: 'rgba(0, 0, 0, 1, 0.6)',
},
{
text: 'Duplicate',
backgroundColor: 'blue',
// onPress: () => { this.duplicateNote(rowData) }
}
]
return (
<Swipeout right={swipeoutBtns} autoClose='true' style={{backgroundColor: 'yellow'}}>
<View>
<Text>Swipe me left</Text>
</View>
</Swipeout>
<Text>Open up hi</Text>
<StatusBar style="auto" />
</View>
);
}
container: {
flex: 1,
backgroundColor: '#fff',
padding: 40

},
});
To do List
App.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button,Animated,TouchableHighlight,TextInput, TouchableOpaci
ty, Touchable, Image, FlatList } from 'react-native';
import Swipeout from 'react-native-swipeout';
import Header from './components/Header';
function App() {
var swipeoutBtns = [
{
text: 'Delete',
backgroundColor: 'red',
// onPress={removeGoal},

},
{
text: 'Duplicate',
backgroundColor: 'blue',
// onPress: () => { this.duplicateNote(rowData) }
}
]
const [enteredGoal, setEnteredGoal] = useState('');
const [courseGoal, setCourseGoal] = useState([]);
const goalInput = (enteredGoal) => {
setEnteredGoal(enteredGoal);
};
const addGoalInput = () => {
setCourseGoal(currentGoals => [...currentGoals, enteredGoal]);
};
const removeGoal = goalId => {
setCourseGoal(currentGoals => {
return currentGoals.filter((goal) => goal.id !==goalId);
});
}
return (
<View style={styles.screen}>
<Header title='To Do List' />
<View style={{ flexDirection: 'row', marginTop: 20 }}>
<TextInput placeholder='Enter Task here' style={styles.input}
onChangeText={goalInput}
value={enteredGoal}>
</TextInput>
<TouchableOpacity onPress={addGoalInput}>
<Image source={require('./img/plus.png')} style={{ marginLeft: 6, height: 64 }} />
</TouchableOpacity>
</View>

<Swipeout right={swipeoutBtns} autoClose='true'>
<View >
{courseGoal.map((goal) => <View style={styles.listItems} ><Text >{goal}</Text></
View>)}
</View>
</Swipeout>

</View>
</View>
);
}
export default App;
// container: {
// backgroundColor: '#fff',
// padding: 40
// },
screen: {
marginTop: 30
},
input: {
borderWidth: 2,
marginTop: 10,
borderRadius: 20,
width: '80%',
marginLeft: 5
},
listItems: {
padding: 10,
backgroundColor: '#ccc',
borderColor: 'black',
borderWidth: 1,
margin: 10
}
});
Header <Stack Screen>
import Icon from 'react-native-vector-icons/Ionicons'
For customizing drawer
DrawerContent.js
import { StyleSheet, Dimensions, Text, View, Image, Button, TouchableOpa
city, Touchable, FlatList } from 'react-native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem } from '@react-
navigation/drawer';
import { Avatar, Title, Caption, Paragraph, TouchableRipple, Switch, Drawer } from 'react-
native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Iconn from 'react-native-vector-icons/MaterialIcons';
import Iconnn from 'react-native-vector-icons/FontAwesome';
import { color } from 'react-native-reanimated';
export function DrawerContent(props, { navigation }) {
const [isDarkTheme, setISDa
r kTheme]= useState(false);
const toggleTheme = () => {

setISDarkTheme(!
isDarkTheme)
}
return (
<View style={{ flex
: 1 }}>
<DrawerContentS
c rollView {...props}>
<View styl
e ={styles.drawerContent}>
<View
s tyle={styles.userInfoSectio
n }>
<V
i ew style={{ flexDirection:
' row', marginTop: 15 }}>
<Avatar.Image source={require('../img/pro.jpg')} />
<View style={{ marginLeft: 15, flexDirection: 'column' }}>
<Title style={styles.title}>Tushar Ranjan</Title>
<Caption style={styles.caption}>@itzTushar</Caption>
</View>
</View>
<View style={styles.row}>
<View style={styles.section}>
<Paragraph>180</Paragraph>
<Caption> Following</Caption>
</View>
<View style={styles.section}>
<Paragraph>80k</Paragraph>
<Caption> Followers</Caption>
</View>
</View>
</View>
<Drawer.Section style={styles.drawerSection}>
<Icon.Button name="home" size={30} backgroundColor='white' color='black'
onPress={()=> {props.navigation.navigate('Home')}} >
<Text style={{color: 'black'}}>Home</Text>
</Icon.Button>
<Iconn.Button name="settings" size={30} backgroundColor='white' color='bl
ack' onPress={()=> {props.navigation.navigate('Setting')}}>
<Text style={{color: 'black'}}>Settings</Text>
</Iconn.Button>
<Iconnn.Button name="user" size={30} backgroundColor='white' color='black
' style={{marginLeft: 5}}>
<Text style={{color: 'black'}}>Profile</Text>
</Iconnn.Button>
<Iconnn.Button name="bookmark" size={30} backgroundColor='white' color='b
lack'style={{marginLeft: 5}} >
<Text style={{color: 'black'}}>Bookmarks</Text>
</Iconnn.Button>
</Drawer.Section>
<Drawer.Section title="Preferences">
<TouchableRipple onPress={()=> {toggleTheme()}}>
<View style={styles.preference}>
<Text>Dark Theme</Text>
<View pointerEvents="none">
<Switch value={isDarkTheme}/>
</View>

</View>
</TouchableRipple>

</Drawer.Section>
</View>
</DrawerContentScrollView>
<Drawer.Section style={styles.bottomDrawerSection}>
<TouchableOpacity>
<Image source={require('../img/logout.png')} style={{ height: 30, wid
th: 30, marginLeft: 15 }} />
<Text style={{ color: 'black', marginLeft: 5 }}>Sign out</Text>
</TouchableOpacity>
</View>
{/* <DrawerItem
// icon={({color,size}) => (
// name="exit-to-app"
// color={color}
// size={size}
// )}
label="Sign Out"
onPress={()=> navigation.navigate('Setting')}
/> */}
</Drawer.Section>
</View>
)
}
drawerContent: {
flex: 1,
},
userInfoSection: {
paddingLeft: 20,
},
title: {
fontSize: 16,
marginTop: 3,
fontWeight: 'bold',
},
caption: {
fontSize: 14,
lineHeight: 14,
},
row: {
marginTop: 20,
flexDirection: 'row',
},
section: {
marginRight: 15,
},
paragraph: {
fontWeight: 'bold',
marginRight: 3,
},
drawerSection: {
marginTop: 15,
},
bottomDrawerSection: {
marginBottom: 15,
borderTopColor: '#f4f4f4',
borderTopWidth: 1
},
preference: {
justifyContent: 'space-between',
paddingVertical: 12,
paddingHorizontal: 16,
},
});
RootScreen.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { StyleSheet, Dimensions, Text, View, Button, TouchableOpacity, Touchable, FlatList }
from 'react-native';
import HomeScreen from './HomeScreen';
import SettingScreen from './SettingScreen';
import Icon from 'react-native-vector-icons/Ionicons';
import { DrawerContent } from './DrawerContent';
const Home_Stack = createStackNavigator();
const HomeStack = ({ navigation }) => {
return (
<Home_Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}} >
<Home_Stack.Screen name="Home" component={HomeScreen} options={{
title: "Instagram",
headerLeft: () => (
<Icon.Button name="menu" size={30} backgroundColor='#009387'
onPress={() => navigation.openDrawer()}>
</Icon.Button>
)
}} />
</Home_Stack.Navigator>
)
}
const Setting_Stack = createStackNavigator();
const SettingStack = ({ navigation }) => {
return (
<Setting_Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}} >
<Setting_Stack.Screen name="Setting" component={SettingScreen} options={{
title: "Instagram",
headerLeft: () => (
<Icon.Button name="menu" size={30} backgroundColor='#009387'
onPress={() => navigation.openDrawer()}>
</Icon.Button>
)
}} />
</Setting_Stack.Navigator>
)
}
const Drawer = createDrawerNavigator();
const RootScreen = () => {
return (
<Drawer.Navigator drawerContent={props => <DrawerContent {...props}/>}>
<Drawer.Screen name="Home" component={HomeStack} />
<Drawer.Screen name="Setting" component={SettingStack} />

</Drawer.Navigator>
)
}
export default RootScreen;

Passing Data B/W Screens (Routes) App - Js

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Passing Data B/W Screens (Routes) App - Js

Uploaded by

Copyright:

Available Formats

Passing data b/w screens (routes)

SWIPE LEFT GESTURE

You might also like