kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-03-06 22:39:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: prepare for 4.x

Browse Source
This commit is contained in:
satyajit.happy
2019-08-30 14:54:54 +02:00
committed by Satyajit Sahoo
parent 81a9dc2071
commit 9bdf5fa784
66 changed files with 3639 additions and 7267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
example/.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["expo"]
}

6
example/.buckconfig Normal file
View File

@@ -0,0 +1,6 @@
[android]
target = Google Inc.:Google APIs:23
[maven_repositories]
central = https://repo1.maven.org/maven2

18
example/.eslintrc Normal file
View File

@@ -0,0 +1,18 @@
{
'extends': '../.eslintrc',
'settings':
{
'import/core-modules':
[
'expo-asset',
'react-navigation-stack',
'react-native-gesture-handler',
'react-native-reanimated',
],
},
"rules": {
"react-native/no-inline-styles": "off"
}
}

1
example/.watchmanconfig Normal file
View File

@@ -0,0 +1 @@
{}

454
example/App.tsx Normal file
View File

@@ -0,0 +1,454 @@
import React from 'react';
import {
Animated,
Image,
Platform,
StatusBar,
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native';
import {
NativeViewGestureHandler,
RectButton,
} from 'react-native-gesture-handler';
import {
SupportedThemes,
ThemeColors,
ThemeContext,
Themed,
createAppContainer,
SafeAreaView,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import CustomTabs from './src/CustomTabs';
import CustomTabUI from './src/CustomTabUI';
import Drawer from './src/Drawer';
import ModalStack from './src/ModalStack';
import SimpleStack from './src/SimpleStack';
import SimpleTabs from './src/SimpleTabs';
import StacksInTabs from './src/StacksInTabs';
import StacksOverTabs from './src/StacksOverTabs';
import StacksOverTopTabs from './src/StacksOverTopTabs';
import StacksAndKeys from './src/StacksAndKeys';
import StackWithCustomHeaderBackImage from './src/StackWithCustomHeaderBackImage';
import StackWithHeaderPreset from './src/StackWithHeaderPreset';
import StackWithTranslucentHeader from './src/StackWithTranslucentHeader';
import SwitchWithStacks from './src/SwitchWithStacks';
import TabsInDrawer from './src/TabsInDrawer';
const ExampleInfo: any = {
CustomTabUI: {
description: 'Render additional views around a Tab navigator',
name: 'Custom Tabs UI',
},
CustomTabs: {
description: 'Custom tabs with tab router',
name: 'Custom Tabs',
},
CustomTransitioner: {
description: 'Custom transitioner with stack router',
name: 'Custom Transitioner',
},
Drawer: {
description: 'Android-style drawer navigation',
name: 'Drawer Example',
},
InactiveStack: {
description:
'An inactive route in a stack should be given the opportunity to handle actions',
name: 'Navigate idempotently to stacks in inactive routes',
},
KeyboardHandlingExample: {
description:
'Demo automatic handling of keyboard showing/hiding inside StackNavigator',
name: 'Keyboard Handling Example',
},
LinkStack: {
description: 'Deep linking into a route in stack',
name: 'Link in Stack',
},
LinkTabs: {
description: 'Deep linking into a route in tab',
name: 'Link to Settings Tab',
},
ModalStack: {
description:
Platform.OS === 'ios'
? 'Stack navigation with modals'
: 'Dynamically showing and hiding the header',
name:
Platform.OS === 'ios'
? 'Modal Stack Example'
: 'Stack with Dynamic Header',
},
SimpleStack: {
description: 'A card stack',
name: 'Stack Example',
},
SimpleTabs: {
description: 'Tabs following platform conventions',
name: 'Tabs Example',
},
StackWithCustomHeaderBackImage: {
description: 'Stack with custom header back image',
name: 'Custom header back image',
},
StackWithHeaderPreset: {
description: 'Masked back button and sliding header items. iOS only.',
name: 'UIKit-style Header Transitions',
},
StackWithTranslucentHeader: {
description: 'Render arbitrary translucent content in header background.',
name: 'Translucent Header',
},
StacksInTabs: {
description: 'Nested stack navigation in tabs',
name: 'Stacks in Tabs',
},
StacksOverTabs: {
description: 'Nested stack navigation that pushes on top of tabs',
name: 'Stacks over Tabs',
},
StacksOverTopTabs: {
description: 'Tab navigator in stack with custom header heights',
name: 'Stacks with non-standard header height',
},
StacksAndKeys: {
description: 'Use keys to link between screens',
name: 'Link in Stack with keys',
},
SwitchWithStacks: {
description: 'Jump between routes',
name: 'Switch between routes',
},
// MultipleDrawer: {
// description: 'Add any drawer you need',
// name: 'Multiple Drawer Example',
// },
TabsInDrawer: {
description: 'A drawer combined with tabs',
name: 'Drawer + Tabs Example',
},
TabsWithNavigationEvents: {
description:
'Declarative NavigationEvents component to subscribe to navigation events',
name: 'NavigationEvents',
},
TabsWithNavigationFocus: {
description: 'Receive the focus prop to know when a screen is focused',
name: 'withNavigationFocus',
},
};
const ExampleRoutes: any = {
CustomTabUI,
CustomTabs,
Drawer,
ModalStack,
SimpleStack,
SimpleTabs,
StackWithCustomHeaderBackImage,
StackWithTranslucentHeader,
StacksAndKeys,
StacksOverTabs,
SwitchWithStacks,
StacksOverTopTabs,
StacksInTabs,
...Platform.select({
android: {},
ios: {
StackWithHeaderPreset,
},
}),
TabsInDrawer,
LinkStack: {
screen: SimpleStack,
path: 'people/Jordan',
},
LinkTabs: {
screen: SimpleTabs,
path: 'settings',
},
};
interface State {
scrollY: Animated.Value;
}
class MainScreen extends React.Component<any, State> {
static contextType = ThemeContext;
context!: React.ContextType<typeof ThemeContext>;
state = {
scrollY: new Animated.Value(0),
};
render() {
const { navigation } = this.props;
const scale = this.state.scrollY.interpolate({
extrapolate: 'clamp',
inputRange: [-450, 0, 100],
outputRange: [2, 1, 0.8],
});
const translateY = this.state.scrollY.interpolate({
inputRange: [-450, 0, 100],
outputRange: [-150, 0, 40],
});
const opacity = this.state.scrollY.interpolate({
extrapolate: 'clamp',
inputRange: [0, 50],
outputRange: [1, 0],
});
const underlayOpacity = this.state.scrollY.interpolate({
extrapolate: 'clamp',
inputRange: [0, 50],
outputRange: [0, 1],
});
const backgroundScale = this.state.scrollY.interpolate({
extrapolate: 'clamp',
inputRange: [-450, 0],
outputRange: [3, 1],
});
const backgroundTranslateY = this.state.scrollY.interpolate({
inputRange: [-450, 0],
outputRange: [0, 0],
});
return (
<View style={{ flex: 1 }}>
<NativeViewGestureHandler>
<Animated.ScrollView
style={{ flex: 1, backgroundColor: ThemeColors[this.context].body }}
scrollEventThrottle={1}
onScroll={Animated.event(
[
{
nativeEvent: { contentOffset: { y: this.state.scrollY } },
},
],
{ useNativeDriver: true }
)}
>
<Animated.View
style={[
styles.backgroundUnderlay,
{
transform: [
{ scale: backgroundScale },
{ translateY: backgroundTranslateY },
],
},
]}
/>
<Animated.View
style={{ opacity, transform: [{ scale }, { translateY }] }}
>
<SafeAreaView
style={styles.bannerContainer}
forceInset={{ top: 'always', bottom: 'never' }}
>
<View style={styles.banner}>
<Image
source={require('./src/assets/NavLogo.png')}
style={styles.bannerImage}
/>
<Text style={styles.bannerTitle}>
React Navigation Examples
</Text>
</View>
</SafeAreaView>
</Animated.View>
<SafeAreaView
forceInset={{ top: 'never', bottom: 'always' }}
style={{ backgroundColor: '#eee' }}
>
<View
style={{
backgroundColor: ThemeColors[this.context].bodyContent,
}}
>
{Object.keys(ExampleRoutes).map((routeName: string) => (
<RectButton
key={routeName}
underlayColor="#ccc"
activeOpacity={0.3}
onPress={() => {
const route = ExampleRoutes[routeName];
if (route.screen || route.path || route.params) {
const { path, params, screen } = route;
const { router } = screen;
const action =
path &&
router.getActionForPathAndParams(path, params);
navigation.navigate(routeName, {}, action);
} else {
navigation.navigate(routeName);
}
}}
>
<View
style={[
styles.item,
this.context === 'dark'
? styles.itemDark
: styles.itemLight,
]}
>
<Themed.Text style={styles.title}>
{ExampleInfo[routeName].name}
</Themed.Text>
<Text style={styles.description}>
{ExampleInfo[routeName].description}
</Text>
</View>
</RectButton>
))}
</View>
</SafeAreaView>
</Animated.ScrollView>
</NativeViewGestureHandler>
<StatusBar barStyle="light-content" />
<Animated.View
style={[styles.statusBarUnderlay, { opacity: underlayOpacity }]}
/>
</View>
);
}
}
const Navigation = createAppContainer(
createStackNavigator(
{
...ExampleRoutes,
Index: {
screen: MainScreen,
},
},
{
headerMode: 'none',
initialRouteName: 'Index',
/*
* Use modal on iOS because the card mode comes from the right,
* which conflicts with the drawer example gesture
*/
mode: Platform.OS === 'ios' ? 'modal' : 'card',
}
)
);
export default () => {
let [theme, setTheme] = React.useState<SupportedThemes>('light');
return (
<View style={{ flex: 1 }}>
<Navigation theme={theme} />
<View style={{ position: 'absolute', bottom: 60, right: 20 }}>
<TouchableOpacity
onPress={() => {
setTheme(theme === 'light' ? 'dark' : 'light');
}}
>
<View
style={{
backgroundColor: ThemeColors[theme].bodyContent,
borderRadius: 25,
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderColor: ThemeColors[theme].bodyBorder,
borderWidth: 1,
shadowColor: ThemeColors[theme].label,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.4,
shadowRadius: 2,
elevation: 5,
}}
>
<MaterialCommunityIcons
name="theme-light-dark"
size={30}
color={ThemeColors[theme].label}
/>
</View>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
backgroundUnderlay: {
backgroundColor: '#673ab7',
height: 300,
left: 0,
position: 'absolute',
right: 0,
top: -100,
},
banner: {
alignItems: 'center',
flexDirection: 'row',
padding: 16,
},
bannerContainer: {
// backgroundColor: '#673ab7',
alignItems: 'center',
},
bannerImage: {
height: 36,
margin: 8,
resizeMode: 'contain',
tintColor: '#fff',
width: 36,
},
bannerTitle: {
color: '#fff',
fontSize: 18,
fontWeight: '200',
marginRight: 5,
marginVertical: 8,
},
description: {
color: '#999',
fontSize: 13,
},
item: {
borderBottomWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 16,
paddingVertical: 12,
},
itemLight: {
borderBottomColor: ThemeColors.light.bodyBorder,
},
itemDark: {
borderBottomColor: ThemeColors.dark.bodyBorder,
},
statusBarUnderlay: {
backgroundColor: '#673ab7',
height: 20,
left: 0,
position: 'absolute',
right: 0,
top: 0,
},
title: {
fontSize: 16,
fontWeight: 'bold',
},
});

14
example/app.json Normal file
View File

@@ -0,0 +1,14 @@
{
"expo": {
"name": "React Navigation Stack Example",
"description": "Demonstrates the various capabilities of react-navigation-stack",
"slug": "react-navigation-stack-demo",
"sdkVersion": "33.0.0",
"version": "1.0.0",
"primaryColor": "#2196f3",
"packagerOpts": {
"config": "./metro.config.js",
"projectRoots": ""
}
}
}

35
example/metro.config.js Normal file
View File

@@ -0,0 +1,35 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');
const project = require('../package.json');
const escape = require('escape-string-regexp');
const projectDependencies = Object.keys({
...project.dependencies,
...project.peerDependencies,
});
module.exports = {
projectRoot: __dirname,
watchFolders: [path.resolve(__dirname, '..')],
resolver: {
blacklistRE: blacklist([
new RegExp(
`^${escape(
path.resolve(__dirname, 'node_modules', project.name)
)}\\/.*$`
),
new RegExp(
`^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
),
]),
providesModuleNodeModules: [
'@expo/vector-icons',
'@babel/runtime',
...projectDependencies,
],
},
};

37
example/package.json Normal file
View File

@@ -0,0 +1,37 @@
{
"name": "playground",
"version": "0.0.1",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios"
},
"dependencies": {
"@expo/vector-icons": "^10.0.0",
"@react-native-community/masked-view": "^0.1.1",
"@react-navigation/core": "^3.5.0",
"@react-navigation/native": "^3.6.2",
"expo": "^33.0.7",
"expo-asset": "^5.0.1",
"expo-blur": "~5.0.1",
"expo-constants": "~5.0.1",
"hoist-non-react-statics": "^3.3.0",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-iphone-x-helper": "^1.2.1",
"react-native-paper": "^2.15.2",
"react-navigation-drawer": "^2.0.1",
"react-navigation-header-buttons": "^3.0.2",
"react-navigation-stack": "^1.5.1",
"react-navigation-tabs": "^1.2.0"
},
"devDependencies": {
"babel-plugin-module-resolver": "^3.2.0"
},
"resolutions": {
"react-native-safe-area-view": "0.14.6",
"react-native-screens": "1.0.0-alpha.23"
}
}

215
example/src/CustomTabUI.tsx Normal file
View File

@@ -0,0 +1,215 @@
import React from 'react';
import {
Alert,
TouchableOpacity,
LayoutAnimation,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import {
Themed,
ThemeContext,
NavigationScreenProp,
NavigationState,
SafeAreaView,
} from 'react-navigation';
import {
createMaterialTopTabNavigator,
MaterialTopTabBar,
} from 'react-navigation-tabs';
import { Button } from './commonComponents/ButtonWithMargin';
interface Props {
navigation: NavigationScreenProp<NavigationState>;
}
class MyHomeScreen extends React.Component<Props> {
static navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({
tintColor,
focused,
horizontal,
}: {
tintColor: string;
focused: boolean;
horizontal: boolean;
}) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home'}
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
),
};
render() {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
<Themed.Text>Home Screen</Themed.Text>
<Button
onPress={() => navigation.navigate('Home')}
title="Go to home tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
);
}
}
class StarredScreen extends React.Component<Props> {
static navigationOptions = {
tabBarLabel: 'Starred',
tabBarIcon: ({
tintColor,
focused,
horizontal,
}: {
tintColor: string;
focused: boolean;
horizontal: boolean;
}) => (
<Ionicons
name={focused ? 'ios-people' : 'ios-people'}
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
),
};
render() {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
<Themed.Text>Starred Screen</Themed.Text>
<Button
onPress={() => navigation.navigate('Home')}
title="Go to home tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
);
}
}
type MaterialTopTabBarProps = React.ComponentProps<typeof MaterialTopTabBar>;
class MaterialTopTabBarWrapper extends React.Component<MaterialTopTabBarProps> {
render() {
return (
<SafeAreaView
style={{ backgroundColor: '#000' }}
forceInset={{ top: 'always', horizontal: 'never', bottom: 'never' }}
>
<MaterialTopTabBar {...this.props} />
</SafeAreaView>
);
}
}
class FeaturedScreen extends React.Component<Props> {
static navigationOptions = {
tabBarLabel: 'Featured',
tabBarIcon: ({
tintColor,
focused,
horizontal,
}: {
tintColor: string;
focused: boolean;
horizontal: boolean;
}) => (
<Ionicons
name={focused ? 'ios-star' : 'ios-star'}
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
),
};
render() {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
<Themed.Text>Featured Screen</Themed.Text>
<Button
onPress={() => navigation.navigate('Home')}
title="Go to home tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
);
}
}
const SimpleTabs = createMaterialTopTabNavigator(
{
Home: MyHomeScreen,
Starred: StarredScreen,
Featured: FeaturedScreen,
},
{
tabBarComponent: MaterialTopTabBarWrapper,
tabBarOptions: {
style: {
backgroundColor: '#000',
},
},
}
);
class TabNavigator extends React.Component<Props> {
static contextType = ThemeContext;
static router = SimpleTabs.router;
componentWillUpdate() {
LayoutAnimation.easeInEaseOut();
}
render() {
const { navigation } = this.props;
const { routes, index } = navigation.state;
const activeRoute = routes[index];
let bottom = null;
if (activeRoute.routeName !== 'Home') {
bottom = (
<View
style={{
height: 50,
borderTopWidth: StyleSheet.hairlineWidth,
backgroundColor: this.context === 'light' ? '#000' : '#fff',
alignItems: 'center',
justifyContent: 'center',
}}
>
<TouchableOpacity
onPress={() => {
Alert.alert('hello!');
//
}}
>
<Text
style={{
fontSize: 20,
color: this.context === 'light' ? '#fff' : '#000',
fontWeight: 'bold',
}}
>
Check out
</Text>
</TouchableOpacity>
</View>
);
}
return (
<View style={{ flex: 1 }}>
<StatusBar barStyle="light-content" />
<SimpleTabs navigation={navigation} />
{bottom}
</View>
);
}
}
export default TabNavigator;

139
example/src/CustomTabs.tsx Normal file
View File

@@ -0,0 +1,139 @@
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { BorderlessButton } from 'react-native-gesture-handler';
import {
createNavigator,
NavigationState,
SafeAreaView,
TabRouter,
Themed,
useTheme,
createAppContainer,
NavigationScreenProp,
} from 'react-navigation';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const MyNavScreen = ({
navigation,
banner,
}: {
navigation: NavigationScreenProp<NavigationState>;
banner: string;
}) => (
<ScrollView>
<SafeAreaView forceInset={{ horizontal: 'always' }}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => {
navigation.goBack(null);
}}
title="Go back"
/>
</SafeAreaView>
<Themed.StatusBar />
</ScrollView>
);
const MyHomeScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Home Screen" navigation={navigation} />;
const MyNotificationsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
const MySettingsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Settings Screen" navigation={navigation} />;
const CustomTabBar = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => {
const { routes } = navigation.state;
return (
<SafeAreaView style={styles.tabContainer}>
{routes.map(route => (
<BorderlessButton
onPress={() => navigation.navigate(route.routeName)}
style={styles.tab}
key={route.routeName}
>
<Themed.Text>{route.routeName}</Themed.Text>
</BorderlessButton>
))}
</SafeAreaView>
);
};
// @todo - how does the type definition for a custom navigator work?
class CustomTabView extends React.Component<any> {
render() {
const { navigation, descriptors } = this.props;
const { routes, index } = navigation.state;
const descriptor = descriptors[routes[index].key];
const ActiveScreen = descriptor.getComponent();
return (
<SafeAreaView forceInset={{ top: 'always' }}>
<CustomTabBar navigation={navigation} />
<ActiveScreen navigation={descriptor.navigation} />
</SafeAreaView>
);
}
}
const CustomTabRouter = TabRouter(
{
Home: {
path: '',
screen: MyHomeScreen,
},
Notifications: {
path: 'notifications',
screen: MyNotificationsScreen,
},
Settings: {
path: 'settings',
screen: MySettingsScreen,
},
},
{
// Change this to start on a different tab
initialRouteName: 'Home',
}
);
const CustomTabs = createAppContainer(
createNavigator(CustomTabView, CustomTabRouter, {})
);
const styles = StyleSheet.create({
tab: {
alignItems: 'center',
borderColor: '#ddd',
borderRadius: 4,
borderWidth: 1,
flex: 1,
justifyContent: 'center',
margin: 4,
},
tabContainer: {
flexDirection: 'row',
height: 48,
},
});
export default () => {
// Need to thread the theme through to detached nested navigator
let theme = useTheme();
return <CustomTabs detached theme={theme} />;
};

118
example/src/Drawer.tsx Normal file
View File

@@ -0,0 +1,118 @@
import React from 'react';
import { ScrollView, StyleProp, TextStyle } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import {
Themed,
SafeAreaView,
NavigationScreenProp,
NavigationState,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const MyNavScreen = ({
navigation,
banner,
}: {
navigation: NavigationScreenProp<NavigationState>;
banner: string;
}) => (
<ScrollView>
<SafeAreaView forceInset={{ top: 'always' }}>
<SampleText>{banner}</SampleText>
<Button onPress={() => navigation.openDrawer()} title="Open drawer" />
<Button
onPress={() => navigation.navigate('Email')}
title="Open other screen"
/>
<Button onPress={() => navigation.navigate('Index')} title="Go back" />
</SafeAreaView>
<Themed.StatusBar />
</ScrollView>
);
const InboxScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
InboxScreen.navigationOptions = {
headerTitle: 'Inbox',
};
const EmailScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
const DraftsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
DraftsScreen.navigationOptions = {
headerTitle: 'Drafts',
};
const InboxStack = createStackNavigator(
{
Email: { screen: EmailScreen },
Inbox: { screen: InboxScreen },
},
{
navigationOptions: {
drawerIcon: ({ tintColor }: { tintColor: string }) => (
<MaterialIcons
name="move-to-inbox"
size={24}
style={{ color: tintColor } as StyleProp<TextStyle>}
/>
),
drawerLabel: 'Inbox',
},
}
);
const DraftsStack = createStackNavigator(
{
Drafts: { screen: DraftsScreen },
Email: { screen: EmailScreen },
},
{
navigationOptions: {
drawerIcon: ({ tintColor }: { tintColor: string }) => (
<MaterialIcons
name="drafts"
size={24}
style={{ color: tintColor } as StyleProp<TextStyle>}
/>
),
drawerLabel: 'Drafts',
},
}
);
const DrawerExample = createDrawerNavigator(
{
Drafts: {
path: '/sent',
screen: DraftsStack,
},
Inbox: {
path: '/',
screen: InboxStack,
},
},
{
contentOptions: {
activeTintColor: '#e91e63',
},
initialRouteName: 'Drafts',
}
);
export default DrawerExample;

131
example/src/ModalStack.tsx Normal file
View File

@@ -0,0 +1,131 @@
import React from 'react';
import { ScrollView } from 'react-native';
import {
NavigationScreenProp,
Themed,
SafeAreaView,
NavigationState,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const MyNavScreen = ({
navigation,
banner,
}: {
navigation: NavigationScreenProp<NavigationState & any>;
banner: string;
}) => (
<ScrollView>
<SafeAreaView
forceInset={{
top: navigation.state.routeName === 'HeaderTest' ? 'always' : 'never',
}}
>
<SampleText>{banner}</SampleText>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
title="Go to a profile screen"
/>
<Button
onPress={() => navigation.navigate('HeaderTest')}
title="Go to a header toggle screen"
/>
{navigation.state.routeName === 'HeaderTest' && (
<Button
title="Toggle Header"
onPress={() =>
navigation.setParams({
headerVisible:
!navigation.state.params ||
!navigation.state.params.headerVisible,
})
}
/>
)}
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
<Themed.StatusBar />
</ScrollView>
);
const MyHomeScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Home Screen" navigation={navigation} />;
MyHomeScreen.navigationOptions = {
title: 'Welcome',
};
const MyProfileScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner={`${navigation.state.params!.name}'s Profile`}
navigation={navigation}
/>
);
MyProfileScreen.navigationOptions = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => ({
title: `${navigation.state.params!.name}'s Profile!`,
});
const ProfileNavigator = createStackNavigator(
{
Home: {
screen: MyHomeScreen,
},
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
},
},
{
defaultNavigationOptions: {
headerLeft: null,
},
mode: 'modal',
}
);
const MyHeaderTestScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Full screen view" navigation={navigation} />;
MyHeaderTestScreen.navigationOptions = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => {
const headerVisible =
navigation.state.params && navigation.state.params.headerVisible;
return {
header: headerVisible ? undefined : null,
title: 'Now you see me',
};
};
const ModalStack = createStackNavigator(
{
HeaderTest: { screen: MyHeaderTestScreen },
ProfileNavigator: {
screen: ProfileNavigator,
},
},
{
defaultNavigationOptions: {
header: null,
},
mode: 'modal',
}
);
export default ModalStack;

19
example/src/SampleText.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React, { ReactNode } from 'react';
import { StyleSheet } from 'react-native';
import { Themed } from 'react-navigation';
/**
* Used across examples as a screen placeholder.
*/
const SampleText = ({ children }: { children?: ReactNode }) => (
<Themed.Text style={styles.sampleText}>{children}</Themed.Text>
);
export default SampleText;
const styles = StyleSheet.create({
sampleText: {
margin: 14,
},
});

249
example/src/SimpleStack.tsx Normal file
View File

@@ -0,0 +1,249 @@
// tslint:disable no-unused-expression
import * as React from 'react';
import {
NavigationActions,
NavigationEventPayload,
NavigationEventSubscription,
NavigationScreenProp,
NavigationState,
NavigationStateRoute,
SafeAreaView,
StackActions,
Themed,
withNavigation,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Button } from './commonComponents/ButtonWithMargin';
import { HeaderButtons } from './commonComponents/HeaderButtons';
import SampleText from './SampleText';
const DEBUG = false;
interface MyNavScreenProps {
navigation: NavigationScreenProp<NavigationState>;
banner: React.ReactNode;
}
interface BackButtonProps {
navigation: NavigationScreenProp<NavigationStateRoute<any>>;
}
class MyBackButton extends React.Component<BackButtonProps, any> {
render() {
return (
<HeaderButtons>
<HeaderButtons.Item title="Back" onPress={this.navigateBack} />
</HeaderButtons>
);
}
navigateBack = () => {
this.props.navigation.goBack(null);
};
}
const MyBackButtonWithNavigation: any = withNavigation(MyBackButton);
class MyNavScreen extends React.Component<MyNavScreenProps> {
render() {
const { navigation, banner } = this.props;
const { push, replace, popToTop, pop, dismiss } = navigation;
return (
<SafeAreaView forceInset={{ top: 'never' }}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => push('Profile', { name: 'Jane' })}
title="Push a profile screen"
/>
<Button
onPress={() =>
navigation.dispatch(
StackActions.reset({
actions: [
NavigationActions.navigate({
params: { name: 'Jane' },
routeName: 'Photos',
}),
],
index: 0,
})
)
}
title="Reset photos"
/>
<Button
onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
title="Navigate to a photos screen"
/>
<Button
onPress={() => replace('Profile', { name: 'Lucy' })}
title="Replace with profile"
/>
<Button onPress={() => popToTop()} title="Pop to top" />
<Button onPress={() => pop()} title="Pop" />
<Button
onPress={() => {
if (navigation.goBack()) {
console.log('goBack handled');
} else {
console.log('goBack unhandled');
}
}}
title="Go back"
/>
<Button onPress={() => dismiss()} title="Dismiss" />
<Themed.StatusBar />
</SafeAreaView>
);
}
}
interface MyHomeScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyHomeScreen extends React.Component<MyHomeScreenProps> {
static navigationOptions = {
title: 'Welcome',
};
s0: NavigationEventSubscription | null = null;
s1: NavigationEventSubscription | null = null;
s2: NavigationEventSubscription | null = null;
s3: NavigationEventSubscription | null = null;
componentDidMount() {
this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
}
componentWillUnmount() {
this.s0!.remove();
this.s1!.remove();
this.s2!.remove();
this.s3!.remove();
}
onWF = (a: NavigationEventPayload) => {
DEBUG && console.log('willFocus HomeScreen', a);
};
onDF = (a: NavigationEventPayload) => {
DEBUG && console.log('didFocus HomeScreen', a);
};
onWB = (a: NavigationEventPayload) => {
DEBUG && console.log('willBlur HomeScreen', a);
};
onDB = (a: NavigationEventPayload) => {
DEBUG && console.log('didBlur HomeScreen', a);
};
render() {
const { navigation } = this.props;
return <MyNavScreen banner="Home Screen" navigation={navigation} />;
}
}
interface MyPhotosScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
static navigationOptions = {
headerLeft: () => <MyBackButtonWithNavigation />,
title: 'Photos',
};
s0: NavigationEventSubscription | null = null;
s1: NavigationEventSubscription | null = null;
s2: NavigationEventSubscription | null = null;
s3: NavigationEventSubscription | null = null;
componentDidMount() {
this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
}
componentWillUnmount() {
this.s0!.remove();
this.s1!.remove();
this.s2!.remove();
this.s3!.remove();
}
onWF = (a: NavigationEventPayload) => {
DEBUG && console.log('willFocus PhotosScreen', a);
};
onDF = (a: NavigationEventPayload) => {
DEBUG && console.log('didFocus PhotosScreen', a);
};
onWB = (a: NavigationEventPayload) => {
DEBUG && console.log('willBlur PhotosScreen', a);
};
onDB = (a: NavigationEventPayload) => {
DEBUG && console.log('didBlur PhotosScreen', a);
};
render() {
const { navigation } = this.props;
return (
<MyNavScreen
banner={`${navigation.getParam('name')}'s Photos`}
navigation={navigation}
/>
);
}
}
const MyProfileScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner={`${
navigation.getParam('mode') === 'edit' ? 'Now Editing ' : ''
}${navigation.getParam('name')}'s Profile`}
navigation={navigation}
/>
);
MyProfileScreen.navigationOptions = (props: MyHomeScreenProps) => {
const { navigation } = props;
const { state, setParams } = navigation;
const { params } = state;
return {
headerBackImage: params!.headerBackImage,
// Render a button on the right side of the header.
// When pressed switches the screen to edit mode.
headerRight: (
<HeaderButtons>
<HeaderButtons.Item
title={params!.mode === 'edit' ? 'Done' : 'Edit'}
onPress={() =>
setParams({ mode: params!.mode === 'edit' ? '' : 'edit' })
}
/>
</HeaderButtons>
),
headerTitle: `${params!.name}'s Profile!`,
};
};
const SimpleStack = createStackNavigator(
{
Home: {
screen: MyHomeScreen,
},
Photos: {
path: 'photos/:name',
screen: MyPhotosScreen,
},
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
},
},
{
// headerLayoutPreset: 'center',
}
);
export default SimpleStack;

271
example/src/SimpleTabs.tsx Normal file
View File

@@ -0,0 +1,271 @@
import React from 'react';
import { Ionicons } from '@expo/vector-icons';
import {
FlatList,
NavigationEventSubscription,
NavigationScreenProp,
SafeAreaView,
Themed,
ScrollView,
NavigationEventPayload,
NavigationState,
} from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
Praesent lobortis elit sit amet mauris pulvinar, viverra condimentum massa pellentesque. Curabitur massa ex, dignissim eget neque at, fringilla consectetur justo. Cras sollicitudin vel ligula sed cursus. Aliquam porta sem hendrerit diam porta ultricies. Sed eu mi erat. Curabitur id justo vel tortor hendrerit vestibulum id eget est. Morbi eros magna, placerat id diam ut, varius sollicitudin mi. Curabitur pretium finibus accumsan.`;
const MyNavScreen = ({
navigation,
banner,
}: {
navigation: NavigationScreenProp<NavigationState>;
banner: string;
}) => (
<ScrollView style={{ flex: 1 }}>
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => navigation.navigate('Home')}
title="Go to home tab"
/>
<Button
onPress={() => navigation.navigate('Settings')}
title="Go to settings tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
{TEXT.split('\n').map((p, n) => (
<Themed.Text
key={n}
style={{ marginVertical: 10, marginHorizontal: 8 }}
>
{p}
</Themed.Text>
))}
<Themed.StatusBar />
</SafeAreaView>
</ScrollView>
);
const MyListScreen = () => (
<FlatList
data={TEXT.split('\n')}
style={{ paddingTop: 10 }}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item }) => (
<Themed.Text
style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}
>
{item}
</Themed.Text>
)}
/>
);
const MyHomeScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Home Tab" navigation={navigation} />;
MyHomeScreen.navigationOptions = {
tabBarIcon: ({
tintColor,
horizontal,
}: {
tintColor: string;
focused: boolean;
horizontal: boolean;
}) => (
<Ionicons
name="ios-home"
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
),
tabBarLabel: 'Home',
tabBarTestIDProps: {
accessibilityLabel: 'TEST_ID_HOME_ACLBL',
testID: 'TEST_ID_HOME',
},
};
MyListScreen.navigationOptions = MyHomeScreen.navigationOptions;
interface MyPeopleScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
static navigationOptions = {
tabBarIcon: ({
tintColor,
horizontal,
}: {
tintColor: string;
focused: boolean;
horizontal: boolean;
}) => (
<Ionicons
name="ios-people"
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
),
tabBarLabel: 'People',
};
s0: NavigationEventSubscription | null = null;
s1: NavigationEventSubscription | null = null;
s2: NavigationEventSubscription | null = null;
s3: NavigationEventSubscription | null = null;
componentDidMount() {
// this.s0! = this.props.navigation.addListener('willFocus', this.onEvent);
// this.s1! = this.props.navigation.addListener('didFocus', this.onEvent);
// this.s2! = this.props.navigation.addListener('willBlur', this.onEvent);
// this.s3! = this.props.navigation.addListener('didBlur', this.onEvent);
}
componentWillUnmount() {
// this.s0!.remove();
// this.s1!.remove();
// this.s2!.remove();
// this.s3!.remove();
}
onEvent = (a: NavigationEventPayload) => {
console.log('EVENT ON PEOPLE TAB', a.type, a);
};
render() {
const { navigation } = this.props;
return <MyNavScreen banner="People Tab" navigation={navigation} />;
}
}
interface MyChatScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyChatScreen extends React.Component<MyChatScreenProps> {
static navigationOptions = {
tabBarIcon: ({
tintColor,
horizontal,
}: {
tintColor: string;
focused: boolean;
horizontal: boolean;
}) => (
<Ionicons
name="ios-chatboxes"
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
),
tabBarLabel: 'Chat',
};
s0: NavigationEventSubscription | null = null;
s1: NavigationEventSubscription | null = null;
s2: NavigationEventSubscription | null = null;
s3: NavigationEventSubscription | null = null;
componentDidMount() {
// this.s0! = this.props.navigation.addListener('willFocus', this.onEvent);
// this.s1! = this.props.navigation.addListener('didFocus', this.onEvent);
// this.s2! = this.props.navigation.addListener('willBlur', this.onEvent);
// this.s3! = this.props.navigation.addListener('didBlur', this.onEvent);
}
componentWillUnmount() {
// this.s0!.remove();
// this.s1!.remove();
// this.s2!.remove();
// this.s3!.remove();
}
onEvent = (a: NavigationEventPayload) => {
console.log('EVENT ON CHAT TAB', a.type, a);
};
render() {
const { navigation } = this.props;
return <MyNavScreen banner="Chat Tab" navigation={navigation} />;
}
}
const MySettingsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Settings Tab" navigation={navigation} />;
MySettingsScreen.navigationOptions = {
tabBarIcon: ({
tintColor,
horizontal,
}: {
tintColor: string;
focused: boolean;
horizontal: boolean;
}) => (
<Ionicons
name="ios-settings"
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
),
tabBarLabel: 'Settings',
};
const SimpleTabs = createBottomTabNavigator(
{
Chat: {
path: 'chat',
screen: MyChatScreen,
},
Home: {
path: '',
screen: MyListScreen,
},
People: {
path: 'cart',
screen: MyPeopleScreen,
},
Settings: {
path: 'settings',
screen: MySettingsScreen,
},
},
{
backBehavior: 'history',
tabBarOptions: {
activeTintColor: '#e91e63',
},
}
);
interface SimpleTabsContainerProps {
navigation: NavigationScreenProp<NavigationState>;
}
class SimpleTabsContainer extends React.Component<SimpleTabsContainerProps> {
static router = SimpleTabs.router;
s0: NavigationEventSubscription | null = null;
s1: NavigationEventSubscription | null = null;
s2: NavigationEventSubscription | null = null;
s3: NavigationEventSubscription | null = null;
componentDidMount() {
// this.s0! = this.props.navigation.addListener('willFocus', this.onAction);
// this.s1! = this.props.navigation.addListener('didFocus', this.onAction);
// this.s2! = this.props.navigation.addListener('willBlur', this.onAction);
// this.s3! = this.props.navigation.addListener('didBlur', this.onAction);
}
componentWillUnmount() {
// this.s0!.remove();
// this.s1!.remove();
// this.s2!.remove();
// this.s3!.remove();
}
onAction = (a: NavigationEventPayload) => {
console.log('TABS EVENT', a.type, a);
};
render() {
return <SimpleTabs navigation={this.props.navigation} />;
}
}
export default SimpleTabsContainer;

154
example/src/StackWithCustomHeaderBackImage.tsx Normal file
View File

@@ -0,0 +1,154 @@
import * as React from 'react';
import { Button, Image, StyleSheet } from 'react-native';
import {
NavigationScreenProp,
NavigationState,
NavigationScreenConfigProps,
Themed,
SafeAreaView,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import SampleText from './SampleText';
interface MyNavScreenProps {
navigation: NavigationScreenProp<NavigationState>;
banner: React.ReactNode;
}
class MyCustomHeaderBackImage extends React.Component<any, any> {
render() {
const source = require('./assets/back.png');
return (
<Image
source={source}
style={[styles.myCustomHeaderBackImage, this.props.style]}
/>
);
}
}
class MyNavScreen extends React.Component<MyNavScreenProps> {
render() {
const { navigation, banner } = this.props;
return (
<SafeAreaView>
<SampleText>{banner}</SampleText>
<Button
onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
title="Navigate to a photos screen"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<Themed.StatusBar />
</SafeAreaView>
);
}
}
interface MyHomeScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyHomeScreen extends React.Component<MyHomeScreenProps> {
static navigationOptions = {
headerBackTitle: null,
title: 'Welcome',
};
render() {
const { navigation } = this.props;
return <MyNavScreen banner="Home Screen" navigation={navigation} />;
}
}
interface MyPhotosScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
static navigationOptions = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => ({
headerBackTitle: null,
title: `${navigation.state.params!.name}'s photos`,
});
render() {
const { navigation } = this.props;
return (
<SafeAreaView>
<SampleText>{`${navigation.state.params!.name}'s Photos`}</SampleText>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
title="Navigate to a profile screen"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<Themed.StatusBar />
</SafeAreaView>
);
}
}
interface MyProfileScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyProfileScreen extends React.Component<MyProfileScreenProps> {
static navigationOptions = {
title: 'Profile',
};
render() {
const { navigation } = this.props;
return (
<SafeAreaView>
<SampleText>{`${navigation.state.params!.name}'s Profile`}</SampleText>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<Themed.StatusBar />
</SafeAreaView>
);
}
}
const StackWithCustomHeaderBackImage = createStackNavigator(
{
Home: {
screen: MyHomeScreen,
},
Photos: {
path: 'photos/:name',
screen: MyPhotosScreen,
},
Profile: {
path: 'profile/:name',
screen: MyProfileScreen,
},
},
{
defaultNavigationOptions: ({ theme }: NavigationScreenConfigProps) => ({
headerBackImage: (
<MyCustomHeaderBackImage
style={[
styles.myCustomHeaderBackImageAlt,
{
tintColor: theme === 'light' ? '#000' : '#fff',
},
]}
/>
),
}),
}
);
export default StackWithCustomHeaderBackImage;
const styles = StyleSheet.create({
myCustomHeaderBackImage: {
height: 14.5,
marginLeft: 9,
marginRight: 12,
marginVertical: 12,
resizeMode: 'contain',
width: 24,
},
myCustomHeaderBackImageAlt: {},
});

