diff --git a/example/.eslintrc b/example/.eslintrc
index 44dea7d2f..aad8193ee 100644
--- a/example/.eslintrc
+++ b/example/.eslintrc
@@ -5,8 +5,10 @@
{
'import/core-modules':
[
+ 'expo-asset',
'react-navigation-stack',
'react-native-gesture-handler',
+ 'react-native-reanimated',
'react-native-vector-icons',
],
},
diff --git a/example/App.js b/example/App.js
index 80d4dee96..3b9c91791 100644
--- a/example/App.js
+++ b/example/App.js
@@ -14,9 +14,11 @@ import { List, Divider } from 'react-native-paper';
import FullScreen from './src/FullScreen';
import SimpleStack from './src/SimpleStack';
+import WipeStack from './src/WipeStack';
import ImageStack from './src/ImageStack';
import TransparentStack from './src/TransparentStack';
import ModalStack from './src/ModalStack';
+import ModalPresentation from './src/ModalPresentation';
import LifecycleInteraction from './src/LifecycleInteraction';
import GestureInteraction from './src/GestureInteraction';
import SwitchWithStacks from './src/SwitchWithStacks';
@@ -24,22 +26,29 @@ import StackWithDrawer from './src/StackWithDrawer';
import HeaderPreset from './src/HeaderPreset';
import {
HeaderBackgroundDefault,
- HeaderBackgroundTranslate,
HeaderBackgroundFade,
} from './src/HeaderBackgrounds';
// Comment the following two lines to stop using react-native-screens
import { useScreens } from 'react-native-screens';
-// Uncomment the following line to force RTL. Requires closing and re-opening
+useScreens(true);
+
+// Change `false` to `true` to force RTL. Requires closing and re-opening
// your app after you first load it with this option enabled.
I18nManager.forceRTL(false);
const data = [
{ component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
{ component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' },
+ { component: WipeStack, title: 'Wipe Preset', routeName: 'Wipe' },
{ component: ImageStack, title: 'Image', routeName: 'ImageStack' },
{ component: ModalStack, title: 'Modal', routeName: 'ModalStack' },
+ {
+ component: ModalPresentation,
+ title: 'Modal (iOS style)',
+ routeName: 'ModalPresentation',
+ },
{ component: FullScreen, title: 'Full Screen', routeName: 'FullScreen' },
{
component: LifecycleInteraction,
@@ -68,7 +77,7 @@ const data = [
},
{
component: HeaderBackgroundDefault,
- title: 'Header background (default transition)',
+ title: 'Header background (UIKit transition)',
routeName: 'HeaderBackgroundDefault',
},
{
@@ -76,11 +85,6 @@ const data = [
title: 'Header background (fade transition)',
routeName: 'HeaderBackgroundFade',
},
- {
- component: HeaderBackgroundTranslate,
- title: 'Header background (translate transition)',
- routeName: 'HeaderBackgroundTranslate',
- },
];
// Cache images
@@ -145,7 +149,6 @@ const Root = createStackNavigator(
}
);
-useScreens();
export default createAppContainer(Root);
// Uncomment this to test immediate transitions
diff --git a/example/package.json b/example/package.json
index 116aafbad..fca131e81 100644
--- a/example/package.json
+++ b/example/package.json
@@ -9,19 +9,23 @@
"ios": "expo start --ios"
},
"dependencies": {
- "@react-navigation/core": "3.4.1",
+ "@react-navigation/core": "3.4.2",
"@react-navigation/native": "^3.4.1",
- "expo": "^33.0.0",
+ "expo": "^33.0.7",
"expo-asset": "^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-paper": "^2.15.2",
- "react-navigation-drawer": "^1.2.1",
- "react-navigation-tabs": "*"
+ "react-navigation-drawer": "^2.0.0",
+ "react-navigation-tabs": "2.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"
}
}
diff --git a/example/src/HeaderBackgrounds.js b/example/src/HeaderBackgrounds.js
index f77e06e67..b75cda291 100644
--- a/example/src/HeaderBackgrounds.js
+++ b/example/src/HeaderBackgrounds.js
@@ -1,6 +1,10 @@
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+ createStackNavigator,
+ TransitionPresets,
+ HeaderStyleInterpolators,
+} from 'react-navigation-stack';
function createHeaderBackgroundExample(options = {}) {
return createStackNavigator(
@@ -19,7 +23,7 @@ function createHeaderBackgroundExample(options = {}) {
navigationOptions: {
headerTitle: 'Login Screen',
headerTintColor: '#fff',
- headerBackground: (
+ headerBackground: () => (
),
},
@@ -38,7 +42,7 @@ function createHeaderBackgroundExample(options = {}) {
navigationOptions: {
headerTitle: 'Games Screen',
headerTintColor: '#fff',
- headerBackground: (
+ headerBackground: () => (
),
},
@@ -89,12 +93,20 @@ function createHeaderBackgroundExample(options = {}) {
}
);
}
-export const HeaderBackgroundDefault = createHeaderBackgroundExample();
-export const HeaderBackgroundTranslate = createHeaderBackgroundExample({
- headerBackgroundTransitionPreset: 'translate',
+export const HeaderBackgroundDefault = createHeaderBackgroundExample({
+ defaultNavigationOptions: {
+ ...TransitionPresets.SlideFromRightIOS,
+ headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+ },
+ headerMode: 'float',
});
+
export const HeaderBackgroundFade = createHeaderBackgroundExample({
- headerBackgroundTransitionPreset: 'fade',
+ defaultNavigationOptions: {
+ ...TransitionPresets.SlideFromRightIOS,
+ headerStyleInterpolator: HeaderStyleInterpolators.forFade,
+ },
+ headerMode: 'float',
});
const styles = StyleSheet.create({
diff --git a/example/src/HeaderPreset.js b/example/src/HeaderPreset.js
index 4884993ba..11755d6da 100644
--- a/example/src/HeaderPreset.js
+++ b/example/src/HeaderPreset.js
@@ -1,7 +1,11 @@
import * as React from 'react';
import { Button, StatusBar } from 'react-native';
import { SafeAreaView } from '@react-navigation/native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+ createStackNavigator,
+ TransitionPresets,
+ HeaderStyleInterpolators,
+} from 'react-navigation-stack';
class HomeScreen extends React.Component {
static navigationOptions = {
@@ -101,7 +105,13 @@ const StackWithHeaderPreset = createStackNavigator(
ScreenWithLongTitle: ScreenWithLongTitle,
},
{
- headerTransitionPreset: 'uikit',
+ headerMode: 'float',
+ defaultNavigationOptions: {
+ ...TransitionPresets.SlideFromRightIOS,
+ headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+ headerTitleContainerStyle: { left: null },
+ gesturesEnabled: true,
+ },
}
);
diff --git a/example/src/ImageStack.js b/example/src/ImageStack.js
index 235f03549..f7e9fc3c3 100644
--- a/example/src/ImageStack.js
+++ b/example/src/ImageStack.js
@@ -7,7 +7,7 @@ class ListScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Image list',
headerBackTitle: 'Back',
- headerLeft: (
+ headerLeft: () => (