forked from react-navigation/react-navigation
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
279 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import * as React from 'react'; | ||
| import { View, StyleSheet } from 'react-native'; | ||
| import { Title, Button } from 'react-native-paper'; | ||
| import { Feather } from '@expo/vector-icons'; | ||
| import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; | ||
|
|
||
| type BottomTabParams = { | ||
| [key: string]: undefined; | ||
| }; | ||
|
|
||
| const BottomTabs = createBottomTabNavigator<BottomTabParams>(); | ||
|
|
||
| export default function BottomTabsScreen() { | ||
| const [tabs, setTabs] = React.useState([0, 1]); | ||
|
|
||
| return ( | ||
| <BottomTabs.Navigator> | ||
| {tabs.map(i => ( | ||
| <BottomTabs.Screen | ||
| key={i} | ||
| name={`tab-${i}`} | ||
| options={{ | ||
| title: `Tab ${i}`, | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <Feather name="octagon" color={color} size={size} /> | ||
| ), | ||
| }} | ||
| > | ||
| {() => ( | ||
| <View style={styles.container}> | ||
| <Title>Tab {i}</Title> | ||
| <Button onPress={() => setTabs(tabs => [...tabs, tabs.length])}> | ||
| Add a tab | ||
| </Button> | ||
| <Button | ||
| onPress={() => | ||
| setTabs(tabs => (tabs.length > 1 ? tabs.slice(0, -1) : tabs)) | ||
| } | ||
| > | ||
| Remove a tab | ||
| </Button> | ||
| </View> | ||
| )} | ||
| </BottomTabs.Screen> | ||
| ))} | ||
| </BottomTabs.Navigator> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import * as React from 'react'; | ||
| import { View, StyleSheet, ScrollView, Alert, Platform } from 'react-native'; | ||
| import { Button, Appbar } from 'react-native-paper'; | ||
| import { BlurView } from 'expo-blur'; | ||
| import { MaterialCommunityIcons } from '@expo/vector-icons'; | ||
| import { RouteProp, ParamListBase } from '@react-navigation/native'; | ||
| import { | ||
| createStackNavigator, | ||
| StackNavigationProp, | ||
| HeaderBackground, | ||
| useHeaderHeight, | ||
| } from '@react-navigation/stack'; | ||
| import Article from '../Shared/Article'; | ||
| import Albums from '../Shared/Albums'; | ||
|
|
||
| type SimpleStackParams = { | ||
| Article: { author: string }; | ||
| Album: undefined; | ||
| }; | ||
|
|
||
| type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>; | ||
|
|
||
| const ArticleScreen = ({ | ||
| navigation, | ||
| route, | ||
| }: { | ||
| navigation: SimpleStackNavigation; | ||
| route: RouteProp<SimpleStackParams, 'Article'>; | ||
| }) => { | ||
| return ( | ||
| <ScrollView> | ||
| <View style={styles.buttons}> | ||
| <Button | ||
| mode="contained" | ||
| onPress={() => navigation.push('Album')} | ||
| style={styles.button} | ||
| > | ||
| Push album | ||
| </Button> | ||
| <Button | ||
| mode="outlined" | ||
| onPress={() => navigation.goBack()} | ||
| style={styles.button} | ||
| > | ||
| Go back | ||
| </Button> | ||
| </View> | ||
| <Article author={{ name: route.params.author }} scrollEnabled={false} /> | ||
| </ScrollView> | ||
| ); | ||
| }; | ||
|
|
||
| const AlbumsScreen = ({ | ||
| navigation, | ||
| }: { | ||
| navigation: SimpleStackNavigation; | ||
| }) => { | ||
| const headerHeight = useHeaderHeight(); | ||
|
|
||
| return ( | ||
| <ScrollView contentContainerStyle={{ paddingTop: headerHeight }}> | ||
| <View style={styles.buttons}> | ||
| <Button | ||
| mode="contained" | ||
| onPress={() => navigation.push('Article', { author: 'Babel fish' })} | ||
| style={styles.button} | ||
| > | ||
| Push article | ||
| </Button> | ||
| <Button | ||
| mode="outlined" | ||
| onPress={() => navigation.goBack()} | ||
| style={styles.button} | ||
| > | ||
| Go back | ||
| </Button> | ||
| </View> | ||
| <Albums scrollEnabled={false} /> | ||
| </ScrollView> | ||
| ); | ||
| }; | ||
|
|
||
| const SimpleStack = createStackNavigator<SimpleStackParams>(); | ||
|
|
||
| type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & { | ||
| navigation: StackNavigationProp<ParamListBase>; | ||
| }; | ||
|
|
||
| export default function SimpleStackScreen({ navigation, ...rest }: Props) { | ||
| navigation.setOptions({ | ||
| headerShown: false, | ||
| }); | ||
|
|
||
| return ( | ||
| <SimpleStack.Navigator {...rest}> | ||
| <SimpleStack.Screen | ||
| name="Article" | ||
| component={ArticleScreen} | ||
| options={({ route }) => ({ | ||
| title: `Article by ${route.params?.author}`, | ||
| headerTintColor: '#fff', | ||
| headerStyle: { backgroundColor: '#ff005d' }, | ||
| headerBackTitleVisible: false, | ||
| headerTitleAlign: 'center', | ||
| headerBackImage: ({ tintColor }) => ( | ||
| <MaterialCommunityIcons | ||
| name="arrow-left-circle-outline" | ||
| color={tintColor} | ||
| size={24} | ||
| style={{ marginHorizontal: Platform.OS === 'ios' ? 8 : 0 }} | ||
| /> | ||
| ), | ||
| headerRight: ({ tintColor }) => ( | ||
| <Appbar.Action | ||
| color={tintColor} | ||
| icon="dots-horizontal-circle-outline" | ||
| onPress={() => | ||
| Alert.alert( | ||
| 'Never gonna give you up!', | ||
| 'Never gonna let you down! Never gonna run around and desert you!' | ||
| ) | ||
| } | ||
| /> | ||
| ), | ||
| })} | ||
| initialParams={{ author: 'Gandalf' }} | ||
| /> | ||
| <SimpleStack.Screen | ||
| name="Album" | ||
| component={AlbumsScreen} | ||
| options={{ | ||
| title: 'Album', | ||
| headerBackTitle: 'Back', | ||
| headerTransparent: true, | ||
| headerBackground: () => ( | ||
| <HeaderBackground style={{ backgroundColor: 'transparent' }}> | ||
| <BlurView | ||
| tint="light" | ||
| intensity={75} | ||
| style={StyleSheet.absoluteFill} | ||
| /> | ||
| </HeaderBackground> | ||
| ), | ||
| }} | ||
| /> | ||
| </SimpleStack.Navigator> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| buttons: { | ||
| flexDirection: 'row', | ||
| padding: 8, | ||
| }, | ||
| button: { | ||
| margin: 8, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.