118
example/src/StackWithHeaderPreset.tsx Normal file
View File

@@ -0,0 +1,118 @@
import * as React from 'react';
import { StatusBar } from 'react-native';
import {
NavigationScreenProp,
NavigationState,
SafeAreaView,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Button } from './commonComponents/ButtonWithMargin';
interface NavScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class HomeScreen extends React.Component<NavScreenProps> {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigation } = this.props;
const { push } = navigation;
return (
<SafeAreaView style={{ paddingTop: 30 }}>
<Button onPress={() => push('Other')} title="Push another screen" />
<Button
onPress={() => push('ScreenWithNoHeader')}
title="Push screen with no header"
/>
<Button onPress={() => navigation.goBack(null)} title="Go Home" />
<StatusBar barStyle="default" />
</SafeAreaView>
);
}
}
class OtherScreen extends React.Component<NavScreenProps> {
static navigationOptions = {
title: 'Your title here',
};
render() {
const { navigation } = this.props;
const { push, pop } = navigation;
return (
<SafeAreaView style={{ paddingTop: 30 }}>
<Button
onPress={() => push('ScreenWithLongTitle')}
title="Push another screen"
/>
<Button
onPress={() => push('ScreenWithNoHeader')}
title="Push screen with no header"
/>
<Button onPress={() => pop()} title="Pop" />
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</SafeAreaView>
);
}
}
class ScreenWithLongTitle extends React.Component<NavScreenProps> {
static navigationOptions = {
title: "Another title that's kind of long",
};
render() {
const { navigation } = this.props;
const { pop } = navigation;
return (
<SafeAreaView style={{ paddingTop: 30 }}>
<Button onPress={() => pop()} title="Pop" />
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</SafeAreaView>
);
}
}
class ScreenWithNoHeader extends React.Component<NavScreenProps> {
static navigationOptions = {
header: null,
title: 'No Header',
};
render() {
const { navigation } = this.props;
const { push, pop } = navigation;
return (
<SafeAreaView style={{ paddingTop: 30 }}>
<Button onPress={() => push('Other')} title="Push another screen" />
<Button onPress={() => pop()} title="Pop" />
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</SafeAreaView>
);
}
}
const StackWithHeaderPreset = createStackNavigator(
{
Home: HomeScreen,
Other: OtherScreen,
ScreenWithLongTitle,
ScreenWithNoHeader,
},
{
headerTransitionPreset: 'uikit',
}
);
export default StackWithHeaderPreset;

