From 65e5147910c3616d065fa41bf0c8b3c8deabcb6c Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Mon, 20 Jan 2020 15:38:05 +0100 Subject: [PATCH] chore: add some more examples --- example/package.json | 1 + example/src/Screens/DynamicTabs.tsx | 56 +++++++ .../src/Screens/ModalPresentationStack.tsx | 14 +- example/src/Screens/NativeStack.tsx | 6 +- example/src/Screens/SimpleStack.tsx | 14 +- .../src/Screens/StackHeaderCustomization.tsx | 158 ++++++++++++++++++ example/src/Shared/Albums.tsx | 11 +- example/src/Shared/Article.tsx | 13 +- example/src/Shared/Chat.tsx | 4 +- example/src/index.tsx | 10 ++ packages/core/src/types.tsx | 5 +- packages/stack/src/index.tsx | 1 + .../src/views/Header/HeaderBackground.tsx | 6 +- yarn.lock | 7 + 14 files changed, 279 insertions(+), 27 deletions(-) create mode 100644 example/src/Screens/DynamicTabs.tsx create mode 100644 example/src/Screens/StackHeaderCustomization.tsx diff --git a/example/package.json b/example/package.json index a411d2fe..dabbd1a4 100644 --- a/example/package.json +++ b/example/package.json @@ -16,6 +16,7 @@ "color": "^3.1.2", "expo": "^36.0.2", "expo-asset": "~8.0.0", + "expo-blur": "^8.0.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "~0.61.5", diff --git a/example/src/Screens/DynamicTabs.tsx b/example/src/Screens/DynamicTabs.tsx new file mode 100644 index 00000000..3c8c4312 --- /dev/null +++ b/example/src/Screens/DynamicTabs.tsx @@ -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(); + +export default function BottomTabsScreen() { + const [tabs, setTabs] = React.useState([0, 1]); + + return ( + + {tabs.map(i => ( + ( + + ), + }} + > + {() => ( + + Tab {i} + + + + )} + + ))} + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/example/src/Screens/ModalPresentationStack.tsx b/example/src/Screens/ModalPresentationStack.tsx index 58a8781c..b07b29ee 100644 --- a/example/src/Screens/ModalPresentationStack.tsx +++ b/example/src/Screens/ModalPresentationStack.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { View, StyleSheet } from 'react-native'; +import { View, StyleSheet, ScrollView } from 'react-native'; import { Button } from 'react-native-paper'; import { RouteProp, ParamListBase } from '@react-navigation/native'; import { @@ -25,7 +25,7 @@ const ArticleScreen = ({ route: RouteProp; }) => { return ( - + - - + + ); }; diff --git a/example/src/Screens/NativeStack.tsx b/example/src/Screens/NativeStack.tsx index 5e7df527..4e644c8f 100644 --- a/example/src/Screens/NativeStack.tsx +++ b/example/src/Screens/NativeStack.tsx @@ -137,7 +137,7 @@ const AlbumsScreen = ({ }: { navigation: NativeStackNavigation; }) => ( - + + + +
+ + ); +}; + +const AlbumsScreen = ({ + navigation, +}: { + navigation: SimpleStackNavigation; +}) => { + const headerHeight = useHeaderHeight(); + + return ( + + + + + + + + ); +}; + +const SimpleStack = createStackNavigator(); + +type Props = Partial> & { + navigation: StackNavigationProp; +}; + +export default function SimpleStackScreen({ navigation, ...rest }: Props) { + navigation.setOptions({ + headerShown: false, + }); + + return ( + + ({ + title: `Article by ${route.params?.author}`, + headerTintColor: '#fff', + headerStyle: { backgroundColor: '#ff005d' }, + headerBackTitleVisible: false, + headerTitleAlign: 'center', + headerBackImage: ({ tintColor }) => ( + + ), + headerRight: ({ tintColor }) => ( + + Alert.alert( + 'Never gonna give you up!', + 'Never gonna let you down! Never gonna run around and desert you!' + ) + } + /> + ), + })} + initialParams={{ author: 'Gandalf' }} + /> + ( + + + + ), + }} + /> + + ); +} + +const styles = StyleSheet.create({ + buttons: { + flexDirection: 'row', + padding: 8, + }, + button: { + margin: 8, + }, +}); diff --git a/example/src/Shared/Albums.tsx b/example/src/Shared/Albums.tsx index 88c53c12..5af788c6 100644 --- a/example/src/Shared/Albums.tsx +++ b/example/src/Shared/Albums.tsx @@ -1,7 +1,13 @@ /* eslint-disable import/no-commonjs */ import * as React from 'react'; -import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native'; +import { + Image, + Dimensions, + ScrollView, + StyleSheet, + ScrollViewProps, +} from 'react-native'; import { useScrollToTop } from '@react-navigation/native'; const COVERS = [ @@ -15,7 +21,7 @@ const COVERS = [ require('../../assets/album-art-8.jpg'), ]; -export default function Albums() { +export default function Albums(props: Partial) { const ref = React.useRef(null); useScrollToTop(ref); @@ -25,6 +31,7 @@ export default function Albums() { ref={ref} style={styles.container} contentContainerStyle={styles.content} + {...props} > {COVERS.map((source, i) => ( // eslint-disable-next-line react/no-array-index-key diff --git a/example/src/Shared/Article.tsx b/example/src/Shared/Article.tsx index 8b499b76..66ce9be1 100644 --- a/example/src/Shared/Article.tsx +++ b/example/src/Shared/Article.tsx @@ -1,8 +1,15 @@ import * as React from 'react'; -import { View, Text, Image, ScrollView, StyleSheet } from 'react-native'; +import { + View, + Text, + Image, + ScrollView, + StyleSheet, + ScrollViewProps, +} from 'react-native'; import { useScrollToTop, useTheme } from '@react-navigation/native'; -type Props = { +type Props = Partial & { date?: string; author?: { name: string; @@ -14,6 +21,7 @@ export default function Article({ author = { name: 'Knowledge Bot', }, + ...rest }: Props) { const ref = React.useRef(null); @@ -26,6 +34,7 @@ export default function Article({ ref={ref} style={{ backgroundColor: colors.card }} contentContainerStyle={styles.content} + {...rest} > ) { const ref = React.useRef(null); useScrollToTop(ref); @@ -29,6 +30,7 @@ export default function Chat() { {MESSAGES.map((text, i) => { const odd = i % 2; diff --git a/example/src/index.tsx b/example/src/index.tsx index ce7e0d78..093daaf1 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -42,9 +42,11 @@ import LinkingPrefixes from './LinkingPrefixes'; import SimpleStack from './Screens/SimpleStack'; import NativeStack from './Screens/NativeStack'; import ModalPresentationStack from './Screens/ModalPresentationStack'; +import StackHeaderCustomization from './Screens/StackHeaderCustomization'; import BottomTabs from './Screens/BottomTabs'; import MaterialTopTabsScreen from './Screens/MaterialTopTabs'; import MaterialBottomTabs from './Screens/MaterialBottomTabs'; +import DynamicTabs from './Screens/DynamicTabs'; import AuthFlow from './Screens/AuthFlow'; import CompatAPI from './Screens/CompatAPI'; @@ -68,6 +70,10 @@ const SCREENS = { title: 'Modal Presentation Stack', component: ModalPresentationStack, }, + StackHeaderCustomization: { + title: 'Header Customization in Stack', + component: StackHeaderCustomization, + }, BottomTabs: { title: 'Bottom Tabs', component: BottomTabs }, MaterialTopTabs: { title: 'Material Top Tabs', @@ -77,6 +83,10 @@ const SCREENS = { title: 'Material Bottom Tabs', component: MaterialBottomTabs, }, + DynamicTabs: { + title: 'Dynamic Tabs', + component: DynamicTabs, + }, AuthFlow: { title: 'Auth Flow', component: AuthFlow, diff --git a/packages/core/src/types.tsx b/packages/core/src/types.tsx index b43a483c..f5e73355 100644 --- a/packages/core/src/types.tsx +++ b/packages/core/src/types.tsx @@ -572,10 +572,7 @@ export type RouteConfig< /** * React component to render for this screen. */ - component: React.ComponentType<{ - route: RouteProp; - navigation: any; - }>; + component: React.ComponentType; } | { /** diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx index 85121f2b..788f3562 100644 --- a/packages/stack/src/index.tsx +++ b/packages/stack/src/index.tsx @@ -22,6 +22,7 @@ export { default as StackView } from './views/Stack/StackView'; export { default as Header } from './views/Header/Header'; export { default as HeaderTitle } from './views/Header/HeaderTitle'; export { default as HeaderBackButton } from './views/Header/HeaderBackButton'; +export { default as HeaderBackground } from './views/Header/HeaderBackground'; /** * Transition presets diff --git a/packages/stack/src/views/Header/HeaderBackground.tsx b/packages/stack/src/views/Header/HeaderBackground.tsx index 6d67d9ce..afdb1e3e 100644 --- a/packages/stack/src/views/Header/HeaderBackground.tsx +++ b/packages/stack/src/views/Header/HeaderBackground.tsx @@ -2,7 +2,11 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; import { useTheme } from '@react-navigation/native'; -export default function HeaderBackground({ style, ...rest }: ViewProps) { +type Props = ViewProps & { + children?: React.ReactNode; +}; + +export default function HeaderBackground({ style, ...rest }: Props) { const { colors } = useTheme(); return ( diff --git a/yarn.lock b/yarn.lock index 0ff31b13..679c75ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7150,6 +7150,13 @@ expo-asset@~8.0.0: path-browserify "^1.0.0" url-parse "^1.4.4" +expo-blur@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-8.0.0.tgz#79df808b266bda8b6a66d54567abda5738355ad0" + integrity sha512-aZhfT2clEc4D3y0tnCb8/mM1c1Gm8Fqk8xHwgJKV869+5lvtRcUKhlMhZTynspVmPzwHgWV7Q9VcOkzGs7N/5g== + dependencies: + prop-types "^15.6.0" + expo-cli@^3.11.5: version "3.11.5" resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.11.5.tgz#428576a5dbacbb94dda18927184bb3ba37a584f6"