React Native Navigation Parameters header bar Passing Parameters

React Native Navigation Parameters, header bar

Passing Parameters • Pass params to a route by putting them in an object as a second parameter to the navigation. navigate function: navigation. navigate('Route. Name', { /* params go here */ }) Note the curly brackets!

Passing Parameters • To read the params in your screen component: route. params • You can directly access the params object with route. params. param. Name • This may be null if no params were supplied

parameters • Pass params that are JSON-serializable. – JSON is a standard protocol for passing data on the web – Basically, pass Javascript objects or arrays – For a JSON tutorial see https: //www. w 3 schools. com/js/js_json_intro. asp

Example 3 function Home. Screen({ navigation }) { return ( <View style={{ flex: 1, align. Items: 'center', justify. Content: 'center' }}> No data is displayed <Text>Home Screen</Text> <Button Go to ‘Details’ screen title="Go to Details" on. Press={() => { Passing 2 parameters to navigation. navigate('Details', { the Details screen item. Id: 86, other. Param: 'anything you want here’, }); The parameters are a }} Java. Script object Surround parameters /> with curly brackets </View> ); } Continued on next slide

The route parameter has the passed values function Details. Screen( { route, navigation } ) { /* 2. Get the param */ Receive the 2 parameters from the Home const { item. Id } = route. params; const { other. Param } = route. params; screen on the last slide. return ( <View style={{ flex: 1, align. Items: 'center', justify. Content: 'center' }}> <Text>Details Screen</Text> <Text>item. Id: {item. Id * 10}</Text> <Text>other. Param: {other. Param}</Text> <Button title="Go to Details. . . again" on. Press={() => navigation. push('Details', { Params are passed in JSON item. Id: Math. floor(Math. random() * 100), format. Stringify turns a }) JSON value into a string } /> <Button title="Go to Home" on. Press={() => navigation. navigate('Home')} /> <Button title="Go back" on. Press={() => navigation. go. Back()} /> </View> ); push another instance of this screen } Only one parameter is passed, the other will have the default value. Go back to the previous screen. Could be the Home screen or could be another instance of the Details screen. Continued on next slide

This didn’t change function App() { return ( <Navigation. Container> <Stack. Navigator initial. Route. Name="Home"> <Stack. Screen name="Home" component={Home. Screen} /> <Stack. Screen name="Details" component={Details. Screen} /> </Stack. Navigator> </Navigation. Container> ); } export default App;

Updating parameters • Screens can also update their params, like they can update their state. – The navigation. set. Params method lets you update the params of a screen. – see API reference for set. Params for more details.

Updating parameters • You can also pass some initial params to a screen. – If you didn't specify any params when navigating to this screen, the initial params will be used. – Initial params can be specified with an initial. Params prop: <Stack. Screen name="Details" component={Details. Screen} initial. Params={{ item. Id: 42 }} />

Passing params to a previous screen • Params can be used to pass data to a previous screen. – Example: screen with a create post button, • the create blog post button opens a new screen to create a post. • After creating the post, you want to pass the data for the post back to previous screen.

Passing params to a previous screen • To achieve this: use the navigation. navigate method, – acts like go. Back if the screen already exists. • Must also use “Hooks” – The official page: https: //reactjs. org/docs/hooksintro. html – Hooks include “use. State” and “use. Effect” – Hooks are designed to allow components to share state

Passing params to a previous screen • The Effect Hook, use. Effect, adds the ability to perform side effects from a function component. • It serves the same purpose as component. Did. Mount, component. Did. Update, and component. Will. Unmount in React classes

Example 4 • Use navigate to pass the data back: function Home. Screen({navigation, route}) { const [mystate, set. My. State] = React. use. State('test'); use. Effect is a RN “hook” React. use. Effect(() => { if (route. params? . post) { If route. params? . post has a value, it set. My. State(route. params? . post); will count as “true”. If it has not been } initialized, it is nil and will count as }, [route. params? . post]); “false” return ( <View style={{ flex: 1, align. Items: 'center', justify. Content: 'center', background. Color: 'powderblue' }}> <Text style={{font. Size: 30}}>Home Screen</Text> This is an array of variables to watch. If one of them is changed, then the function will be executed. Continued on next slide

Passing params to a previous screen <Touchable. Highlight on. Press={() => { navigation. navigate('Details', { item. Id: 86, other. Param: 'anything you want here', }); }} active. Opacity={0. 6} underlay. Color='red' > <Text style={styles. button}>Go To Details</Text> </Touchable. Highlight> <Text>mystate = {mystate}</Text> </View> ); } Continued on next slide

Passing params to a previous screen function Details. Screen({ navigation, route }) { const { item. Id } = route. params; const { other. Param } = route. params; const [test. Val, set. Test. Val] = React. use. State('george'); return ( <Button title="Go to Home with a parameter" on. Press={() => navigation. navigate('Home', {post: test. Val} )} /> </View> ); This goes to the Home screen and pops the } stack and passes the parameter “post” with the value in the state variable “test. Val” Continued on next slide

Passing params to a previous screen const Stack = create. Stack. Navigator(); function App() { return ( <Navigation. Container> <Stack. Navigator initial. Route. Name="Home"> <Stack. Screen name="Home" component={Home. Screen} /> <Stack. Screen name="Details" component={Details. Screen} /> </Stack. Navigator> </Navigation. Container> ); } No changes on this slide

Passing params to nested navigators • A nested navigator occurs when a screen of a navigator itself contains a navigator • If you have nested navigators, you need to pass params differently. • Example: – say you have a navigator inside the Account screen, – and want to pass params to the Settings screen inside that navigator.

Nested Navigators navigation. navigate('Account', { screen: 'Settings’, params: { user: 'jane' }, }); This is the route to navigate to This is the route inside the Account screen to navigate to Pass this parameter to the Settings screen

Passing Objects • Sometimes we’d like to pass objects • Must use JSON • Two functions built into Java. Script: – JSON. stringify(my. Object); – JSON. parse(json. String);

Example 5: Home import * as React from 'react'; import { View, Text, Button, Text. Input, Touchable. Highlight, Style. Sheet } from 'react-native'; import { Navigation. Container } from '@react-navigation/native'; import { create. Stack. Navigator } from '@react-navigation/stack';

Example 5: Home function Home. Screen({ navigation, route }) { const [mystate, set. My. State] = React. use. State('Waiting. . . '); React. use. Effect(() => { if (route. params? . post) { set. My. State(JSON. parse(route. params? . post). text) } }, [route. params? . post]); Must use JSON. parse on the parameter and then get the “text” field of the resulting object return ( <View style={{ flex: 1, align. Items: 'center', justify. Content: 'center' }}> <Button title="Create post" on. Press={() => navigation. navigate('Create. Post')} /> <Text style={{ margin: 10 }}>Post: {mystate}</Text> </View> ); }

Example 5: Create. Post. Screen function Create. Post. Screen({ navigation, route }) { const [post. Text, set. Post. Text] = React. use. State(''); return ( <Text. Input multiline placeholder="What's on your mind? " style={{ height: 200, padding: 10, background. Color: 'white' }} value={post. Text} on. Change. Text={set. Post. Text} Must create the object with field name /> “text” and value “post. Text” and then <Button use JSON. stringify on the object. title="Done" The resulting JSON string is the value of on. Press={() => { the “post” field. // Pass params back to home screen navigation. navigate('Home', { post: JSON. stringify({text: post. Text })}); }} /> </> ); }

Example 5 const Stack = create. Stack. Navigator(); function App() { return ( <Navigation. Container> <Stack. Navigator initial. Route. Name="Home"> <Stack. Screen name="Home" component={Home. Screen} initial. Params={{post: JSON. stringify({ text: "No Comment" })}} /> <Stack. Screen name="Create. Post" component={Create. Post. Screen} /> </Stack. Navigator> </Navigation. Container> We send an initial value (in JSON ); format) to the Home screen when we } start it. export default App;

Example 5 const styles = Style. Sheet. create({ open. Button: { background. Color: "#F 194 FF", border. Radius: 20, padding: 10, elevation: 2 }, });