255
example/src/StackWithTranslucentHeader.tsx Normal file
View File

@@ -0,0 +1,255 @@
import * as React from 'react';
import { Platform, ScrollView, StyleSheet, View } from 'react-native';
import { BlurView } from 'expo-blur';
import { isIphoneX } from 'react-native-iphone-x-helper';
import {
NavigationEventPayload,
NavigationEventSubscription,
NavigationScreenProp,
NavigationState,
Themed,
SupportedThemes,
} from 'react-navigation';
import {
createStackNavigator,
Header,
HeaderStyleInterpolator,
} from 'react-navigation-stack';
import { Button } from './commonComponents/ButtonWithMargin';
import { HeaderButtons } from './commonComponents/HeaderButtons';
import SampleText from './SampleText';
interface MyNavScreenProps {
navigation: NavigationScreenProp<NavigationState>;
banner: React.ReactNode;
}
class MyNavScreen extends React.Component<MyNavScreenProps> {
render() {
const { navigation, banner } = this.props;
const { push, replace, popToTop, pop } = navigation;
return (
<ScrollView style={{ flex: 1 }} {...this.getHeaderInset()}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => push('Profile', { name: 'Jane' })}
title="Push a profile screen"
/>
<Button
onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
title="Navigate to a photos screen"
/>
<Button
onPress={() => replace('Profile', { name: 'Lucy' })}
title="Replace with profile"
/>
<Button onPress={() => popToTop()} title="Pop to top" />
<Button onPress={() => pop()} title="Pop" />
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<Themed.StatusBar />
</ScrollView>
);
}
// Inset to compensate for navigation bar being transparent.
// And improved abstraction for this will be built in to react-navigation
// at some point.
getHeaderInset(): any {
const NOTCH_HEIGHT = isIphoneX() ? 25 : 0;
// $FlowIgnore: we will remove the HEIGHT static soon enough
const BASE_HEADER_HEIGHT = Header.HEIGHT;
const HEADER_HEIGHT =
Platform.OS === 'ios'
? BASE_HEADER_HEIGHT + NOTCH_HEIGHT
: BASE_HEADER_HEIGHT + 20;
return Platform.select({
android: {
contentContainerStyle: {
paddingTop: HEADER_HEIGHT,
},
},
ios: {
contentInset: { top: HEADER_HEIGHT },
contentOffset: { y: -HEADER_HEIGHT },
},
});
}
}
interface MyHomeScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyHomeScreen extends React.Component<MyHomeScreenProps> {
static navigationOptions = {
title: 'Welcome',
};
s0: NavigationEventSubscription | null = null;
s1: NavigationEventSubscription | null = null;
s2: NavigationEventSubscription | null = null;
s3: NavigationEventSubscription | null = null;
componentDidMount() {
this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
}
componentWillUnmount() {
this.s0!.remove();
this.s1!.remove();
this.s2!.remove();
this.s3!.remove();
}
onWF = (a: NavigationEventPayload) => {
console.log('willFocus HomeScreen', a);
};
onDF = (a: NavigationEventPayload) => {
console.log('didFocus HomeScreen', a);
};
onWB = (a: NavigationEventPayload) => {
console.log('willBlur HomeScreen', a);
};
onDB = (a: NavigationEventPayload) => {
console.log('didBlur HomeScreen', a);
};
render() {
const { navigation } = this.props;
return <MyNavScreen banner="Home Screen" navigation={navigation} />;
}
}
interface MyPhotosScreenProps {
navigation: NavigationScreenProp<NavigationState>;
}
class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
static navigationOptions = {
title: 'Photos',
};
s0: NavigationEventSubscription | null = null;
s1: NavigationEventSubscription | null = null;
s2: NavigationEventSubscription | null = null;
s3: NavigationEventSubscription | null = null;
componentDidMount() {
this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
}
componentWillUnmount() {
this.s0!.remove();
this.s1!.remove();
this.s2!.remove();
this.s3!.remove();
}
onWF = (a: NavigationEventPayload) => {
console.log('willFocus PhotosScreen', a);
};
onDF = (a: NavigationEventPayload) => {
console.log('didFocus PhotosScreen', a);
};
onWB = (a: NavigationEventPayload) => {
console.log('willBlur PhotosScreen', a);
};
onDB = (a: NavigationEventPayload) => {
console.log('didBlur PhotosScreen', a);
};
render() {
const { navigation } = this.props;
return (
<MyNavScreen
banner={`${navigation.state.params!.name}'s Photos`}
navigation={navigation}
/>
);
}
}
const MyProfileScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner={`${navigation.state.params!.mode === 'edit' ? 'Now Editing ' : ''}${
navigation.state.params!.name
}'s Profile`}
navigation={navigation}
/>
);
MyProfileScreen.navigationOptions = (props: {
navigation: NavigationScreenProp<NavigationState>;
theme: SupportedThemes;
}) => {
const { navigation, theme } = props;
const { state, setParams } = navigation;
const { params } = state;
return {
headerBackImage: params!.headerBackImage,
// Render a button on the right side of the header.
// When pressed switches the screen to edit mode.
headerRight: (
<HeaderButtons>
<HeaderButtons.Item
color={theme === 'light' ? '#000' : '#fff'}
title={params!.mode === 'edit' ? 'Done' : 'Edit'}
onPress={() =>
setParams({ mode: params!.mode === 'edit' ? '' : 'edit' })
}
/>
</HeaderButtons>
),
headerTitle: `${params!.name}'s Profile!`,
};
};
const StackWithTranslucentHeader = createStackNavigator(
{
Home: {
screen: MyHomeScreen,
},
Photos: {
path: 'photos/:name',
screen: MyPhotosScreen,
},
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
},
},
{
defaultNavigationOptions: ({ theme }) => ({
headerBackground:
Platform.OS === 'ios' ? (
<BlurView
style={{ flex: 1 }}
blurType={theme === 'light' ? 'light' : 'dark'}
/>
) : (
<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
),
headerStyle: {
borderBottomColor: theme === 'light' ? '#A7A7AA' : 'transparent',
borderBottomWidth: StyleSheet.hairlineWidth,
},
headerTransparent: true,
}),
headerTransitionPreset: 'uikit',
// You can leave this out if you don't want the card shadow to
// be visible through the header
transitionConfig: () => ({
headerBackgroundInterpolator:
HeaderStyleInterpolator.forBackgroundWithTranslation,
}),
}
);
export default StackWithTranslucentHeader;

