React Native Navigation header bar Configuring the Header

React Native Navigation header bar

Configuring the Header Bar • options – a static property of a screen component – is either an object or – a function that returns an object – The object contains various configuration options. • Example: title • create. Stack. Navigator uses platform conventions by default, – on i. OS the title will be centered – on Android it will be left-aligned.

class Home. Screen extends React. Component { static options = { title: 'Home', }; /* render function, etc */ } class Details. Screen extends React. Component { static options = { title: 'Details', }; /* render function, etc */ }

params • In order to use params in the title, we need to make options a function that returns a configuration object. • Cannot use this. props inside of options – Options is defined before the component is rendered – “this” does not refer to an instance of the component and therefore no props are available.

params • Must make options a function – React Navigation will call it with an object containing { navigation, route} – navigation - The navigation prop for the screen – route - The route prop for the screen • Can use route. params

Example 6 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" })}} options={{title: 'My Home'}} /> <Stack. Screen name="Create. Post" component={Create. Post. Screen} options={({ route }) => ({ title: 'Screen ‘ + route. params. name })} /> </Stack. Navigator> Will create a title named “Screen x” where x is </Navigation. Container> the value of the prop name that is passed to the ); Create. Post screen. }

Example 6 • In the Home screen we have a button that passes the name prop <Button title="Create post" on. Press={() => navigation. navigate('Create. Post', {name: 'Compose’}) } />

more • it's often necessary to update the options configuration for the active screen from the mounted screen component itself. • We can do this using navigation. set. Params <Button title="Update the title" on. Press={() => navigation. set. Options({title: 'Updated!'})} />

Adjusting Header Style • There are three key properties to use when customizing the style of your header: – header. Style, – header. Tint. Color, and – header. Title. Style. • header. Style: a style object that will be applied to the View that wraps the header. If you set background. Color on it, that will be the color of your header. • header. Tint. Color: the back button and title both use this property as their color. In the example below, we set the tint color to white (#fff) so the back button and the header title would be white. • header. Title. Style: if we want to customize the font. Family, font. Weight and other Text style properties for the title, we can use this to do it. 9

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" })}} options={{title: 'My Home', header. Style: { background. Color: '#f 4511 e', }, header. Tint. Color: '#fff', header. Title. Style: { font. Weight: 'bold', }, }} /> <Stack. Screen name="Create. Post" component={Create. Post. Screen} options={({ route }) => ({ title: 'Screen ' +route. params. name })} /> </Stack. Navigator> </Navigation. Container> ); } Example 7 10

Notes • On i. OS, the status bar text and icons are black, and this doesn't look great over a dark-colored background – configure the status bar to fit with your screen colors as described in the status bar guide. • The configuration in the example only applies to the home screen; – when we navigate to the details screen, the default styles are back. – Can share options between screens. See next slide 11

Sharing options • It is common to want to configure the header in a similar way across many screens. • Currently, when you navigate to the Details. Screen the colors go back to the defaults. • Can move the configuration up to the stack navigator under the prop screen. Options. • any screen that belongs to the Root. Stack will have our branded styles. • Can override shared styles

function App() { return ( <Navigation. Container> <Stack. Navigator initial. Route. Name="Home" screen. Options={{ header. Style: { background. Color: '#f 4511 e', }, header. Tint. Color: '#fff', header. Title. Style: { font. Weight: 'bold', }, }} > <Stack. Screen name="Home" component={Home. Screen} initial. Params={{post: JSON. stringify({ text: "No Comment" })}} options={{title: 'My Home'}} /> <Stack. Screen name="Create. Post" component={Create. Post. Screen} options={({ route }) => ({ title: 'Screen ' +route. params. name })} /> </Stack. Navigator> </Navigation. Container> ); } Example 8 13

Overriding default styles • more control than just changing the text and styles of your title – may want to render an image in place of the title, – or make the title into a button. – In these cases you can completely override the component used for the title and provide your own. 14

function Logo. Title() { Must return the config options return ( <Image style={{ width: 50, height: 50 }} source={require('@expo/snack-static/react-native-logo. png')} /> ); } Example 9 function Stack. Screen() { return ( <Stack. Navigator> <Stack. Screen name="Home" component={Home. Screen} options={{ header. Title: props => <Logo. Title {. . . props} /> }} /> This is an example of overriding </Stack. Navigator> the styles set in the rootstack. ); } You might be wondering, why header. Title when we provide a component and not title, like before? The reason is that header. Title is a property that is specific to a stack navigator, 15 the header. Title defaults to a Text component that displays the title.

Complete config guide • https: //reactnavigation. org/docs/stacknavigator#navigationoptions-used-bystacknavigator 16