Skip to content

Migrate 'Elements' examples to static API in v7 #1318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 26, 2024
Merged

Migrate 'Elements' examples to static API in v7 #1318

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b219246
Migrate examples to static
patrycjakalinska Feb 23, 2024
4a0cf90
fix typo
kacperkapusciak Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 156 additions & 13 deletions versioned_docs/version-7.x/elements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ title: Elements Library
sidebar_label: Elements
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

A component library containing the UI elements and helpers used in React Navigation. It can be useful if you're building your own navigator, or want to reuse a default functionality in your app.

## Installation
Expand Down Expand Up @@ -41,6 +44,29 @@ Whether header title font should scale to respect Text Size accessibility settin

Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:

<Tabs groupId="config" queryString="config">
<TabItem value="static" label="Static" default>

```js
const RootStack = createNativeStackNavigator({
screens: {
Home: {
screen: HomeScreen,
options: {
headerLeft: (props) => (
<MyButton {...props} onPress={() => {
// Do something
}}>
)
}
}
}
})
```

</TabItem>
<TabItem value="dynamic" label="Dynamic" default>

```js
<Stack.Screen
name="Home"
Expand All @@ -58,6 +84,9 @@ Function which returns a React Element to display on the left side of the header
/>
```

</TabItem>
</Tabs>

#### `headerRight`

Function which returns a React Element to display on the right side of the header.
Expand Down Expand Up @@ -132,25 +161,139 @@ Function which returns a React Element to render as the background of the header

For example, you can use this with `headerTransparent` to render a blur view to create a translucent header.

<samp id="header-blur" />
<Tabs groupId="config" queryString="config">
<TabItem value="static" label="Static" default>

```js name="Header blur" snack version=7 dependencies=expo-blur@~12.9.1
import * as React from 'react';
import { Button, View, StyleSheet } from 'react-native';
import {
createStaticNavigation,
useNavigation,
} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { BlurView } from 'expo-blur';

```js
function HomeScreen() {
const navigation = useNavigation();

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}

function ProfileScreen() {
const navigation = useNavigation();

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}

// codeblock-focus-start
const Stack = createStackNavigator({
initialRouteName: 'Home',
screens: {
Home: {
screen: HomeScreen,
options: {
headerTransparent: true,
headerBackground: () => (
<BlurView
tint="dark"
intensity={100}
style={StyleSheet.absoluteFill}
/>
),
},
},
Profile: ProfileScreen,
},
});
// codeblock-focus-end

const Navigation = createStaticNavigation(Stack);

function App() {
return <Navigation />;
}

export default App;
```

</TabItem>
<TabItem value="dynamic" label="Dynamic" default>

```js name="Header blur" snack version=7 dependencies=expo-blur@~12.9.1
import * as React from 'react';
import { Button, View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// codeblock-focus-start
import { BlurView } from 'expo-blur';

// ...
// codeblock-focus-end

<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTransparent: true,
headerBackground: () => (
<BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
),
}}
/>;
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}

function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}

const Stack = createStackNavigator();

function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
// codeblock-focus-start
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTransparent: true,
headerBackground: () => (
<BlurView
tint="dark"
intensity={100}
style={StyleSheet.absoluteFill}
/>
),
}}
/>
// codeblock-focus-end
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}

export default App;
```

</TabItem>
</Tabs>

#### `headerStatusBarHeight`

Extra padding to add at the top of header to account for translucent status bar. By default, it uses the top value from the safe area insets of the device. Pass 0 or a custom value to disable the default behavior, and customize the height.
Expand Down