107
example/src/StacksAndKeys.tsx Normal file
View File

@@ -0,0 +1,107 @@
import React from 'react';
import { StatusBar, Text, View } from 'react-native';
import { NavigationScreenProp, NavigationState } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Button } from './commonComponents/ButtonWithMargin';
interface Props {
navigation: NavigationScreenProp<NavigationState & any>;
}
class HomeScreen extends React.Component<Props, any> {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home</Text>
<Button
title="Navigate to 'Profile' with key 'A'"
onPress={() =>
this.props.navigation.navigate({
key: 'A',
params: { homeKey: this.props.navigation.state.key },
routeName: 'Profile',
})
}
/>
<Button
title="Go back to other examples"
onPress={() => this.props.navigation.goBack(null)}
/>
<StatusBar barStyle="default" />
</View>
);
}
}
class ProfileScreen extends React.Component<any, any> {
render() {
const { homeKey } = this.props.navigation.state.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Profile</Text>
<Button
title="Navigate to 'Settings' with key 'B'"
onPress={() =>
this.props.navigation.navigate({
key: 'B',
params: { homeKey },
routeName: 'Settings',
})
}
/>
<Button
title={`Navigate back to 'Home' with key ${homeKey}`}
onPress={() =>
this.props.navigation.navigate({ routeName: 'Home', key: homeKey })
}
/>
</View>
);
}
}
class SettingsScreen extends React.Component<Props, any> {
render() {
const { homeKey } = this.props.navigation.state.params!;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Settings</Text>
<Button
title={`Navigate back to 'Home' with key ${homeKey}`}
onPress={() =>
this.props.navigation.navigate({ routeName: 'Home', key: homeKey })
}
/>
<Button
title="Navigate back to 'Profile' with key 'A'"
onPress={() =>
this.props.navigation.navigate({
key: 'A',
routeName: 'Profile',
})
}
/>
</View>
);
}
}
const Stack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Profile: {
screen: ProfileScreen,
},
Settings: {
screen: SettingsScreen,
},
},
{
headerMode: 'none',
}
);
export default Stack;

162
example/src/StacksInTabs.tsx Normal file
View File

@@ -0,0 +1,162 @@
import React from 'react';
import { StatusBar, Text } from 'react-native';
import {
NavigationScreenProp,
NavigationState,
SafeAreaView,
ScrollView,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '@expo/vector-icons';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
Praesent lobortis elit sit amet mauris pulvinar, viverra condimentum massa pellentesque. Curabitur massa ex, dignissim eget neque at, fringilla consectetur justo. Cras sollicitudin vel ligula sed cursus. Aliquam porta sem hendrerit diam porta ultricies. Sed eu mi erat. Curabitur id justo vel tortor hendrerit vestibulum id eget est. Morbi eros magna, placerat id diam ut, varius sollicitudin mi. Curabitur pretium finibus accumsan.`;
interface Props {
navigation: NavigationScreenProp<NavigationState>;
banner: string;
}
class MyNavScreen extends React.Component<Props> {
render() {
const { navigation } = this.props;
const banner = navigation.getParam('banner');
return (
<ScrollView style={{ flex: 1 }}>
<SafeAreaView forceInset={{ horizontal: 'always' }}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
title="Open profile screen"
/>
<Button
onPress={() => navigation.navigate('NotifSettings')}
title="Open notifications screen"
/>
<Button
onPress={() => navigation.navigate('SettingsTab')}
title="Go to settings tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
{TEXT.split('\n').map((p, n) => (
<Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
{p}
</Text>
))}
</SafeAreaView>
<StatusBar barStyle="default" />
</ScrollView>
);
}
}
const MyProfileScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner={`${navigation.state.params!.name}s Profile`}
navigation={navigation}
/>
);
const MainTab = createStackNavigator({
Home: {
navigationOptions: {
title: 'Welcome',
},
params: { banner: 'Home Screen' },
path: '/',
screen: MyNavScreen,
},
Profile: {
navigationOptions: ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => ({
title: `${navigation.state.params!.name}'s Profile!`,
}),
path: '/people/:name',
screen: MyProfileScreen,
},
});
const SettingsTab = createStackNavigator({
NotifSettings: {
navigationOptions: {
title: 'Notifications',
},
params: { banner: 'Notifications Screen' },
screen: MyNavScreen,
},
Settings: {
navigationOptions: () => ({
title: 'Settings',
}),
params: { banner: 'Settings Screen' },
path: '/',
screen: MyNavScreen,
},
});
const StacksInTabs = createBottomTabNavigator(
{
MainTab: {
navigationOptions: {
tabBarIcon: ({
tintColor,
focused,
}: {
tintColor: string;
focused: boolean;
}) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home'}
size={26}
style={{ color: tintColor }}
/>
),
tabBarLabel: 'Home',
},
path: '/',
screen: MainTab,
},
SettingsTab: {
screen: SettingsTab,
path: '/settings',
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({
tintColor,
focused,
}: {
tintColor: string;
focused: boolean;
}) => (
<Ionicons
name={focused ? 'ios-settings' : 'ios-settings'}
size={26}
style={{ color: tintColor }}
/>
),
},
},
},
{
tabBarOptions: {
showLabel: false,
},
}
);
export default StacksInTabs;

159
example/src/StacksOverTabs.tsx Normal file
View File

@@ -0,0 +1,159 @@
import React from 'react';
import { ScrollView, StatusBar } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import {
getActiveChildNavigationOptions,
NavigationScreenProp,
NavigationState,
SafeAreaView,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const MyNavScreen = ({
navigation,
banner,
}: {
navigation: NavigationScreenProp<NavigationState>;
banner: string;
}) => (
<ScrollView>
<SafeAreaView forceInset={{ horizontal: 'always', vertical: 'never' }}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
title="Open profile screen"
/>
<Button
onPress={() => navigation.navigate('NotifSettings')}
title="Open notifications screen"
/>
<Button
onPress={() => navigation.navigate('SettingsTab')}
title="Go to settings tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
<StatusBar barStyle="default" />
</ScrollView>
);
const MyHomeScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Home Screen" navigation={navigation} />;
const MyProfileScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner={`${navigation.state.params!.name}s Profile`}
navigation={navigation}
/>
);
const MyNotificationsSettingsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
const MySettingsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Settings Screen" navigation={navigation} />;
const TabNav = createBottomTabNavigator(
{
MainTab: {
navigationOptions: {
tabBarIcon: ({
tintColor,
focused,
}: {
tintColor: string;
focused: boolean;
}) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home'}
size={26}
style={{ color: tintColor }}
/>
),
tabBarLabel: 'Home',
title: 'Welcome',
},
path: '/',
screen: MyHomeScreen,
},
SettingsTab: {
navigationOptions: {
tabBarIcon: ({
tintColor,
focused,
}: {
tintColor: string;
focused: boolean;
}) => (
<Ionicons
name={focused ? 'ios-settings' : 'ios-settings'}
size={26}
style={{ color: tintColor }}
/>
),
title: 'Settings',
},
path: '/settings',
screen: MySettingsScreen,
},
},
{
animationEnabled: false,
swipeEnabled: false,
tabBarPosition: 'bottom',
}
);
TabNav.navigationOptions = ({
navigation,
screenProps,
}: {
navigation: NavigationScreenProp<NavigationState>;
screenProps: { [key: string]: any };
}) => {
const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
return {
title: childOptions.title,
};
};
const StacksOverTabs = createStackNavigator({
NotifSettings: {
navigationOptions: {
title: 'Notifications',
},
screen: MyNotificationsSettingsScreen,
},
Profile: {
navigationOptions: ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => ({
title: `${navigation.state.params!.name}'s Profile!`,
}),
path: '/people/:name',
screen: MyProfileScreen,
},
Root: {
screen: TabNav,
},
});
export default StacksOverTabs;

178
example/src/StacksOverTopTabs.tsx Normal file
View File

@@ -0,0 +1,178 @@
import React from 'react';
import {
ScrollView,
StatusBar,
StatusBarStyle,
StyleSheet,
View,
} from 'react-native';
import {
NavigationScreenProp,
NavigationState,
SafeAreaView,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {
createMaterialTopTabNavigator,
MaterialTopTabBar,
} from 'react-navigation-tabs';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const HEADER_HEIGHT = 64;
const MyNavScreen = ({
navigation,
banner,
statusBarStyle,
}: {
navigation: NavigationScreenProp<NavigationState>;
banner: string;
statusBarStyle?: StatusBarStyle;
}) => (
<ScrollView>
<SafeAreaView forceInset={{ horizontal: 'always' }}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
title="Open profile screen"
/>
<Button
onPress={() => navigation.navigate('NotifSettings')}
title="Open notifications screen"
/>
<Button
onPress={() => navigation.navigate('SettingsTab')}
title="Go to settings tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
<StatusBar barStyle={statusBarStyle || 'default'} />
</ScrollView>
);
const MyHomeScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner="Home Screen"
navigation={navigation}
statusBarStyle="light-content"
/>
);
const MyProfileScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner={`${navigation.state.params!.name}s Profile`}
navigation={navigation}
/>
);
const MyNotificationsSettingsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
const MySettingsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => (
<MyNavScreen
banner="Settings Screen"
navigation={navigation}
statusBarStyle="light-content"
/>
);
const styles = StyleSheet.create({
stackHeader: {
height: HEADER_HEIGHT,
},
tab: {
height: HEADER_HEIGHT,
},
});
function MaterialTopTabBarWithStatusBar(props: any) {
return (
<View
style={{
paddingTop: 20,
backgroundColor: '#2196f3',
}}
>
<MaterialTopTabBar
{...props}
jumpToIndex={() => {
//
}}
/>
</View>
);
}
const TabNavigator = createMaterialTopTabNavigator(
{
MainTab: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Welcome',
},
},
SettingsTab: {
screen: MySettingsScreen,
navigationOptions: {
title: 'Settings',
},
},
},
{
tabBarComponent: MaterialTopTabBarWithStatusBar,
tabBarOptions: {
tabStyle: styles.tab,
},
}
);
const StackNavigator = createStackNavigator(
{
Root: {
screen: TabNavigator,
navigationOptions: {
header: null,
},
},
NotifSettings: {
screen: MyNotificationsSettingsScreen,
navigationOptions: {
title: 'Notifications',
},
},
Profile: {
screen: MyProfileScreen,
navigationOptions: ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => ({
title: `${navigation.state.params!.name}'s Profile!`,
}),
},
},
{
defaultNavigationOptions: {
headerStyle: styles.stackHeader,
},
}
);
export default StackNavigator;

129
example/src/SwitchWithStacks.tsx Normal file
View File

@@ -0,0 +1,129 @@
import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
StatusBar,
StyleSheet,
View,
Platform,
} from 'react-native';
import { createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Button } from './commonComponents/ButtonWithMargin';
class SignInScreen extends React.Component<any, any> {
static navigationOptions = {
title: 'Please sign in',
};
render() {
return (
<View style={styles.container}>
<Button title="Sign in!" onPress={this.signInAsync} />
<Button
title="Go back to other examples"
onPress={() => this.props.navigation.goBack(null)}
/>
<StatusBar barStyle="default" />
</View>
);
}
signInAsync = async () => {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate('Home');
};
}
class HomeScreen extends React.Component<any, any> {
static navigationOptions = {
title: 'Welcome to the app!',
};
render() {
return (
<View style={styles.container}>
<Button title="Show me more of the app" onPress={this.showMoreApp} />
<Button title="Actually, sign me out :)" onPress={this.signOutAsync} />
<StatusBar barStyle="default" />
</View>
);
}
showMoreApp = () => {
this.props.navigation.navigate('Other');
};
signOutAsync = async () => {
if (Platform.OS === 'ios') {
await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
} else {
await AsyncStorage.clear();
}
this.props.navigation.navigate('Auth');
};
}
class OtherScreen extends React.Component<any, any> {
static navigationOptions = {
title: 'Lots of features here',
};
render() {
return (
<View style={styles.container}>
<Button title="I'm done, sign me out" onPress={this.signOutAsync} />
<StatusBar barStyle="default" />
</View>
);
}
signOutAsync = async () => {
if (Platform.OS === 'ios') {
await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
} else {
await AsyncStorage.clear();
}
this.props.navigation.navigate('Auth');
};
}
class LoadingScreen extends React.Component<any, any> {
componentDidMount() {
this.bootstrapAsync();
}
bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('userToken');
const initialRouteName = userToken ? 'App' : 'Auth';
this.props.navigation.navigate(initialRouteName);
};
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
});
const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });
export default createSwitchNavigator({
App: AppStack,
Auth: AuthStack,
Loading: LoadingScreen,
});

28
example/src/TabsInDrawer.tsx Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { MaterialIcons } from '@expo/vector-icons';
import { createDrawerNavigator } from 'react-navigation-drawer';
import SimpleTabs from './SimpleTabs';
import StacksOverTabs from './StacksOverTabs';
const TabsInDrawer = createDrawerNavigator({
SimpleTabs: {
navigationOptions: {
drawerIcon: ({ tintColor }: { tintColor: string }) => (
<MaterialIcons name="filter-1" size={24} style={{ color: tintColor }} />
),
drawerLabel: 'Simple tabs',
},
screen: SimpleTabs,
},
StacksOverTabs: {
navigationOptions: {
drawerIcon: ({ tintColor }: { tintColor: string }) => (
<MaterialIcons name="filter-2" size={24} style={{ color: tintColor }} />
),
drawerLabel: 'Stacks Over Tabs',
},
screen: StacksOverTabs,
},
});
export default TabsInDrawer;

BIN
example/src/assets/NavLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
example/src/assets/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 B

BIN
example/src/assets/dog-back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
example/src/assets/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
example/src/assets/splash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

156
example/src/commonComponents/Button.tsx Normal file
View File

@@ -0,0 +1,156 @@
import React from 'react';
import {
AccessibilityStates,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
export interface ButtonProps {
/**
* Text to display inside the button
*/
title: string;
/**
* Handler to be called when the user taps the button
*/
onPress: (event?: any) => void;
/**
* Color of the text (iOS), or background color of the button (Android)
*/
color?: string;
/**
* TV preferred focus (see documentation for the View component).
*/
hasTVPreferredFocus?: boolean;
/**
* Text to display for blindness accessibility features
*/
accessibilityLabel?: string;
/**
* If true, disable all interactions for this component.
*/
disabled?: boolean;
/**
* Used to locate this view in end-to-end tests.
*/
testID?: string;
}
/**
* A basic button component that should render nicely on any platform. Supports
* a minimal level of customization.
*
* <center><img src="img/buttonExample.png"></img></center>
*
* This button is built using TouchableOpacity
*
* Example usage:
*
* ```
* import { Button } from 'react-native';
* ...
*
* <Button
* onPress={onPressLearnMore}
* title="Learn More"
* color="#841584"
* accessibilityLabel="Learn more about this purple button"
* />
* ```
*
*/
export default class Button extends React.Component<ButtonProps> {
render() {
const {
accessibilityLabel,
color,
onPress,
title,
disabled,
testID,
} = this.props;
const buttonStyles: any = [styles.button];
const textStyles: any = [styles.text];
if (color) {
if (Platform.OS === 'ios') {
textStyles.push({ color });
} else {
buttonStyles.push({ backgroundColor: color });
}
}
const accessibilityStates: AccessibilityStates[] = [];
if (disabled) {
buttonStyles.push(styles.buttonDisabled);
textStyles.push(styles.textDisabled);
accessibilityStates.push('disabled');
}
const formattedTitle =
Platform.OS === 'android' ? title.toUpperCase() : title;
return (
<TouchableOpacity
accessibilityLabel={accessibilityLabel}
accessibilityRole="button"
accessibilityStates={accessibilityStates}
testID={testID}
disabled={disabled}
onPress={onPress}
>
<View style={buttonStyles}>
<Text style={textStyles}>{formattedTitle}</Text>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
button: Platform.select({
android: {
backgroundColor: '#2196F3',
borderRadius: 2,
elevation: 4,
// Material design blue from https://material.google.com/style/color.html#color-color-palette
},
ios: {},
}),
buttonDisabled: Platform.select({
android: {
backgroundColor: '#dfdfdf',
elevation: 0,
},
ios: {},
}),
text: {
padding: 8,
textAlign: 'center',
...Platform.select({
android: {
color: 'white',
fontWeight: '500',
},
ios: {
// iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
color: '#007AFF',
fontSize: 18,
},
}),
},
textDisabled: Platform.select({
android: {
color: '#a1a1a1',
},
ios: {
color: '#cdcdcd',
},
}),
});

19
example/src/commonComponents/ButtonWithMargin.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import BaseButton, { ButtonProps } from './Button';
export const Button = (props: ButtonProps) => (
<View style={styles.margin}>
<BaseButton {...props} />
</View>
);
const styles = StyleSheet.create({
margin: {
...Platform.select({
android: {
margin: 10,
},
}),
},
});

18
example/src/commonComponents/HeaderButtons.tsx Normal file
View File

@@ -0,0 +1,18 @@
import * as React from 'react';
import {
HeaderButtons as DefaultHeaderButtons,
Item,
} from 'react-navigation-header-buttons';
export class HeaderButtons extends React.PureComponent {
static Item = Item;
render() {
return (
<DefaultHeaderButtons
// color={Platform.OS === 'ios' ? '#037aff' : 'black'}
{...this.props}
/>
);
}
}

5957
example/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff