mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-01 22:42:48 +08:00
Compare commits
9 Commits
react-navi
...
react-navi
| Author | SHA1 | Date | |
|---|---|---|---|
|
1a6f4a581f | ||
|
|
2e7f4a6d10 | ||
|
|
6515fbe2dc | ||
|
|
454e05b02e | ||
|
|
442ca3e700 | ||
|
|
e00c63e32b | ||
|
|
ba6d7dcbed | ||
|
|
2ca8c34b2d | ||
|
|
03f9f8cd8e |
@@ -346,6 +346,7 @@ class MainScreen extends React.Component<any, State> {
|
|||||||
if (route.screen || route.path || route.params) {
|
if (route.screen || route.path || route.params) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const { path, params, screen } = route;
|
const { path, params, screen } = route;
|
||||||
|
// @ts-ignore
|
||||||
const { router } = screen;
|
const { router } = screen;
|
||||||
const action =
|
const action =
|
||||||
path &&
|
path &&
|
||||||
@@ -386,6 +387,7 @@ class MainScreen extends React.Component<any, State> {
|
|||||||
|
|
||||||
const Navigation = createAppContainer(
|
const Navigation = createAppContainer(
|
||||||
createStackNavigator(
|
createStackNavigator(
|
||||||
|
// @ts-ignore
|
||||||
{
|
{
|
||||||
...ExampleInfo,
|
...ExampleInfo,
|
||||||
Index: {
|
Index: {
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ class ListScreen extends React.Component {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
backgroundColor: '#fff',
|
// backgroundColor: '#fff',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text>List Screen</Text>
|
<Text>List Screen</Text>
|
||||||
@@ -96,7 +96,7 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
backgroundColor: '#fff',
|
// backgroundColor: '#fff',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text>Details Screen</Text>
|
<Text>Details Screen</Text>
|
||||||
@@ -119,7 +119,7 @@ class HeaderlessScreen extends React.Component {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
backgroundColor: '#fff',
|
// backgroundColor: '#fff',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text>Headerless Screen</Text>
|
<Text>Headerless Screen</Text>
|
||||||
|
|||||||
@@ -91,8 +91,4 @@ const DrawerExample = createDrawerNavigator(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
DrawerExample.navigationOptions = {
|
|
||||||
headerShown: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DrawerExample;
|
export default DrawerExample;
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
"jest": "^25.1.0",
|
"jest": "^25.1.0",
|
||||||
"lerna": "^3.20.2",
|
"lerna": "^3.20.2",
|
||||||
"prettier": "^2.0.5",
|
"prettier": "^2.0.5",
|
||||||
"typescript": "~3.8.3"
|
"typescript": "^3.9.5"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"react": "~16.9.0",
|
"react": "~16.9.0",
|
||||||
|
|||||||
@@ -3,6 +3,17 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [0.6.0](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.12...react-navigation-animated-switch@0.6.0) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## [0.5.12](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.11...react-navigation-animated-switch@0.5.12) (2020-04-30)
|
## [0.5.12](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.11...react-navigation-animated-switch@0.5.12) (2020-04-30)
|
||||||
|
|
||||||
**Note:** Version bump only for package react-navigation-animated-switch
|
**Note:** Version bump only for package react-navigation-animated-switch
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-navigation-animated-switch",
|
"name": "react-navigation-animated-switch",
|
||||||
"version": "0.5.12",
|
"version": "0.6.0",
|
||||||
"description": "Animated switch for React Navigation",
|
"description": "Animated switch for React Navigation",
|
||||||
"main": "lib/commonjs/index.js",
|
"main": "lib/commonjs/index.js",
|
||||||
"react-native": "lib/module/index.js",
|
"react-native": "lib/module/index.js",
|
||||||
@@ -28,8 +28,8 @@
|
|||||||
"react": "~16.9.0",
|
"react": "~16.9.0",
|
||||||
"react-native": "~0.61.5",
|
"react-native": "~0.61.5",
|
||||||
"react-native-reanimated": "~1.7.0",
|
"react-native-reanimated": "~1.7.0",
|
||||||
"react-navigation": "^4.3.9",
|
"react-navigation": "^4.4.0",
|
||||||
"typescript": "~3.8.3"
|
"typescript": "^3.9.5"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "*",
|
"react": "*",
|
||||||
|
|||||||
@@ -3,6 +3,17 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [2.5.0](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.13...react-navigation-drawer@2.5.0) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/drawer/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## [2.4.13](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.12...react-navigation-drawer@2.4.13) (2020-04-30)
|
## [2.4.13](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.12...react-navigation-drawer@2.4.13) (2020-04-30)
|
||||||
|
|
||||||
**Note:** Version bump only for package react-navigation-drawer
|
**Note:** Version bump only for package react-navigation-drawer
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-navigation-drawer",
|
"name": "react-navigation-drawer",
|
||||||
"version": "2.4.13",
|
"version": "2.5.0",
|
||||||
"description": "Drawer navigator component for React Navigation",
|
"description": "Drawer navigator component for React Navigation",
|
||||||
"main": "lib/commonjs/index.js",
|
"main": "lib/commonjs/index.js",
|
||||||
"react-native": "lib/module/index.js",
|
"react-native": "lib/module/index.js",
|
||||||
@@ -49,8 +49,8 @@
|
|||||||
"react-native-reanimated": "^1.2.0",
|
"react-native-reanimated": "^1.2.0",
|
||||||
"react-native-screens": "^2.3.0",
|
"react-native-screens": "^2.3.0",
|
||||||
"react-native-testing-library": "^1.12.0",
|
"react-native-testing-library": "^1.12.0",
|
||||||
"react-navigation": "^4.3.9",
|
"react-navigation": "^4.4.0",
|
||||||
"typescript": "~3.8.3"
|
"typescript": "^3.9.5"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "*",
|
"react": "*",
|
||||||
|
|||||||
@@ -75,8 +75,11 @@ const DrawerNavigator = (
|
|||||||
const drawerRouter = DrawerRouter(routeConfigs, mergedConfig);
|
const drawerRouter = DrawerRouter(routeConfigs, mergedConfig);
|
||||||
|
|
||||||
// TODO: don't have time to fix it right now
|
// TODO: don't have time to fix it right now
|
||||||
// @ts-ignore
|
const navigator = createNavigator(
|
||||||
const navigator = createNavigator(DrawerView, drawerRouter, mergedConfig);
|
DrawerView as any,
|
||||||
|
drawerRouter,
|
||||||
|
mergedConfig
|
||||||
|
);
|
||||||
return navigator;
|
return navigator;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -160,10 +160,6 @@ export default class DrawerView extends React.PureComponent<Props, State> {
|
|||||||
drawerOpenProgress={progress}
|
drawerOpenProgress={progress}
|
||||||
navigation={this.props.navigation}
|
navigation={this.props.navigation}
|
||||||
descriptors={this.props.descriptors}
|
descriptors={this.props.descriptors}
|
||||||
contentComponent={this.props.navigationConfig.contentComponent}
|
|
||||||
contentOptions={this.props.navigationConfig.contentOptions}
|
|
||||||
drawerPosition={this.props.navigationConfig.drawerPosition}
|
|
||||||
style={this.props.navigationConfig.style}
|
|
||||||
{...this.props.navigationConfig}
|
{...this.props.navigationConfig}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,6 +3,17 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [2.3.0](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.12...react-navigation-material-bottom-tabs@2.3.0) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation-material-bottom-tabs/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## [2.2.12](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.11...react-navigation-material-bottom-tabs@2.2.12) (2020-04-30)
|
## [2.2.12](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.11...react-navigation-material-bottom-tabs@2.2.12) (2020-04-30)
|
||||||
|
|
||||||
**Note:** Version bump only for package react-navigation-material-bottom-tabs
|
**Note:** Version bump only for package react-navigation-material-bottom-tabs
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-navigation-material-bottom-tabs",
|
"name": "react-navigation-material-bottom-tabs",
|
||||||
"version": "2.2.12",
|
"version": "2.3.0",
|
||||||
"description": "Material Bottom Tab Navigation component for React Navigation",
|
"description": "Material Bottom Tab Navigation component for React Navigation",
|
||||||
"main": "lib/commonjs/index.js",
|
"main": "lib/commonjs/index.js",
|
||||||
"module": "lib/module/index.js",
|
"module": "lib/module/index.js",
|
||||||
@@ -48,8 +48,8 @@
|
|||||||
"react-native-gesture-handler": "^1.6.0",
|
"react-native-gesture-handler": "^1.6.0",
|
||||||
"react-native-paper": "^3.1.1",
|
"react-native-paper": "^3.1.1",
|
||||||
"react-native-reanimated": "^1.2.0",
|
"react-native-reanimated": "^1.2.0",
|
||||||
"react-navigation": "^4.3.9",
|
"react-navigation": "^4.4.0",
|
||||||
"typescript": "~3.8.3"
|
"typescript": "^3.9.5"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "*",
|
"react": "*",
|
||||||
|
|||||||
@@ -3,6 +3,22 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [3.8.0](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.13...@react-navigation/native@3.8.0) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* improve error message when installing wrong version ([442ca3e](https://github.com/react-navigation/react-navigation-native/commit/442ca3e700c5805cdc5cd02c68f49042887a5054))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation-native/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## [3.7.13](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.12...@react-navigation/native@3.7.13) (2020-04-30)
|
## [3.7.13](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.12...@react-navigation/native@3.7.13) (2020-04-30)
|
||||||
|
|
||||||
**Note:** Version bump only for package @react-navigation/native
|
**Note:** Version bump only for package @react-navigation/native
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@react-navigation/native",
|
"name": "@react-navigation/native",
|
||||||
"version": "3.7.13",
|
"version": "3.8.0",
|
||||||
"description": "React Native support for React Navigation",
|
"description": "React Native support for React Navigation",
|
||||||
"main": "lib/commonjs/index.js",
|
"main": "lib/commonjs/index.js",
|
||||||
"react-native": "lib/module/index.js",
|
"react-native": "lib/module/index.js",
|
||||||
|
|||||||
@@ -43,6 +43,24 @@ module.exports = {
|
|||||||
get createNavigationFactory() {
|
get createNavigationFactory() {
|
||||||
return require('./throwIfWrongVersion').default;
|
return require('./throwIfWrongVersion').default;
|
||||||
},
|
},
|
||||||
|
get useNavigationBuilder() {
|
||||||
|
return require('./throwIfWrongVersion').default;
|
||||||
|
},
|
||||||
|
get useNavigation() {
|
||||||
|
return require('./throwIfWrongVersion').default;
|
||||||
|
},
|
||||||
|
get useRoute() {
|
||||||
|
return require('./throwIfWrongVersion').default;
|
||||||
|
},
|
||||||
|
get useFocusEffect() {
|
||||||
|
return require('./throwIfWrongVersion').default;
|
||||||
|
},
|
||||||
|
get useIsFocused() {
|
||||||
|
return require('./throwIfWrongVersion').default;
|
||||||
|
},
|
||||||
|
get useNavigationState() {
|
||||||
|
return require('./throwIfWrongVersion').default;
|
||||||
|
},
|
||||||
get NavigationContainer() {
|
get NavigationContainer() {
|
||||||
return require('./throwIfWrongVersion').default;
|
return require('./throwIfWrongVersion').default;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
export default function () {
|
export default function () {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
"This version of '@react-navigation/native' is not compatible with React Navigation 5. Make sure you install 5.x version of '@react-navigation/native'."
|
'Looks like you are trying to use React Navigation 5 APIs, but have React Navigation 4 installed.\n\nMixing React Navigation 4 and 5 is not supported. See the documentation for installation instructions and usage guide for appropriate versions:\n\n- React Navigation 5: https://reactnavigation.org/docs/getting-started\n- React Navigation 4: https://reactnavigation.org/docs/4.x/getting-started'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,17 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [4.4.0](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.3.9...react-navigation@4.4.0) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## [4.3.9](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.3.8...react-navigation@4.3.9) (2020-04-30)
|
## [4.3.9](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.3.8...react-navigation@4.3.9) (2020-04-30)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-navigation",
|
"name": "react-navigation",
|
||||||
"version": "4.3.9",
|
"version": "4.4.0",
|
||||||
"description": "Routing and navigation for your React Native apps",
|
"description": "Routing and navigation for your React Native apps",
|
||||||
"main": "src/index.js",
|
"main": "src/index.js",
|
||||||
"types": "typescript/react-navigation.d.ts",
|
"types": "typescript/react-navigation.d.ts",
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@react-navigation/core": "^3.7.6",
|
"@react-navigation/core": "^3.7.6",
|
||||||
"@react-navigation/native": "^3.7.13"
|
"@react-navigation/native": "^3.8.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^16.9.23",
|
"@types/react": "^16.9.23",
|
||||||
@@ -34,6 +34,6 @@
|
|||||||
"react": "~16.9.0",
|
"react": "~16.9.0",
|
||||||
"react-native": "~0.61.5",
|
"react-native": "~0.61.5",
|
||||||
"react-test-renderer": "^16.9.2",
|
"react-test-renderer": "^16.9.2",
|
||||||
"typescript": "~3.8.3"
|
"typescript": "^3.9.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -734,7 +734,9 @@ export namespace StackActions {
|
|||||||
export const REPLACE: 'Navigation/REPLACE';
|
export const REPLACE: 'Navigation/REPLACE';
|
||||||
export const COMPLETE_TRANSITION: 'Navigation/COMPLETE_TRANSITION';
|
export const COMPLETE_TRANSITION: 'Navigation/COMPLETE_TRANSITION';
|
||||||
|
|
||||||
export function pop(options: NavigationPopActionPayload): NavigationPopAction;
|
export function pop(
|
||||||
|
options?: NavigationPopActionPayload
|
||||||
|
): NavigationPopAction;
|
||||||
export function popToTop(
|
export function popToTop(
|
||||||
options?: NavigationPopToTopActionPayload
|
options?: NavigationPopToTopActionPayload
|
||||||
): NavigationPopToTopAction;
|
): NavigationPopToTopAction;
|
||||||
@@ -810,17 +812,15 @@ export interface NavigationDescriptor<
|
|||||||
getComponent: () => React.ComponentType;
|
getComponent: () => React.ComponentType;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type NavigationView<
|
export type NavigationView<Options, State, ScreenProps = unknown> =
|
||||||
Options,
|
| React.ComponentType<
|
||||||
State,
|
|
||||||
ScreenProps = unknown
|
|
||||||
> = React.ComponentType<
|
|
||||||
{
|
{
|
||||||
descriptors: { [key: string]: NavigationDescriptor };
|
descriptors: { [key: string]: NavigationDescriptor };
|
||||||
navigationConfig: Options;
|
navigationConfig: Options;
|
||||||
screenProps?: ScreenProps;
|
screenProps?: ScreenProps;
|
||||||
} & NavigationInjectedProps
|
} & NavigationInjectedProps
|
||||||
>;
|
>
|
||||||
|
| React.ComponentType<any>;
|
||||||
|
|
||||||
export type CreateNavigatorConfig<
|
export type CreateNavigatorConfig<
|
||||||
NavigatorConfig,
|
NavigatorConfig,
|
||||||
|
|||||||
@@ -3,6 +3,50 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
## [2.8.1](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.8.0...react-navigation-stack@2.8.1) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* pop with correct key from nested stack ([2e7f4a6](https://github.com/react-navigation/react-navigation-stack/commit/2e7f4a6d10a00930bd5c53ef6f4bf964c9638db5))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [2.8.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.7.0...react-navigation-stack@2.8.0) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation-stack/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [2.7.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.6.0...react-navigation-stack@2.7.0) (2020-06-08)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack ([ba6d7dc](https://github.com/react-navigation/react-navigation-stack/commit/ba6d7dcbedcfca774a53de32f92acc45140bb1fe))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [2.6.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.5.1...react-navigation-stack@2.6.0) (2020-06-06)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack ([03f9f8c](https://github.com/react-navigation/react-navigation-stack/commit/03f9f8cd8ec3b5fe9dc2ed1ed2024e79dd06f854))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## [2.5.1](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.5.0...react-navigation-stack@2.5.1) (2020-05-15)
|
## [2.5.1](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.5.0...react-navigation-stack@2.5.1) (2020-05-15)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-navigation-stack",
|
"name": "react-navigation-stack",
|
||||||
"version": "2.5.1",
|
"version": "2.8.1",
|
||||||
"description": "Stack navigator component for React Navigation",
|
"description": "Stack navigator component for React Navigation",
|
||||||
"main": "lib/commonjs/index.js",
|
"main": "lib/commonjs/index.js",
|
||||||
"module": "lib/module/index.js",
|
"module": "lib/module/index.js",
|
||||||
@@ -45,7 +45,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@react-native-community/bob": "^0.10.0",
|
"@react-native-community/bob": "^0.10.0",
|
||||||
"@react-native-community/masked-view": "^0.1.7",
|
"@react-native-community/masked-view": "^0.1.7",
|
||||||
"@react-navigation/stack": "^5.3.6",
|
"@react-navigation/stack": "^5.6.0",
|
||||||
"@types/color": "^3.0.1",
|
"@types/color": "^3.0.1",
|
||||||
"@types/react": "^16.9.23",
|
"@types/react": "^16.9.23",
|
||||||
"@types/react-native": "^0.61.22",
|
"@types/react-native": "^0.61.22",
|
||||||
@@ -56,9 +56,9 @@
|
|||||||
"react-native-gesture-handler": "^1.6.0",
|
"react-native-gesture-handler": "^1.6.0",
|
||||||
"react-native-safe-area-context": "^0.7.3",
|
"react-native-safe-area-context": "^0.7.3",
|
||||||
"react-native-screens": "^2.3.0",
|
"react-native-screens": "^2.3.0",
|
||||||
"react-navigation": "^4.3.9",
|
"react-navigation": "^4.4.0",
|
||||||
"react-test-renderer": "~16.9.0",
|
"react-test-renderer": "~16.9.0",
|
||||||
"typescript": "~3.8.3"
|
"typescript": "^3.9.5"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@react-native-community/masked-view": ">=0.1.0",
|
"@react-native-community/masked-view": ">=0.1.0",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/index.tsx 2020-05-11 18:29:57.000000000 +0200
|
+++ src/vendor/index.tsx 2020-06-24 23:16:17.000000000 +0200
|
||||||
@@ -3,11 +3,6 @@
|
@@ -3,11 +3,6 @@
|
||||||
import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
|
import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
|
||||||
import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
|
import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
|
||||||
@@ -28,7 +28,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
|
|||||||
StackHeaderLeftButtonProps,
|
StackHeaderLeftButtonProps,
|
||||||
StackHeaderTitleProps,
|
StackHeaderTitleProps,
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100
|
+++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100
|
||||||
@@ -1,96 +0,0 @@
|
@@ -1,96 +0,0 @@
|
||||||
-import * as React from 'react';
|
-import * as React from 'react';
|
||||||
@@ -44,7 +44,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
|
|||||||
- StackActions,
|
- StackActions,
|
||||||
-} from '@react-navigation/native';
|
-} from '@react-navigation/native';
|
||||||
-import StackView from '../views/Stack/StackView';
|
-import StackView from '../views/Stack/StackView';
|
||||||
-import {
|
-import type {
|
||||||
- StackNavigationConfig,
|
- StackNavigationConfig,
|
||||||
- StackNavigationOptions,
|
- StackNavigationOptions,
|
||||||
- StackNavigationEventMap,
|
- StackNavigationEventMap,
|
||||||
@@ -128,12 +128,12 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
|
|||||||
- typeof StackNavigator
|
- typeof StackNavigator
|
||||||
->(StackNavigator);
|
->(StackNavigator);
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/types.tsx 2020-05-11 18:29:52.000000000 +0200
|
+++ src/vendor/types.tsx 2020-06-24 23:18:40.000000000 +0200
|
||||||
@@ -8,15 +8,28 @@
|
@@ -8,15 +8,28 @@
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
import {
|
import type {
|
||||||
+ NavigationRoute,
|
+ NavigationRoute,
|
||||||
+ NavigationState,
|
+ NavigationState,
|
||||||
+ NavigationScreenProp,
|
+ NavigationScreenProp,
|
||||||
@@ -218,7 +218,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
|
|||||||
};
|
};
|
||||||
|
|
||||||
export type Layout = { width: number; height: number };
|
export type Layout = { width: number; height: number };
|
||||||
@@ -227,24 +239,27 @@
|
@@ -228,24 +240,27 @@
|
||||||
/**
|
/**
|
||||||
* Navigation prop for the header.
|
* Navigation prop for the header.
|
||||||
*/
|
*/
|
||||||
@@ -252,7 +252,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
|
|||||||
export type StackNavigationOptions = StackHeaderOptions &
|
export type StackNavigationOptions = StackHeaderOptions &
|
||||||
Partial<TransitionPreset> & {
|
Partial<TransitionPreset> & {
|
||||||
/**
|
/**
|
||||||
@@ -329,6 +344,8 @@
|
@@ -330,6 +345,8 @@
|
||||||
bottom?: number;
|
bottom?: number;
|
||||||
left?: number;
|
left?: number;
|
||||||
};
|
};
|
||||||
@@ -261,28 +261,40 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
|
|||||||
};
|
};
|
||||||
|
|
||||||
export type StackNavigationConfig = {
|
export type StackNavigationConfig = {
|
||||||
|
diff -Naur ../../node_modules/@react-navigation/stack/src/utils/PreviousSceneContext.tsx src/vendor/utils/PreviousSceneContext.tsx
|
||||||
|
--- ../../node_modules/@react-navigation/stack/src/utils/PreviousSceneContext.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
|
+++ src/vendor/utils/PreviousSceneContext.tsx 2020-06-24 23:26:38.000000000 +0200
|
||||||
|
@@ -1,6 +1,5 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
-import type { Route } from '@react-navigation/native';
|
||||||
|
-import type { Scene } from '../types';
|
||||||
|
+import type { Route, Scene } from '../types';
|
||||||
|
|
||||||
|
const PreviousSceneContext = React.createContext<
|
||||||
|
Scene<Route<string>> | undefined
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/vendor/views/Header/Header.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/vendor/views/Header/Header.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Header/Header.tsx 2020-05-11 18:16:24.000000000 +0200
|
+++ src/vendor/views/Header/Header.tsx 2020-06-24 23:33:25.000000000 +0200
|
||||||
@@ -1,12 +1,14 @@
|
@@ -1,12 +1,15 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
-import { StackActions } from '@react-navigation/native';
|
-import { StackActions } from '@react-navigation/native';
|
||||||
+import { Dimensions } from 'react-native';
|
+import { Dimensions } from 'react-native';
|
||||||
+import { StackActions } from 'react-navigation';
|
+import { StackActions } from 'react-navigation';
|
||||||
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
|
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
|
||||||
|
+
|
||||||
|
+import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
|
||||||
|
|
||||||
-import HeaderSegment from './HeaderSegment';
|
-import HeaderSegment from './HeaderSegment';
|
||||||
+import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
|
|
||||||
import HeaderTitle from './HeaderTitle';
|
import HeaderTitle from './HeaderTitle';
|
||||||
import debounce from '../../utils/debounce';
|
import debounce from '../../utils/debounce';
|
||||||
import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
|
import type { StackHeaderProps, StackHeaderTitleProps } from '../../types';
|
||||||
|
|
||||||
-export default React.memo(function Header(props: StackHeaderProps) {
|
-export default React.memo(function Header(props: StackHeaderProps) {
|
||||||
+const Header = React.memo(function Header(props: StackHeaderProps) {
|
+const Header = React.memo(function Header(props: StackHeaderProps) {
|
||||||
const {
|
const {
|
||||||
scene,
|
scene,
|
||||||
previous,
|
previous,
|
||||||
@@ -22,7 +24,7 @@
|
@@ -22,7 +25,7 @@
|
||||||
? options.headerTitle
|
? options.headerTitle
|
||||||
: options.title !== undefined
|
: options.title !== undefined
|
||||||
? options.title
|
? options.title
|
||||||
@@ -291,7 +303,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
|
|||||||
|
|
||||||
let leftLabel;
|
let leftLabel;
|
||||||
|
|
||||||
@@ -38,18 +40,13 @@
|
@@ -38,17 +41,18 @@
|
||||||
? o.headerTitle
|
? o.headerTitle
|
||||||
: o.title !== undefined
|
: o.title !== undefined
|
||||||
? o.title
|
? o.title
|
||||||
@@ -307,12 +319,16 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
|
|||||||
- ...StackActions.pop(),
|
- ...StackActions.pop(),
|
||||||
- source: scene.route.key,
|
- source: scene.route.key,
|
||||||
- });
|
- });
|
||||||
- }
|
+ if (navigation.isFirstRouteInParent()) {
|
||||||
|
+ // If we're the first route, we're going back to a parent navigator
|
||||||
|
+ // So we can't specify a key here
|
||||||
|
+ navigation.dispatch(StackActions.pop());
|
||||||
|
+ } else {
|
||||||
+ navigation.dispatch(StackActions.pop({ key: scene.route.key }));
|
+ navigation.dispatch(StackActions.pop({ key: scene.route.key }));
|
||||||
|
}
|
||||||
}, 50),
|
}, 50),
|
||||||
[navigation, scene.route.key]
|
[navigation, scene.route.key]
|
||||||
);
|
@@ -64,7 +68,10 @@
|
||||||
@@ -64,7 +61,10 @@
|
|
||||||
leftLabel={leftLabel}
|
leftLabel={leftLabel}
|
||||||
headerTitle={
|
headerTitle={
|
||||||
typeof options.headerTitle !== 'function'
|
typeof options.headerTitle !== 'function'
|
||||||
@@ -324,7 +340,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
|
|||||||
: options.headerTitle
|
: options.headerTitle
|
||||||
}
|
}
|
||||||
onGoBack={previous ? goBack : undefined}
|
onGoBack={previous ? goBack : undefined}
|
||||||
@@ -72,3 +72,18 @@
|
@@ -72,3 +79,18 @@
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@@ -344,8 +360,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
|
|||||||
+
|
+
|
||||||
+export default Header;
|
+export default Header;
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-05-11 18:05:10.000000000 +0200
|
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-06-24 23:21:49.000000000 +0200
|
||||||
@@ -8,9 +8,9 @@
|
@@ -8,9 +8,9 @@
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
LayoutChangeEvent,
|
LayoutChangeEvent,
|
||||||
@@ -354,23 +370,24 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
|
|||||||
import MaskedView from '../MaskedView';
|
import MaskedView from '../MaskedView';
|
||||||
import { TouchableItem } from '../TouchableItem';
|
import { TouchableItem } from '../TouchableItem';
|
||||||
+import useTheme from '../../../utils/useTheme';
|
+import useTheme from '../../../utils/useTheme';
|
||||||
import { StackHeaderLeftButtonProps } from '../../types';
|
import type { StackHeaderLeftButtonProps } from '../../types';
|
||||||
|
|
||||||
type Props = StackHeaderLeftButtonProps;
|
type Props = StackHeaderLeftButtonProps;
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-05-11 18:05:10.000000000 +0200
|
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-06-24 23:16:23.000000000 +0200
|
||||||
@@ -1,6 +1,6 @@
|
@@ -7,7 +7,7 @@
|
||||||
import * as React from 'react';
|
StyleProp,
|
||||||
import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
|
ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
-import { useTheme } from '@react-navigation/native';
|
-import { useTheme } from '@react-navigation/native';
|
||||||
+import useTheme from '../../../utils/useTheme';
|
+import useTheme from '../../../utils/useTheme';
|
||||||
|
|
||||||
type Props = ViewProps & {
|
type Props = ViewProps & {
|
||||||
children?: React.ReactNode;
|
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-05-11 18:05:10.000000000 +0200
|
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-06-24 23:21:29.000000000 +0200
|
||||||
@@ -1,11 +1,6 @@
|
@@ -1,11 +1,6 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||||
@@ -381,18 +398,18 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
|
|||||||
- ParamListBase,
|
- ParamListBase,
|
||||||
-} from '@react-navigation/native';
|
-} from '@react-navigation/native';
|
||||||
+import { NavigationContext } from 'react-navigation';
|
+import { NavigationContext } from 'react-navigation';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
import Header from './Header';
|
import Header from './Header';
|
||||||
@@ -16,6 +11,7 @@
|
@@ -19,6 +14,7 @@
|
||||||
forSlideRight,
|
import PreviousSceneContext from '../../utils/PreviousSceneContext';
|
||||||
} from '../../TransitionConfigs/HeaderStyleInterpolators';
|
import type {
|
||||||
import {
|
|
||||||
+ Route,
|
|
||||||
Layout,
|
Layout,
|
||||||
|
+ Route,
|
||||||
Scene,
|
Scene,
|
||||||
StackHeaderStyleInterpolator,
|
StackHeaderStyleInterpolator,
|
||||||
@@ -99,9 +95,7 @@
|
StackNavigationProp,
|
||||||
|
@@ -109,9 +105,7 @@
|
||||||
insets,
|
insets,
|
||||||
scene,
|
scene,
|
||||||
previous,
|
previous,
|
||||||
@@ -403,7 +420,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
|
|||||||
styleInterpolator:
|
styleInterpolator:
|
||||||
mode === 'float'
|
mode === 'float'
|
||||||
? isHeaderStatic
|
? isHeaderStatic
|
||||||
@@ -120,7 +114,7 @@
|
@@ -130,7 +124,7 @@
|
||||||
key={scene.route.key}
|
key={scene.route.key}
|
||||||
value={scene.descriptor.navigation}
|
value={scene.descriptor.navigation}
|
||||||
>
|
>
|
||||||
@@ -412,9 +429,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
|
|||||||
<View
|
<View
|
||||||
onLayout={
|
onLayout={
|
||||||
onContentHeightChange
|
onContentHeightChange
|
||||||
@@ -152,7 +146,7 @@
|
@@ -156,7 +150,7 @@
|
||||||
)
|
>
|
||||||
) : null}
|
{header !== undefined ? header(props) : <Header {...props} />}
|
||||||
</View>
|
</View>
|
||||||
- </NavigationRouteContext.Provider>
|
- </NavigationRouteContext.Provider>
|
||||||
+ </>
|
+ </>
|
||||||
@@ -422,14 +439,14 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-05-11 18:17:37.000000000 +0200
|
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-06-24 23:20:58.000000000 +0200
|
||||||
@@ -8,7 +8,7 @@
|
@@ -8,7 +8,7 @@
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
-import { Route } from '@react-navigation/native';
|
-import type { Route } from '@react-navigation/native';
|
||||||
+import { NavigationRoute } from 'react-navigation';
|
+import type { NavigationRoute } from 'react-navigation';
|
||||||
import HeaderBackButton from './HeaderBackButton';
|
import HeaderBackButton from './HeaderBackButton';
|
||||||
import HeaderBackground from './HeaderBackground';
|
import HeaderBackground from './HeaderBackground';
|
||||||
import memoize from '../../utils/memoize';
|
import memoize from '../../utils/memoize';
|
||||||
@@ -443,8 +460,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg
|
|||||||
};
|
};
|
||||||
|
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-05-11 18:17:37.000000000 +0200
|
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-06-24 23:16:23.000000000 +0200
|
||||||
@@ -1,6 +1,6 @@
|
@@ -1,6 +1,6 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Animated, StyleSheet, Platform } from 'react-native';
|
import { Animated, StyleSheet, Platform } from 'react-native';
|
||||||
@@ -454,9 +471,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit
|
|||||||
type Props = Omit<React.ComponentProps<typeof Animated.Text>, 'key'> & {
|
type Props = Omit<React.ComponentProps<typeof Animated.Text>, 'key'> & {
|
||||||
tintColor?: string;
|
tintColor?: string;
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vendor/views/Stack/Card.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vendor/views/Stack/Card.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Stack/Card.tsx 2020-05-11 18:05:10.000000000 +0200
|
+++ src/vendor/views/Stack/Card.tsx 2020-06-24 23:16:23.000000000 +0200
|
||||||
@@ -140,7 +140,7 @@
|
@@ -146,7 +146,7 @@
|
||||||
|
|
||||||
private interactionHandle: number | undefined;
|
private interactionHandle: number | undefined;
|
||||||
|
|
||||||
@@ -466,53 +483,46 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s
|
|||||||
private animate = ({
|
private animate = ({
|
||||||
closing,
|
closing,
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx src/vendor/views/Stack/CardContainer.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx src/vendor/views/Stack/CardContainer.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Stack/CardContainer.tsx 2020-05-11 18:33:41.000000000 +0200
|
+++ src/vendor/views/Stack/CardContainer.tsx 2020-06-24 23:20:38.000000000 +0200
|
||||||
@@ -1,10 +1,11 @@
|
@@ -1,12 +1,13 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||||
-import { Route, useTheme } from '@react-navigation/native';
|
-import { Route, useTheme } from '@react-navigation/native';
|
||||||
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
||||||
import Card from './Card';
|
import Card from './Card';
|
||||||
import HeaderHeightContext from '../../utils/HeaderHeightContext';
|
import HeaderHeightContext from '../../utils/HeaderHeightContext';
|
||||||
|
import HeaderShownContext from '../../utils/HeaderShownContext';
|
||||||
|
import PreviousSceneContext from '../../utils/PreviousSceneContext';
|
||||||
+import useTheme from '../../../utils/useTheme';
|
+import useTheme from '../../../utils/useTheme';
|
||||||
import {
|
import type {
|
||||||
+ Route,
|
+ Route,
|
||||||
Scene,
|
Scene,
|
||||||
Layout,
|
Layout,
|
||||||
StackHeaderMode,
|
StackHeaderMode,
|
||||||
@@ -192,7 +193,7 @@
|
|
||||||
? { marginTop: headerHeight }
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
- contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
|
|
||||||
+ contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
|
|
||||||
style={StyleSheet.absoluteFill}
|
|
||||||
>
|
|
||||||
<View style={styles.container}>
|
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Stack/CardStack.tsx 2020-05-11 18:05:10.000000000 +0200
|
+++ src/vendor/views/Stack/CardStack.tsx 2020-06-24 23:20:16.000000000 +0200
|
||||||
@@ -7,7 +7,7 @@
|
@@ -7,7 +7,7 @@
|
||||||
Platform,
|
Platform,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
-import { Route, StackNavigationState } from '@react-navigation/native';
|
-import type { Route, StackNavigationState } from '@react-navigation/native';
|
||||||
+import { NavigationState as StackNavigationState } from 'react-navigation';
|
+import type { NavigationState as StackNavigationState } from 'react-navigation';
|
||||||
|
|
||||||
import { MaybeScreenContainer, MaybeScreen } from '../Screens';
|
import { MaybeScreenContainer, MaybeScreen } from '../Screens';
|
||||||
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
|
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
|
||||||
@@ -21,6 +21,7 @@
|
@@ -25,6 +25,7 @@
|
||||||
import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
|
|
||||||
import getDistanceForDirection from '../../utils/getDistanceForDirection';
|
|
||||||
import {
|
|
||||||
+ Route,
|
|
||||||
Layout,
|
Layout,
|
||||||
StackHeaderMode,
|
StackHeaderMode,
|
||||||
StackCardMode,
|
StackCardMode,
|
||||||
|
+ Route,
|
||||||
|
Scene,
|
||||||
|
StackDescriptorMap,
|
||||||
|
StackNavigationOptions,
|
||||||
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx
|
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx
|
||||||
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-05-11 17:55:45.000000000 +0200
|
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-06-24 23:11:52.000000000 +0200
|
||||||
+++ src/vendor/views/Stack/StackView.tsx 2020-05-11 18:30:19.000000000 +0200
|
+++ src/vendor/views/Stack/StackView.tsx 2020-06-24 23:19:46.000000000 +0200
|
||||||
@@ -2,11 +2,11 @@
|
@@ -2,11 +2,11 @@
|
||||||
import { View, Platform, StyleSheet } from 'react-native';
|
import { View, Platform, StyleSheet } from 'react-native';
|
||||||
import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
|
import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
|
||||||
@@ -532,7 +542,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
|||||||
@@ -16,6 +16,7 @@
|
@@ -16,6 +16,7 @@
|
||||||
} from '../Header/HeaderContainer';
|
} from '../Header/HeaderContainer';
|
||||||
import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
|
import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
|
||||||
import {
|
import type {
|
||||||
+ Route,
|
+ Route,
|
||||||
StackNavigationHelpers,
|
StackNavigationHelpers,
|
||||||
StackNavigationConfig,
|
StackNavigationConfig,
|
||||||
@@ -556,7 +566,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
|||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
@@ -321,24 +325,47 @@
|
@@ -321,26 +325,49 @@
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -592,22 +602,24 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
|||||||
+
|
+
|
||||||
private handleOpenRoute = ({ route }: { route: Route<string> }) => {
|
private handleOpenRoute = ({ route }: { route: Route<string> }) => {
|
||||||
const { state, navigation } = this.props;
|
const { state, navigation } = this.props;
|
||||||
|
const { closingRouteKeys, replacingRouteKeys } = this.state;
|
||||||
|
|
||||||
+ this.handleTransitionComplete();
|
+ this.handleTransitionComplete();
|
||||||
+
|
+
|
||||||
if (
|
if (
|
||||||
this.state.replacingRouteKeys.every((key) => key !== route.key) &&
|
closingRouteKeys.some((key) => key === route.key) &&
|
||||||
|
replacingRouteKeys.every((key) => key !== route.key) &&
|
||||||
- state.routeNames.includes(route.name) &&
|
- state.routeNames.includes(route.name) &&
|
||||||
!state.routes.some((r) => r.key === route.key)
|
!state.routes.some((r) => r.key === route.key)
|
||||||
) {
|
) {
|
||||||
// If route isn't present in current state, assume that a close animation was cancelled
|
// If route isn't present in current state, but was closing, assume that a close animation was cancelled
|
||||||
// So we need to add this route back to the state
|
// So we need to add this route back to the state
|
||||||
- navigation.navigate(route);
|
- navigation.navigate(route);
|
||||||
+ navigation.dispatch(NavigationActions.navigate(route));
|
+ navigation.dispatch(NavigationActions.navigate(route));
|
||||||
} else {
|
} else {
|
||||||
this.setState((state) => ({
|
this.setState((state) => ({
|
||||||
routes: state.replacingRouteKeys.length
|
routes: state.replacingRouteKeys.length
|
||||||
@@ -364,12 +391,11 @@
|
@@ -366,12 +393,11 @@
|
||||||
// If a route exists in state, trigger a pop
|
// If a route exists in state, trigger a pop
|
||||||
// This will happen in when the route was closed from the card component
|
// This will happen in when the route was closed from the card component
|
||||||
// e.g. When the close animation triggered from a gesture ends
|
// e.g. When the close animation triggered from a gesture ends
|
||||||
@@ -624,7 +636,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
|||||||
// We need to clean up any state tracking the route and pop it immediately
|
// We need to clean up any state tracking the route and pop it immediately
|
||||||
this.setState((state) => ({
|
this.setState((state) => ({
|
||||||
routes: state.routes.filter((r) => r.key !== route.key),
|
routes: state.routes.filter((r) => r.key !== route.key),
|
||||||
@@ -386,26 +412,29 @@
|
@@ -388,26 +414,29 @@
|
||||||
private handleTransitionStart = (
|
private handleTransitionStart = (
|
||||||
{ route }: { route: Route<string> },
|
{ route }: { route: Route<string> },
|
||||||
closing: boolean
|
closing: boolean
|
||||||
@@ -666,8 +678,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
|||||||
navigation,
|
navigation,
|
||||||
keyboardHandlingEnabled,
|
keyboardHandlingEnabled,
|
||||||
mode = 'card',
|
mode = 'card',
|
||||||
@@ -423,7 +452,7 @@
|
@@ -427,7 +456,7 @@
|
||||||
mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen';
|
} = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
- <NavigationHelpersContext.Provider value={navigation}>
|
- <NavigationHelpersContext.Provider value={navigation}>
|
||||||
@@ -675,7 +687,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
|
|||||||
<GestureHandlerWrapper style={styles.container}>
|
<GestureHandlerWrapper style={styles.container}>
|
||||||
<SafeAreaProviderCompat>
|
<SafeAreaProviderCompat>
|
||||||
<SafeAreaConsumer>
|
<SafeAreaConsumer>
|
||||||
@@ -456,7 +485,7 @@
|
@@ -460,7 +489,7 @@
|
||||||
</SafeAreaConsumer>
|
</SafeAreaConsumer>
|
||||||
</SafeAreaProviderCompat>
|
</SafeAreaProviderCompat>
|
||||||
</GestureHandlerWrapper>
|
</GestureHandlerWrapper>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import createAppContainer, {
|
|||||||
_TESTING_ONLY_reset_container_count,
|
_TESTING_ONLY_reset_container_count,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
} from '../../../../native/src/createAppContainer';
|
} from '../../../../native/src/createAppContainer';
|
||||||
import { StackNavigationProp } from '../../vendor/types';
|
import type { StackNavigationProp } from '../../vendor/types';
|
||||||
|
|
||||||
const NavigationTestUtils = {
|
const NavigationTestUtils = {
|
||||||
resetInternalState: _TESTING_ONLY_reset_container_count,
|
resetInternalState: _TESTING_ONLY_reset_container_count,
|
||||||
|
|||||||
@@ -8,337 +8,16 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<View
|
|
||||||
onLayout={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
<View
|
||||||
pointerEvents="box-none"
|
pointerEvents="box-none"
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
accessibilityElementsHidden={false}
|
|
||||||
closing={false}
|
|
||||||
gestureVelocityImpact={0.3}
|
|
||||||
importantForAccessibility="auto"
|
|
||||||
onClose={[Function]}
|
|
||||||
onGestureBegin={[Function]}
|
|
||||||
onGestureCanceled={[Function]}
|
|
||||||
onOpen={[Function]}
|
|
||||||
onTransitionStart={[Function]}
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
transitionSpec={
|
|
||||||
Object {
|
|
||||||
"close": Object {
|
|
||||||
"animation": "spring",
|
|
||||||
"config": Object {
|
|
||||||
"damping": 500,
|
|
||||||
"mass": 3,
|
|
||||||
"overshootClamping": true,
|
|
||||||
"restDisplacementThreshold": 10,
|
|
||||||
"restSpeedThreshold": 10,
|
|
||||||
"stiffness": 1000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"open": Object {
|
|
||||||
"animation": "spring",
|
|
||||||
"config": Object {
|
|
||||||
"damping": 500,
|
|
||||||
"mass": 3,
|
|
||||||
"overshootClamping": true,
|
|
||||||
"restDisplacementThreshold": 10,
|
|
||||||
"restSpeedThreshold": 10,
|
|
||||||
"stiffness": 1000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"marginTop": 44,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<PanGestureHandler
|
|
||||||
enabled={false}
|
|
||||||
hitSlop={
|
|
||||||
Object {
|
|
||||||
"right": -700,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
maxDeltaY={20}
|
|
||||||
minOffsetX={5}
|
|
||||||
onHandlerStateChange={[Function]}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"transform": Array [
|
|
||||||
Object {
|
|
||||||
"translateX": 0,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"translateX": 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"backgroundColor": "rgb(242, 242, 242)",
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"shadowColor": "#000",
|
|
||||||
"shadowOffset": Object {
|
|
||||||
"height": 1,
|
|
||||||
"width": -1,
|
|
||||||
},
|
|
||||||
"shadowOpacity": 0.3,
|
|
||||||
"shadowRadius": 5,
|
|
||||||
"top": 0,
|
|
||||||
"width": 3,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<View
|
|
||||||
style={
|
style={
|
||||||
Array [
|
Array [
|
||||||
Object {
|
Object {
|
||||||
"flex": 1,
|
"zIndex": 1,
|
||||||
"overflow": "hidden",
|
|
||||||
},
|
},
|
||||||
Array [
|
false,
|
||||||
Object {
|
|
||||||
"backgroundColor": "rgb(242, 242, 242)",
|
|
||||||
},
|
|
||||||
undefined,
|
|
||||||
],
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"flexDirection": "column-reverse",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
onLayout={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
accessibilityElementsHidden={false}
|
|
||||||
closing={false}
|
|
||||||
gestureVelocityImpact={0.3}
|
|
||||||
importantForAccessibility="auto"
|
|
||||||
onClose={[Function]}
|
|
||||||
onGestureBegin={[Function]}
|
|
||||||
onGestureCanceled={[Function]}
|
|
||||||
onOpen={[Function]}
|
|
||||||
onTransitionStart={[Function]}
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
transitionSpec={
|
|
||||||
Object {
|
|
||||||
"close": Object {
|
|
||||||
"animation": "spring",
|
|
||||||
"config": Object {
|
|
||||||
"damping": 500,
|
|
||||||
"mass": 3,
|
|
||||||
"overshootClamping": true,
|
|
||||||
"restDisplacementThreshold": 10,
|
|
||||||
"restSpeedThreshold": 10,
|
|
||||||
"stiffness": 1000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"open": Object {
|
|
||||||
"animation": "spring",
|
|
||||||
"config": Object {
|
|
||||||
"damping": 500,
|
|
||||||
"mass": 3,
|
|
||||||
"overshootClamping": true,
|
|
||||||
"restDisplacementThreshold": 10,
|
|
||||||
"restSpeedThreshold": 10,
|
|
||||||
"stiffness": 1000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"marginTop": 44,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<PanGestureHandler
|
|
||||||
enabled={false}
|
|
||||||
hitSlop={
|
|
||||||
Object {
|
|
||||||
"right": -700,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
maxDeltaY={20}
|
|
||||||
minOffsetX={5}
|
|
||||||
onHandlerStateChange={[Function]}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"transform": Array [
|
|
||||||
Object {
|
|
||||||
"translateX": 0,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"translateX": 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"backgroundColor": "rgb(242, 242, 242)",
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"shadowColor": "#000",
|
|
||||||
"shadowOffset": Object {
|
|
||||||
"height": 1,
|
|
||||||
"width": -1,
|
|
||||||
},
|
|
||||||
"shadowOpacity": 0.3,
|
|
||||||
"shadowRadius": 5,
|
|
||||||
"top": 0,
|
|
||||||
"width": 3,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Array [
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"overflow": "hidden",
|
|
||||||
},
|
|
||||||
Array [
|
|
||||||
Object {
|
|
||||||
"backgroundColor": "rgb(242, 242, 242)",
|
|
||||||
},
|
|
||||||
undefined,
|
|
||||||
],
|
|
||||||
]
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"flexDirection": "column-reverse",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</PanGestureHandler>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
accessibilityElementsHidden={false}
|
accessibilityElementsHidden={false}
|
||||||
@@ -348,124 +27,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
|
|||||||
style={null}
|
style={null}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
pointerEvents="none"
|
pointerEvents="box-none"
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"opacity": 1,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"backgroundColor": "#fff",
|
|
||||||
"borderBottomColor": "#a7a7aa",
|
|
||||||
"flex": 1,
|
|
||||||
"shadowColor": "#a7a7aa",
|
|
||||||
"shadowOffset": Object {
|
|
||||||
"height": 0.5,
|
|
||||||
"width": 0,
|
|
||||||
},
|
|
||||||
"shadowOpacity": 0.85,
|
|
||||||
"shadowRadius": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"height": 44,
|
|
||||||
"maxHeight": undefined,
|
|
||||||
"minHeight": undefined,
|
|
||||||
"opacity": undefined,
|
|
||||||
"transform": undefined,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"height": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"alignItems": "center",
|
|
||||||
"flex": 1,
|
|
||||||
"flexDirection": "row",
|
|
||||||
"justifyContent": "center",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"marginHorizontal": 16,
|
|
||||||
"opacity": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
accessibilityRole="header"
|
|
||||||
numberOfLines={1}
|
|
||||||
onLayout={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"color": "rgba(0, 0, 0, 0.9)",
|
|
||||||
"fontSize": 17,
|
|
||||||
"fontWeight": "600",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Home
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</PanGestureHandler>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
accessibilityElementsHidden={false}
|
|
||||||
importantForAccessibility="auto"
|
|
||||||
onLayout={[Function]}
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={null}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="none"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"bottom": 0,
|
"bottom": 0,
|
||||||
@@ -474,6 +36,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
|
|||||||
"position": "absolute",
|
"position": "absolute",
|
||||||
"right": 0,
|
"right": 0,
|
||||||
"top": 0,
|
"top": 0,
|
||||||
|
"zIndex": 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@@ -553,6 +116,368 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
<View
|
||||||
|
onLayout={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
collapsable={false}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
accessibilityElementsHidden={false}
|
||||||
|
closing={false}
|
||||||
|
gestureVelocityImpact={0.3}
|
||||||
|
importantForAccessibility="auto"
|
||||||
|
onClose={[Function]}
|
||||||
|
onGestureBegin={[Function]}
|
||||||
|
onGestureCanceled={[Function]}
|
||||||
|
onOpen={[Function]}
|
||||||
|
onTransitionStart={[Function]}
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
transitionSpec={
|
||||||
|
Object {
|
||||||
|
"close": Object {
|
||||||
|
"animation": "spring",
|
||||||
|
"config": Object {
|
||||||
|
"damping": 500,
|
||||||
|
"mass": 3,
|
||||||
|
"overshootClamping": true,
|
||||||
|
"restDisplacementThreshold": 10,
|
||||||
|
"restSpeedThreshold": 10,
|
||||||
|
"stiffness": 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"open": Object {
|
||||||
|
"animation": "spring",
|
||||||
|
"config": Object {
|
||||||
|
"damping": 500,
|
||||||
|
"mass": 3,
|
||||||
|
"overshootClamping": true,
|
||||||
|
"restDisplacementThreshold": 10,
|
||||||
|
"restSpeedThreshold": 10,
|
||||||
|
"stiffness": 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<PanGestureHandler
|
||||||
|
enabled={false}
|
||||||
|
hitSlop={
|
||||||
|
Object {
|
||||||
|
"right": -700,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
maxDeltaY={20}
|
||||||
|
minOffsetX={5}
|
||||||
|
onHandlerStateChange={[Function]}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"transform": Array [
|
||||||
|
Object {
|
||||||
|
"translateX": 0,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"translateX": 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "rgb(242, 242, 242)",
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"shadowColor": "#000",
|
||||||
|
"shadowOffset": Object {
|
||||||
|
"height": 1,
|
||||||
|
"width": -1,
|
||||||
|
},
|
||||||
|
"shadowOpacity": 0.3,
|
||||||
|
"shadowRadius": 5,
|
||||||
|
"top": 0,
|
||||||
|
"width": 3,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "rgb(242, 242, 242)",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "column-reverse",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
onLayout={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
collapsable={false}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
accessibilityElementsHidden={false}
|
||||||
|
closing={false}
|
||||||
|
gestureVelocityImpact={0.3}
|
||||||
|
importantForAccessibility="auto"
|
||||||
|
onClose={[Function]}
|
||||||
|
onGestureBegin={[Function]}
|
||||||
|
onGestureCanceled={[Function]}
|
||||||
|
onOpen={[Function]}
|
||||||
|
onTransitionStart={[Function]}
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
transitionSpec={
|
||||||
|
Object {
|
||||||
|
"close": Object {
|
||||||
|
"animation": "spring",
|
||||||
|
"config": Object {
|
||||||
|
"damping": 500,
|
||||||
|
"mass": 3,
|
||||||
|
"overshootClamping": true,
|
||||||
|
"restDisplacementThreshold": 10,
|
||||||
|
"restSpeedThreshold": 10,
|
||||||
|
"stiffness": 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"open": Object {
|
||||||
|
"animation": "spring",
|
||||||
|
"config": Object {
|
||||||
|
"damping": 500,
|
||||||
|
"mass": 3,
|
||||||
|
"overshootClamping": true,
|
||||||
|
"restDisplacementThreshold": 10,
|
||||||
|
"restSpeedThreshold": 10,
|
||||||
|
"stiffness": 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"marginTop": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<PanGestureHandler
|
||||||
|
enabled={false}
|
||||||
|
hitSlop={
|
||||||
|
Object {
|
||||||
|
"right": -700,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
maxDeltaY={20}
|
||||||
|
minOffsetX={5}
|
||||||
|
onHandlerStateChange={[Function]}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"transform": Array [
|
||||||
|
Object {
|
||||||
|
"translateX": 0,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"translateX": 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "rgb(242, 242, 242)",
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"shadowColor": "#000",
|
||||||
|
"shadowOffset": Object {
|
||||||
|
"height": 1,
|
||||||
|
"width": -1,
|
||||||
|
},
|
||||||
|
"shadowOpacity": 0.3,
|
||||||
|
"shadowRadius": 5,
|
||||||
|
"top": 0,
|
||||||
|
"width": 3,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "rgb(242, 242, 242)",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "column-reverse",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</PanGestureHandler>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"zIndex": 1,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</PanGestureHandler>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@@ -8,177 +8,16 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<View
|
|
||||||
onLayout={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
<View
|
||||||
pointerEvents="box-none"
|
pointerEvents="box-none"
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
accessibilityElementsHidden={false}
|
|
||||||
closing={false}
|
|
||||||
gestureVelocityImpact={0.3}
|
|
||||||
importantForAccessibility="auto"
|
|
||||||
onClose={[Function]}
|
|
||||||
onGestureBegin={[Function]}
|
|
||||||
onGestureCanceled={[Function]}
|
|
||||||
onOpen={[Function]}
|
|
||||||
onTransitionStart={[Function]}
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
transitionSpec={
|
|
||||||
Object {
|
|
||||||
"close": Object {
|
|
||||||
"animation": "spring",
|
|
||||||
"config": Object {
|
|
||||||
"damping": 500,
|
|
||||||
"mass": 3,
|
|
||||||
"overshootClamping": true,
|
|
||||||
"restDisplacementThreshold": 10,
|
|
||||||
"restSpeedThreshold": 10,
|
|
||||||
"stiffness": 1000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"open": Object {
|
|
||||||
"animation": "spring",
|
|
||||||
"config": Object {
|
|
||||||
"damping": 500,
|
|
||||||
"mass": 3,
|
|
||||||
"overshootClamping": true,
|
|
||||||
"restDisplacementThreshold": 10,
|
|
||||||
"restSpeedThreshold": 10,
|
|
||||||
"stiffness": 1000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"marginTop": 44,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<PanGestureHandler
|
|
||||||
enabled={false}
|
|
||||||
hitSlop={
|
|
||||||
Object {
|
|
||||||
"right": -700,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
maxDeltaY={20}
|
|
||||||
minOffsetX={5}
|
|
||||||
onHandlerStateChange={[Function]}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"transform": Array [
|
|
||||||
Object {
|
|
||||||
"translateX": 0,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"translateX": 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
pointerEvents="none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"backgroundColor": "rgb(242, 242, 242)",
|
|
||||||
"bottom": 0,
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"shadowColor": "#000",
|
|
||||||
"shadowOffset": Object {
|
|
||||||
"height": 1,
|
|
||||||
"width": -1,
|
|
||||||
},
|
|
||||||
"shadowOpacity": 0.3,
|
|
||||||
"shadowRadius": 5,
|
|
||||||
"top": 0,
|
|
||||||
"width": 3,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<View
|
|
||||||
style={
|
style={
|
||||||
Array [
|
Array [
|
||||||
Object {
|
Object {
|
||||||
"flex": 1,
|
"zIndex": 1,
|
||||||
"overflow": "hidden",
|
|
||||||
},
|
},
|
||||||
Array [
|
false,
|
||||||
Object {
|
|
||||||
"backgroundColor": "rgb(242, 242, 242)",
|
|
||||||
},
|
|
||||||
undefined,
|
|
||||||
],
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
"flexDirection": "column-reverse",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</PanGestureHandler>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
pointerEvents="box-none"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"left": 0,
|
|
||||||
"position": "absolute",
|
|
||||||
"right": 0,
|
|
||||||
"top": 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
accessibilityElementsHidden={false}
|
accessibilityElementsHidden={false}
|
||||||
@@ -188,7 +27,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
|
|||||||
style={null}
|
style={null}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
pointerEvents="none"
|
pointerEvents="box-none"
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"bottom": 0,
|
"bottom": 0,
|
||||||
@@ -197,6 +36,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
|
|||||||
"position": "absolute",
|
"position": "absolute",
|
||||||
"right": 0,
|
"right": 0,
|
||||||
"top": 0,
|
"top": 0,
|
||||||
|
"zIndex": 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@@ -293,17 +133,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`StackNavigator renders successfully 1`] = `
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"flex": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View
|
<View
|
||||||
onLayout={[Function]}
|
onLayout={[Function]}
|
||||||
style={
|
style={
|
||||||
@@ -324,6 +153,14 @@ exports[`StackNavigator renders successfully 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
<View
|
||||||
|
collapsable={false}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
<View
|
<View
|
||||||
accessibilityElementsHidden={false}
|
accessibilityElementsHidden={false}
|
||||||
closing={false}
|
closing={false}
|
||||||
@@ -376,7 +213,6 @@ exports[`StackNavigator renders successfully 1`] = `
|
|||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"flex": 1,
|
"flex": 1,
|
||||||
"marginTop": 44,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@@ -465,15 +301,26 @@ exports[`StackNavigator renders successfully 1`] = `
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`StackNavigator renders successfully 1`] = `
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
<View
|
<View
|
||||||
pointerEvents="box-none"
|
pointerEvents="box-none"
|
||||||
style={
|
style={
|
||||||
|
Array [
|
||||||
Object {
|
Object {
|
||||||
"left": 0,
|
"zIndex": 1,
|
||||||
"position": "absolute",
|
},
|
||||||
"right": 0,
|
false,
|
||||||
"top": 0,
|
]
|
||||||
}
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
@@ -484,7 +331,7 @@ exports[`StackNavigator renders successfully 1`] = `
|
|||||||
style={null}
|
style={null}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
pointerEvents="none"
|
pointerEvents="box-none"
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"bottom": 0,
|
"bottom": 0,
|
||||||
@@ -493,6 +340,7 @@ exports[`StackNavigator renders successfully 1`] = `
|
|||||||
"position": "absolute",
|
"position": "absolute",
|
||||||
"right": 0,
|
"right": 0,
|
||||||
"top": 0,
|
"top": 0,
|
||||||
|
"zIndex": 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@@ -573,5 +421,173 @@ exports[`StackNavigator renders successfully 1`] = `
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
<View
|
||||||
|
onLayout={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
collapsable={false}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
accessibilityElementsHidden={false}
|
||||||
|
closing={false}
|
||||||
|
gestureVelocityImpact={0.3}
|
||||||
|
importantForAccessibility="auto"
|
||||||
|
onClose={[Function]}
|
||||||
|
onGestureBegin={[Function]}
|
||||||
|
onGestureCanceled={[Function]}
|
||||||
|
onOpen={[Function]}
|
||||||
|
onTransitionStart={[Function]}
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
transitionSpec={
|
||||||
|
Object {
|
||||||
|
"close": Object {
|
||||||
|
"animation": "spring",
|
||||||
|
"config": Object {
|
||||||
|
"damping": 500,
|
||||||
|
"mass": 3,
|
||||||
|
"overshootClamping": true,
|
||||||
|
"restDisplacementThreshold": 10,
|
||||||
|
"restSpeedThreshold": 10,
|
||||||
|
"stiffness": 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"open": Object {
|
||||||
|
"animation": "spring",
|
||||||
|
"config": Object {
|
||||||
|
"damping": 500,
|
||||||
|
"mass": 3,
|
||||||
|
"overshootClamping": true,
|
||||||
|
"restDisplacementThreshold": 10,
|
||||||
|
"restSpeedThreshold": 10,
|
||||||
|
"stiffness": 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="box-none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<PanGestureHandler
|
||||||
|
enabled={false}
|
||||||
|
hitSlop={
|
||||||
|
Object {
|
||||||
|
"right": -700,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
maxDeltaY={20}
|
||||||
|
minOffsetX={5}
|
||||||
|
onHandlerStateChange={[Function]}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"transform": Array [
|
||||||
|
Object {
|
||||||
|
"translateX": 0,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"translateX": 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
pointerEvents="none"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "rgb(242, 242, 242)",
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"shadowColor": "#000",
|
||||||
|
"shadowOffset": Object {
|
||||||
|
"height": 1,
|
||||||
|
"width": -1,
|
||||||
|
},
|
||||||
|
"shadowOpacity": 0.3,
|
||||||
|
"shadowRadius": 5,
|
||||||
|
"top": 0,
|
||||||
|
"width": 3,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "rgb(242, 242, 242)",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "column-reverse",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</PanGestureHandler>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import {
|
|||||||
CreateNavigatorConfig,
|
CreateNavigatorConfig,
|
||||||
} from 'react-navigation';
|
} from 'react-navigation';
|
||||||
import StackView from '../views/StackView';
|
import StackView from '../views/StackView';
|
||||||
import {
|
import type {
|
||||||
StackNavigationConfig,
|
StackNavigationConfig,
|
||||||
StackNavigationOptions,
|
StackNavigationOptions,
|
||||||
StackNavigationProp,
|
StackNavigationProp,
|
||||||
|
|||||||
@@ -1,10 +1,13 @@
|
|||||||
import {
|
import type {
|
||||||
NavigationRoute,
|
NavigationRoute,
|
||||||
NavigationParams,
|
NavigationParams,
|
||||||
NavigationScreenConfig,
|
NavigationScreenConfig,
|
||||||
SupportedThemes,
|
SupportedThemes,
|
||||||
} from 'react-navigation';
|
} from 'react-navigation';
|
||||||
import { StackNavigationProp, StackNavigationOptions } from './vendor/types';
|
import type {
|
||||||
|
StackNavigationProp,
|
||||||
|
StackNavigationOptions,
|
||||||
|
} from './vendor/types';
|
||||||
|
|
||||||
export type NavigationStackScreenProps<
|
export type NavigationStackScreenProps<
|
||||||
Params = NavigationParams,
|
Params = NavigationParams,
|
||||||
|
|||||||
@@ -1,5 +1,8 @@
|
|||||||
import { StyleProp, ViewStyle } from 'react-native';
|
import type { StyleProp, ViewStyle } from 'react-native';
|
||||||
import { StackNavigationOptions, StackNavigationConfig } from '../vendor/types';
|
import type {
|
||||||
|
StackNavigationOptions,
|
||||||
|
StackNavigationConfig,
|
||||||
|
} from '../vendor/types';
|
||||||
|
|
||||||
type Validation = {
|
type Validation = {
|
||||||
message: string;
|
message: string;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
import { StackNavigationOptions } from '../vendor/types';
|
import type { StackNavigationOptions } from '../vendor/types';
|
||||||
|
|
||||||
type Validation = {
|
type Validation = {
|
||||||
check: (o: Record<string, any>) => boolean;
|
check: (o: Record<string, any>) => boolean;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Animated } from 'react-native';
|
import { Animated } from 'react-native';
|
||||||
import { isIphoneX } from 'react-native-iphone-x-helper';
|
import { isIphoneX } from 'react-native-iphone-x-helper';
|
||||||
import conditional from '../utils/conditional';
|
import conditional from '../utils/conditional';
|
||||||
import {
|
import type {
|
||||||
StackCardInterpolationProps,
|
StackCardInterpolationProps,
|
||||||
StackCardInterpolatedStyle,
|
StackCardInterpolatedStyle,
|
||||||
} from '../types';
|
} from '../types';
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Animated, I18nManager } from 'react-native';
|
import { Animated, I18nManager } from 'react-native';
|
||||||
import {
|
import type {
|
||||||
StackHeaderInterpolationProps,
|
StackHeaderInterpolationProps,
|
||||||
StackHeaderInterpolatedStyle,
|
StackHeaderInterpolatedStyle,
|
||||||
} from '../types';
|
} from '../types';
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { Platform } from 'react-native';
|
||||||
import {
|
import {
|
||||||
forHorizontalIOS,
|
forHorizontalIOS,
|
||||||
forVerticalIOS,
|
forVerticalIOS,
|
||||||
@@ -14,8 +15,7 @@ import {
|
|||||||
FadeOutToBottomAndroidSpec,
|
FadeOutToBottomAndroidSpec,
|
||||||
FadeInFromBottomAndroidSpec,
|
FadeInFromBottomAndroidSpec,
|
||||||
} from './TransitionSpecs';
|
} from './TransitionSpecs';
|
||||||
import { TransitionPreset } from '../types';
|
import type { TransitionPreset } from '../types';
|
||||||
import { Platform } from 'react-native';
|
|
||||||
|
|
||||||
const ANDROID_VERSION_PIE = 28;
|
const ANDROID_VERSION_PIE = 28;
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Easing } from 'react-native';
|
import { Easing } from 'react-native';
|
||||||
import { TransitionSpec } from '../types';
|
import type { TransitionSpec } from '../types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Exact values from UINavigationController's animation configuration.
|
* Exact values from UINavigationController's animation configuration.
|
||||||
|
|||||||
21
packages/stack/src/vendor/types.tsx
vendored
21
packages/stack/src/vendor/types.tsx
vendored
@@ -1,13 +1,13 @@
|
|||||||
import * as React from 'react';
|
import type * as React from 'react';
|
||||||
import {
|
import type {
|
||||||
Animated,
|
Animated,
|
||||||
StyleProp,
|
StyleProp,
|
||||||
TextStyle,
|
TextStyle,
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
LayoutChangeEvent,
|
LayoutChangeEvent,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
import {
|
import type {
|
||||||
NavigationRoute,
|
NavigationRoute,
|
||||||
NavigationState,
|
NavigationState,
|
||||||
NavigationScreenProp,
|
NavigationScreenProp,
|
||||||
@@ -131,7 +131,7 @@ export type StackHeaderOptions = {
|
|||||||
* This may lead to white space or overlap between `headerLeft` and `headerTitle` if a customized `headerLeft` is used.
|
* This may lead to white space or overlap between `headerLeft` and `headerTitle` if a customized `headerLeft` is used.
|
||||||
* It can be solved by adjusting `left` and `right` style in `headerTitleContainerStyle` and `marginHorizontal` in `headerTitleStyle`.
|
* It can be solved by adjusting `left` and `right` style in `headerTitleContainerStyle` and `marginHorizontal` in `headerTitleStyle`.
|
||||||
*/
|
*/
|
||||||
headerTitleContainerStyle?: StyleProp<ViewStyle>;
|
headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
/**
|
/**
|
||||||
* Tint color for the header.
|
* Tint color for the header.
|
||||||
*/
|
*/
|
||||||
@@ -145,7 +145,8 @@ export type StackHeaderOptions = {
|
|||||||
*/
|
*/
|
||||||
headerBackAllowFontScaling?: boolean;
|
headerBackAllowFontScaling?: boolean;
|
||||||
/**
|
/**
|
||||||
* Title string used by the back button on iOS, or `null` to disable label. Defaults to the previous scene's `headerTitle`.
|
* Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
|
||||||
|
* Use `headerBackTitleVisible: false` to hide it.
|
||||||
*/
|
*/
|
||||||
headerBackTitle?: string;
|
headerBackTitle?: string;
|
||||||
/**
|
/**
|
||||||
@@ -169,7 +170,7 @@ export type StackHeaderOptions = {
|
|||||||
/**
|
/**
|
||||||
* Style object for the container of the `headerLeft` component, for example to add padding.
|
* Style object for the container of the `headerLeft` component, for example to add padding.
|
||||||
*/
|
*/
|
||||||
headerLeftContainerStyle?: StyleProp<ViewStyle>;
|
headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
/**
|
/**
|
||||||
* Function which returns a React Element to display on the right side of the header.
|
* Function which returns a React Element to display on the right side of the header.
|
||||||
*/
|
*/
|
||||||
@@ -177,7 +178,7 @@ export type StackHeaderOptions = {
|
|||||||
/**
|
/**
|
||||||
* Style object for the container of the `headerRight` component, for example to add padding.
|
* Style object for the container of the `headerRight` component, for example to add padding.
|
||||||
*/
|
*/
|
||||||
headerRightContainerStyle?: StyleProp<ViewStyle>;
|
headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
/**
|
/**
|
||||||
* Function which returns a React Element to display custom image in header's back button.
|
* Function which returns a React Element to display custom image in header's back button.
|
||||||
* It receives the `tintColor` in in the options object as an argument. object.
|
* It receives the `tintColor` in in the options object as an argument. object.
|
||||||
@@ -199,7 +200,7 @@ export type StackHeaderOptions = {
|
|||||||
/**
|
/**
|
||||||
* Style object for the header. You can specify a custom background color here, for example.
|
* Style object for the header. You can specify a custom background color here, for example.
|
||||||
*/
|
*/
|
||||||
headerStyle?: StyleProp<ViewStyle>;
|
headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
/**
|
/**
|
||||||
* Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
|
* Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
|
||||||
* The header will also float over the screen so that it overlaps the content underneath.
|
* The header will also float over the screen so that it overlaps the content underneath.
|
||||||
@@ -397,7 +398,7 @@ export type StackHeaderLeftButtonProps = {
|
|||||||
/**
|
/**
|
||||||
* Style object for the label.
|
* Style object for the label.
|
||||||
*/
|
*/
|
||||||
labelStyle?: React.ComponentProps<typeof Animated.Text>['style'];
|
labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
|
||||||
/**
|
/**
|
||||||
* Whether label font should scale to respect Text Size accessibility settings.
|
* Whether label font should scale to respect Text Size accessibility settings.
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { StackCardInterpolationProps } from '../types';
|
import type { StackCardInterpolationProps } from '../types';
|
||||||
|
|
||||||
export default React.createContext<StackCardInterpolationProps | undefined>(
|
export default React.createContext<StackCardInterpolationProps | undefined>(
|
||||||
undefined
|
undefined
|
||||||
|
|||||||
5
packages/stack/src/vendor/utils/HeaderShownContext.tsx
vendored
Normal file
5
packages/stack/src/vendor/utils/HeaderShownContext.tsx
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
const HeaderShownContext = React.createContext(false);
|
||||||
|
|
||||||
|
export default HeaderShownContext;
|
||||||
8
packages/stack/src/vendor/utils/PreviousSceneContext.tsx
vendored
Normal file
8
packages/stack/src/vendor/utils/PreviousSceneContext.tsx
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import type { Route, Scene } from '../types';
|
||||||
|
|
||||||
|
const PreviousSceneContext = React.createContext<
|
||||||
|
Scene<Route<string>> | undefined
|
||||||
|
>(undefined);
|
||||||
|
|
||||||
|
export default PreviousSceneContext;
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import getInvertedMultiplier from './getInvertedMultiplier';
|
import getInvertedMultiplier from './getInvertedMultiplier';
|
||||||
import { GestureDirection, Layout } from '../types';
|
import type { GestureDirection, Layout } from '../types';
|
||||||
|
|
||||||
export default function getDistanceForDirection(
|
export default function getDistanceForDirection(
|
||||||
layout: Layout,
|
layout: Layout,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { I18nManager } from 'react-native';
|
import { I18nManager } from 'react-native';
|
||||||
import { GestureDirection } from '../types';
|
import type { GestureDirection } from '../types';
|
||||||
|
|
||||||
export default function getInvertedMultiplier(
|
export default function getInvertedMultiplier(
|
||||||
gestureDirection: GestureDirection
|
gestureDirection: GestureDirection
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export default class BorderlessButton extends React.Component<Props> {
|
|||||||
const { children, style, enabled, ...rest } = this.props;
|
const { children, style, enabled, ...rest } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// @ts-ignore
|
// @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
|
||||||
<AnimatedBaseButton
|
<AnimatedBaseButton
|
||||||
{...rest}
|
{...rest}
|
||||||
onActiveStateChange={this.handleActiveStateChange}
|
onActiveStateChange={this.handleActiveStateChange}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export function PanGestureHandler(props: PanGestureHandlerProperties) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<GestureHandlerRefContext.Provider value={gestureRef}>
|
<GestureHandlerRefContext.Provider value={gestureRef}>
|
||||||
<PanGestureHandlerNative {...props} />
|
<PanGestureHandlerNative {...props} ref={gestureRef} />
|
||||||
</GestureHandlerRefContext.Provider>
|
</GestureHandlerRefContext.Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,9 +4,10 @@ import { StackActions } from 'react-navigation';
|
|||||||
import { getStatusBarHeight } from 'react-native-iphone-x-helper';
|
import { getStatusBarHeight } from 'react-native-iphone-x-helper';
|
||||||
|
|
||||||
import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
|
import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
|
||||||
|
|
||||||
import HeaderTitle from './HeaderTitle';
|
import HeaderTitle from './HeaderTitle';
|
||||||
import debounce from '../../utils/debounce';
|
import debounce from '../../utils/debounce';
|
||||||
import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
|
import type { StackHeaderProps, StackHeaderTitleProps } from '../../types';
|
||||||
|
|
||||||
const Header = React.memo(function Header(props: StackHeaderProps) {
|
const Header = React.memo(function Header(props: StackHeaderProps) {
|
||||||
const {
|
const {
|
||||||
@@ -46,7 +47,15 @@ const Header = React.memo(function Header(props: StackHeaderProps) {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
const goBack = React.useCallback(
|
const goBack = React.useCallback(
|
||||||
debounce(() => {
|
debounce(() => {
|
||||||
navigation.dispatch(StackActions.pop({ key: scene.route.key }));
|
const key = navigation.isFirstRouteInParent()
|
||||||
|
? // If we're the first route, we're going back to a parent navigator
|
||||||
|
// So we need to get the key of the route we're nested in
|
||||||
|
navigation.dangerouslyGetParent()?.state.key
|
||||||
|
: scene.route.key;
|
||||||
|
|
||||||
|
if (key !== undefined) {
|
||||||
|
navigation.dispatch(StackActions.pop({ key }));
|
||||||
|
}
|
||||||
}, 50),
|
}, 50),
|
||||||
[navigation, scene.route.key]
|
[navigation, scene.route.key]
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import {
|
|||||||
import MaskedView from '../MaskedView';
|
import MaskedView from '../MaskedView';
|
||||||
import { TouchableItem } from '../TouchableItem';
|
import { TouchableItem } from '../TouchableItem';
|
||||||
import useTheme from '../../../utils/useTheme';
|
import useTheme from '../../../utils/useTheme';
|
||||||
import { StackHeaderLeftButtonProps } from '../../types';
|
import type { StackHeaderLeftButtonProps } from '../../types';
|
||||||
|
|
||||||
type Props = StackHeaderLeftButtonProps;
|
type Props = StackHeaderLeftButtonProps;
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,16 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
|
import {
|
||||||
|
Animated,
|
||||||
|
StyleSheet,
|
||||||
|
Platform,
|
||||||
|
ViewProps,
|
||||||
|
StyleProp,
|
||||||
|
ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
import useTheme from '../../../utils/useTheme';
|
import useTheme from '../../../utils/useTheme';
|
||||||
|
|
||||||
type Props = ViewProps & {
|
type Props = ViewProps & {
|
||||||
|
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||||
import { NavigationContext } from 'react-navigation';
|
import { NavigationContext } from 'react-navigation';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
import Header from './Header';
|
import Header from './Header';
|
||||||
import {
|
import {
|
||||||
@@ -10,9 +10,11 @@ import {
|
|||||||
forNoAnimation,
|
forNoAnimation,
|
||||||
forSlideRight,
|
forSlideRight,
|
||||||
} from '../../TransitionConfigs/HeaderStyleInterpolators';
|
} from '../../TransitionConfigs/HeaderStyleInterpolators';
|
||||||
import {
|
import HeaderShownContext from '../../utils/HeaderShownContext';
|
||||||
Route,
|
import PreviousSceneContext from '../../utils/PreviousSceneContext';
|
||||||
|
import type {
|
||||||
Layout,
|
Layout,
|
||||||
|
Route,
|
||||||
Scene,
|
Scene,
|
||||||
StackHeaderStyleInterpolator,
|
StackHeaderStyleInterpolator,
|
||||||
StackNavigationProp,
|
StackNavigationProp,
|
||||||
@@ -24,9 +26,10 @@ export type Props = {
|
|||||||
layout: Layout;
|
layout: Layout;
|
||||||
insets: EdgeInsets;
|
insets: EdgeInsets;
|
||||||
scenes: (Scene<Route<string>> | undefined)[];
|
scenes: (Scene<Route<string>> | undefined)[];
|
||||||
getPreviousRoute: (props: {
|
getPreviousScene: (props: {
|
||||||
route: Route<string>;
|
route: Route<string>;
|
||||||
}) => Route<string> | undefined;
|
index: number;
|
||||||
|
}) => Scene<Route<string>> | undefined;
|
||||||
getFocusedRoute: () => Route<string>;
|
getFocusedRoute: () => Route<string>;
|
||||||
onContentHeightChange?: (props: {
|
onContentHeightChange?: (props: {
|
||||||
route: Route<string>;
|
route: Route<string>;
|
||||||
@@ -42,14 +45,16 @@ export default function HeaderContainer({
|
|||||||
scenes,
|
scenes,
|
||||||
layout,
|
layout,
|
||||||
insets,
|
insets,
|
||||||
|
getPreviousScene,
|
||||||
getFocusedRoute,
|
getFocusedRoute,
|
||||||
getPreviousRoute,
|
|
||||||
onContentHeightChange,
|
onContentHeightChange,
|
||||||
gestureDirection,
|
gestureDirection,
|
||||||
styleInterpolator,
|
styleInterpolator,
|
||||||
style,
|
style,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const focusedRoute = getFocusedRoute();
|
const focusedRoute = getFocusedRoute();
|
||||||
|
const isParentHeaderShown = React.useContext(HeaderShownContext);
|
||||||
|
const parentPreviousScene = React.useContext(PreviousSceneContext);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View pointerEvents="box-none" style={style}>
|
<View pointerEvents="box-none" style={style}>
|
||||||
@@ -58,36 +63,41 @@ export default function HeaderContainer({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { options } = scene.descriptor;
|
const {
|
||||||
|
header,
|
||||||
|
headerShown = isParentHeaderShown === false,
|
||||||
|
headerTransparent,
|
||||||
|
} = scene.descriptor.options || {};
|
||||||
|
|
||||||
|
if (!headerShown) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const isFocused = focusedRoute.key === scene.route.key;
|
const isFocused = focusedRoute.key === scene.route.key;
|
||||||
const previousRoute = getPreviousRoute({ route: scene.route });
|
const previous =
|
||||||
|
getPreviousScene({
|
||||||
let previous;
|
route: scene.route,
|
||||||
|
index: i,
|
||||||
if (previousRoute) {
|
}) ?? parentPreviousScene;
|
||||||
// The previous scene will be shortly before the current scene in the array
|
|
||||||
// So loop back from current index to avoid looping over the full array
|
|
||||||
for (let j = i - 1; j >= 0; j--) {
|
|
||||||
const s = self[j];
|
|
||||||
|
|
||||||
if (s && s.route.key === previousRoute.key) {
|
|
||||||
previous = s;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the screen is next to a headerless screen, we need to make the header appear static
|
// If the screen is next to a headerless screen, we need to make the header appear static
|
||||||
// This makes the header look like it's moving with the screen
|
// This makes the header look like it's moving with the screen
|
||||||
const previousScene = self[i - 1];
|
const previousScene = self[i - 1];
|
||||||
const nextScene = self[i + 1];
|
const nextScene = self[i + 1];
|
||||||
|
|
||||||
|
const {
|
||||||
|
headerShown: previousHeaderShown = isParentHeaderShown === false,
|
||||||
|
} = previousScene?.descriptor.options || {};
|
||||||
|
|
||||||
|
const { headerShown: nextHeaderShown = isParentHeaderShown === false } =
|
||||||
|
nextScene?.descriptor.options || {};
|
||||||
|
|
||||||
const isHeaderStatic =
|
const isHeaderStatic =
|
||||||
(previousScene &&
|
(previousHeaderShown === false &&
|
||||||
previousScene.descriptor.options.headerShown === false &&
|
|
||||||
// We still need to animate when coming back from next scene
|
// We still need to animate when coming back from next scene
|
||||||
// A hacky way to check this is if the next scene exists
|
// A hacky way to check this is if the next scene exists
|
||||||
!nextScene) ||
|
!nextScene) ||
|
||||||
(nextScene && nextScene.descriptor.options.headerShown === false);
|
nextHeaderShown === false;
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
mode,
|
mode,
|
||||||
@@ -133,18 +143,12 @@ export default function HeaderContainer({
|
|||||||
style={
|
style={
|
||||||
// Avoid positioning the focused header absolutely
|
// Avoid positioning the focused header absolutely
|
||||||
// Otherwise accessibility tools don't seem to be able to find it
|
// Otherwise accessibility tools don't seem to be able to find it
|
||||||
(mode === 'float' && !isFocused) || options.headerTransparent
|
(mode === 'float' && !isFocused) || headerTransparent
|
||||||
? styles.header
|
? styles.header
|
||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{options.headerShown !== false ? (
|
{header !== undefined ? header(props) : <Header {...props} />}
|
||||||
options.header !== undefined ? (
|
|
||||||
options.header(props)
|
|
||||||
) : (
|
|
||||||
<Header {...props} />
|
|
||||||
)
|
|
||||||
) : null}
|
|
||||||
</View>
|
</View>
|
||||||
</>
|
</>
|
||||||
</NavigationContext.Provider>
|
</NavigationContext.Provider>
|
||||||
|
|||||||
@@ -7,12 +7,12 @@ import {
|
|||||||
Platform,
|
Platform,
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
import { NavigationRoute } from 'react-navigation';
|
import type { NavigationRoute } from 'react-navigation';
|
||||||
import HeaderBackButton from './HeaderBackButton';
|
import HeaderBackButton from './HeaderBackButton';
|
||||||
import HeaderBackground from './HeaderBackground';
|
import HeaderBackground from './HeaderBackground';
|
||||||
import memoize from '../../utils/memoize';
|
import memoize from '../../utils/memoize';
|
||||||
import {
|
import type {
|
||||||
Layout,
|
Layout,
|
||||||
StackHeaderStyleInterpolator,
|
StackHeaderStyleInterpolator,
|
||||||
StackHeaderLeftButtonProps,
|
StackHeaderLeftButtonProps,
|
||||||
@@ -62,7 +62,6 @@ export const getDefaultHeaderHeight = (
|
|||||||
let headerHeight;
|
let headerHeight;
|
||||||
|
|
||||||
if (Platform.OS === 'ios') {
|
if (Platform.OS === 'ios') {
|
||||||
// @ts-ignore
|
|
||||||
if (isLandscape && !Platform.isPad) {
|
if (isLandscape && !Platform.isPad) {
|
||||||
headerHeight = 32;
|
headerHeight = 32;
|
||||||
} else {
|
} else {
|
||||||
@@ -208,7 +207,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
|
|||||||
borderTopStartRadius,
|
borderTopStartRadius,
|
||||||
borderTopWidth,
|
borderTopWidth,
|
||||||
borderWidth,
|
borderWidth,
|
||||||
// @ts-ignore: web support for shadow
|
// @ts-expect-error: web support for shadow
|
||||||
boxShadow,
|
boxShadow,
|
||||||
elevation,
|
elevation,
|
||||||
shadowColor,
|
shadowColor,
|
||||||
@@ -250,7 +249,6 @@ export default class HeaderSegment extends React.Component<Props, State> {
|
|||||||
borderTopStartRadius,
|
borderTopStartRadius,
|
||||||
borderTopWidth,
|
borderTopWidth,
|
||||||
borderWidth,
|
borderWidth,
|
||||||
// @ts-ignore
|
|
||||||
boxShadow,
|
boxShadow,
|
||||||
elevation,
|
elevation,
|
||||||
shadowColor,
|
shadowColor,
|
||||||
@@ -265,9 +263,9 @@ export default class HeaderSegment extends React.Component<Props, State> {
|
|||||||
// So we need to filter them out
|
// So we need to filter them out
|
||||||
// Users can use `null` instead
|
// Users can use `null` instead
|
||||||
for (const styleProp in safeStyles) {
|
for (const styleProp in safeStyles) {
|
||||||
// @ts-ignore
|
// @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles
|
||||||
if (safeStyles[styleProp] === undefined) {
|
if (safeStyles[styleProp] === undefined) {
|
||||||
// @ts-ignore
|
// @ts-expect-error
|
||||||
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
|
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
|
||||||
delete safeStyles[styleProp];
|
delete safeStyles[styleProp];
|
||||||
}
|
}
|
||||||
@@ -312,8 +310,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
|
|||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Animated.View
|
<Animated.View
|
||||||
pointerEvents="none"
|
pointerEvents="box-none"
|
||||||
style={[StyleSheet.absoluteFill, backgroundStyle]}
|
style={[StyleSheet.absoluteFill, { zIndex: 0 }, backgroundStyle]}
|
||||||
>
|
>
|
||||||
{headerBackground ? (
|
{headerBackground ? (
|
||||||
headerBackground({ style: safeStyles })
|
headerBackground({ style: safeStyles })
|
||||||
|
|||||||
@@ -35,7 +35,11 @@ export default class KeyboardManager extends React.Component<Props> {
|
|||||||
|
|
||||||
this.clearKeyboardTimeout();
|
this.clearKeyboardTimeout();
|
||||||
|
|
||||||
const input = TextInput.State.currentlyFocusedField();
|
// @ts-expect-error: currentlyFocusedInput is pretty new, so not in the type definitions
|
||||||
|
const input = TextInput.State.currentlyFocusedInput
|
||||||
|
? // @ts-expect-error
|
||||||
|
TextInput.State.currentlyFocusedInput()
|
||||||
|
: TextInput.State.currentlyFocusedField();
|
||||||
|
|
||||||
// When a page change begins, blur the currently focused input
|
// When a page change begins, blur the currently focused input
|
||||||
TextInput.State.blurTextInput(input);
|
TextInput.State.blurTextInput(input);
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ try {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const isMaskedViewAvailable =
|
const isMaskedViewAvailable =
|
||||||
// @ts-ignore
|
|
||||||
UIManager.getViewManagerConfig('RNCMaskedView') != null;
|
UIManager.getViewManagerConfig('RNCMaskedView') != null;
|
||||||
|
|
||||||
export default function MaskedView({ children, ...rest }: Props) {
|
export default function MaskedView({ children, ...rest }: Props) {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import * as React from 'react';
|
import type * as React from 'react';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
maskElement: React.ReactElement;
|
maskElement: React.ReactElement;
|
||||||
|
|||||||
8
packages/stack/src/vendor/views/Screens.tsx
vendored
8
packages/stack/src/vendor/views/Screens.tsx
vendored
@@ -23,7 +23,7 @@ class WebScreen extends React.Component<
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
// @ts-ignore
|
// @ts-expect-error: hidden exists on web, but not in React Native
|
||||||
hidden={!active}
|
hidden={!active}
|
||||||
style={[style, { display: active ? 'flex' : 'none' }]}
|
style={[style, { display: active ? 'flex' : 'none' }]}
|
||||||
{...rest}
|
{...rest}
|
||||||
@@ -54,16 +54,16 @@ export const MaybeScreen = ({
|
|||||||
...rest
|
...rest
|
||||||
}: ViewProps & {
|
}: ViewProps & {
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
active: number | Animated.AnimatedInterpolation;
|
active: 0 | 1 | Animated.AnimatedInterpolation;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) => {
|
}) => {
|
||||||
if (enabled && Platform.OS === 'web') {
|
if (enabled && Platform.OS === 'web') {
|
||||||
// @ts-ignore
|
// @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
|
||||||
return <AnimatedWebScreen active={active} {...rest} />;
|
return <AnimatedWebScreen active={active} {...rest} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (enabled && Screens && Screens.screensEnabled()) {
|
if (enabled && Screens && Screens.screensEnabled()) {
|
||||||
// @ts-ignore
|
// @ts-expect-error: stackPresentation is incorrectly marked as required
|
||||||
return <Screens.Screen active={active} {...rest} />;
|
return <Screens.Screen active={active} {...rest} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
25
packages/stack/src/vendor/views/Stack/Card.tsx
vendored
25
packages/stack/src/vendor/views/Stack/Card.tsx
vendored
@@ -9,7 +9,7 @@ import {
|
|||||||
Platform,
|
Platform,
|
||||||
InteractionManager,
|
InteractionManager,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
import Color from 'color';
|
import Color from 'color';
|
||||||
|
|
||||||
import CardSheet from './CardSheet';
|
import CardSheet from './CardSheet';
|
||||||
@@ -22,7 +22,7 @@ import CardAnimationContext from '../../utils/CardAnimationContext';
|
|||||||
import getDistanceForDirection from '../../utils/getDistanceForDirection';
|
import getDistanceForDirection from '../../utils/getDistanceForDirection';
|
||||||
import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
|
import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
|
||||||
import memoize from '../../utils/memoize';
|
import memoize from '../../utils/memoize';
|
||||||
import {
|
import type {
|
||||||
TransitionSpec,
|
TransitionSpec,
|
||||||
StackCardStyleInterpolator,
|
StackCardStyleInterpolator,
|
||||||
GestureDirection,
|
GestureDirection,
|
||||||
@@ -46,7 +46,9 @@ type Props = ViewProps & {
|
|||||||
onGestureCanceled?: () => void;
|
onGestureCanceled?: () => void;
|
||||||
onGestureEnd?: () => void;
|
onGestureEnd?: () => void;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
overlay: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
|
overlay: (props: {
|
||||||
|
style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
|
}) => React.ReactNode;
|
||||||
overlayEnabled: boolean;
|
overlayEnabled: boolean;
|
||||||
shadowEnabled: boolean;
|
shadowEnabled: boolean;
|
||||||
gestureEnabled: boolean;
|
gestureEnabled: boolean;
|
||||||
@@ -83,7 +85,11 @@ export default class Card extends React.Component<Props> {
|
|||||||
shadowEnabled: true,
|
shadowEnabled: true,
|
||||||
gestureEnabled: true,
|
gestureEnabled: true,
|
||||||
gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
|
gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
|
||||||
overlay: ({ style }: { style: StyleProp<ViewStyle> }) =>
|
overlay: ({
|
||||||
|
style,
|
||||||
|
}: {
|
||||||
|
style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
||||||
|
}) =>
|
||||||
style ? (
|
style ? (
|
||||||
<Animated.View pointerEvents="none" style={[styles.overlay, style]} />
|
<Animated.View pointerEvents="none" style={[styles.overlay, style]} />
|
||||||
) : null,
|
) : null,
|
||||||
@@ -489,6 +495,17 @@ export default class Card extends React.Component<Props> {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<CardAnimationContext.Provider value={animationContext}>
|
<CardAnimationContext.Provider value={animationContext}>
|
||||||
|
<Animated.View
|
||||||
|
style={{
|
||||||
|
// This is a dummy style that doesn't actually change anything visually.
|
||||||
|
// Animated needs the animated value to be used somewhere, otherwise things don't update properly.
|
||||||
|
// If we disable animations and hide header, it could end up making the value unused.
|
||||||
|
// So we have this dummy style that will always be used regardless of what else changed.
|
||||||
|
opacity: current,
|
||||||
|
}}
|
||||||
|
// Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
|
||||||
|
collapsable={false}
|
||||||
|
/>
|
||||||
<View pointerEvents="box-none" {...rest}>
|
<View pointerEvents="box-none" {...rest}>
|
||||||
{overlayEnabled ? (
|
{overlayEnabled ? (
|
||||||
<View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
|
<View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||||
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
||||||
import Card from './Card';
|
import Card from './Card';
|
||||||
import HeaderHeightContext from '../../utils/HeaderHeightContext';
|
import HeaderHeightContext from '../../utils/HeaderHeightContext';
|
||||||
|
import HeaderShownContext from '../../utils/HeaderShownContext';
|
||||||
|
import PreviousSceneContext from '../../utils/PreviousSceneContext';
|
||||||
import useTheme from '../../../utils/useTheme';
|
import useTheme from '../../../utils/useTheme';
|
||||||
import {
|
import type {
|
||||||
Route,
|
Route,
|
||||||
Scene,
|
Scene,
|
||||||
Layout,
|
Layout,
|
||||||
@@ -20,7 +22,6 @@ type Props = TransitionPreset & {
|
|||||||
closing: boolean;
|
closing: boolean;
|
||||||
layout: Layout;
|
layout: Layout;
|
||||||
gesture: Animated.Value;
|
gesture: Animated.Value;
|
||||||
previousScene?: Scene<Route<string>>;
|
|
||||||
scene: Scene<Route<string>>;
|
scene: Scene<Route<string>>;
|
||||||
safeAreaInsetTop: number;
|
safeAreaInsetTop: number;
|
||||||
safeAreaInsetRight: number;
|
safeAreaInsetRight: number;
|
||||||
@@ -30,9 +31,10 @@ type Props = TransitionPreset & {
|
|||||||
cardOverlayEnabled?: boolean;
|
cardOverlayEnabled?: boolean;
|
||||||
cardShadowEnabled?: boolean;
|
cardShadowEnabled?: boolean;
|
||||||
cardStyle?: StyleProp<ViewStyle>;
|
cardStyle?: StyleProp<ViewStyle>;
|
||||||
getPreviousRoute: (props: {
|
getPreviousScene: (props: {
|
||||||
route: Route<string>;
|
route: Route<string>;
|
||||||
}) => Route<string> | undefined;
|
index: number;
|
||||||
|
}) => Scene<Route<string>> | undefined;
|
||||||
getFocusedRoute: () => Route<string>;
|
getFocusedRoute: () => Route<string>;
|
||||||
renderHeader: (props: HeaderContainerProps) => React.ReactNode;
|
renderHeader: (props: HeaderContainerProps) => React.ReactNode;
|
||||||
renderScene: (props: { route: Route<string> }) => React.ReactNode;
|
renderScene: (props: { route: Route<string> }) => React.ReactNode;
|
||||||
@@ -54,8 +56,8 @@ type Props = TransitionPreset & {
|
|||||||
gestureVelocityImpact?: number;
|
gestureVelocityImpact?: number;
|
||||||
mode: StackCardMode;
|
mode: StackCardMode;
|
||||||
headerMode: StackHeaderMode;
|
headerMode: StackHeaderMode;
|
||||||
headerShown?: boolean;
|
headerShown: boolean;
|
||||||
headerTransparent?: boolean;
|
hasAbsoluteHeader: boolean;
|
||||||
headerHeight: number;
|
headerHeight: number;
|
||||||
onHeaderHeightChange: (props: {
|
onHeaderHeightChange: (props: {
|
||||||
route: Route<string>;
|
route: Route<string>;
|
||||||
@@ -79,13 +81,13 @@ function CardContainer({
|
|||||||
gestureEnabled,
|
gestureEnabled,
|
||||||
gestureResponseDistance,
|
gestureResponseDistance,
|
||||||
gestureVelocityImpact,
|
gestureVelocityImpact,
|
||||||
getPreviousRoute,
|
getPreviousScene,
|
||||||
getFocusedRoute,
|
getFocusedRoute,
|
||||||
mode,
|
mode,
|
||||||
headerMode,
|
headerMode,
|
||||||
headerShown,
|
headerShown,
|
||||||
headerStyleInterpolator,
|
headerStyleInterpolator,
|
||||||
headerTransparent,
|
hasAbsoluteHeader,
|
||||||
headerHeight,
|
headerHeight,
|
||||||
onHeaderHeightChange,
|
onHeaderHeightChange,
|
||||||
index,
|
index,
|
||||||
@@ -97,7 +99,6 @@ function CardContainer({
|
|||||||
onPageChangeStart,
|
onPageChangeStart,
|
||||||
onTransitionEnd,
|
onTransitionEnd,
|
||||||
onTransitionStart,
|
onTransitionStart,
|
||||||
previousScene,
|
|
||||||
renderHeader,
|
renderHeader,
|
||||||
renderScene,
|
renderScene,
|
||||||
safeAreaInsetBottom,
|
safeAreaInsetBottom,
|
||||||
@@ -145,8 +146,7 @@ function CardContainer({
|
|||||||
);
|
);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
// `addListener` may not exist on web and older versions of React Native
|
// @ts-expect-error: AnimatedInterpolation optionally has addListener, but the type defs don't think so
|
||||||
// @ts-ignore
|
|
||||||
const listener = scene.progress.next?.addListener?.(
|
const listener = scene.progress.next?.addListener?.(
|
||||||
({ value }: { value: number }) => {
|
({ value }: { value: number }) => {
|
||||||
setPointerEvents(value <= EPSILON ? 'box-none' : 'none');
|
setPointerEvents(value <= EPSILON ? 'box-none' : 'none');
|
||||||
@@ -155,12 +155,16 @@ function CardContainer({
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (listener) {
|
if (listener) {
|
||||||
// @ts-ignore
|
// @ts-expect-error: AnimatedInterpolation optionally has removedListener, but the type defs don't think so
|
||||||
scene.progress.next?.removeListener?.(listener);
|
scene.progress.next?.removeListener?.(listener);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [pointerEvents, scene.progress.next]);
|
}, [pointerEvents, scene.progress.next]);
|
||||||
|
|
||||||
|
const isParentHeaderShown = React.useContext(HeaderShownContext);
|
||||||
|
const isCurrentHeaderShown = headerMode !== 'none' && headerShown !== false;
|
||||||
|
const previousScene = getPreviousScene({ route: scene.route, index });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
index={index}
|
index={index}
|
||||||
@@ -188,19 +192,21 @@ function CardContainer({
|
|||||||
importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
|
importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
|
||||||
pointerEvents={active ? 'box-none' : pointerEvents}
|
pointerEvents={active ? 'box-none' : pointerEvents}
|
||||||
pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
|
pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
|
||||||
containerStyle={
|
containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
|
||||||
headerMode === 'float' && !headerTransparent && headerShown !== false
|
contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
|
||||||
? { marginTop: headerHeight }
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
|
|
||||||
style={StyleSheet.absoluteFill}
|
style={StyleSheet.absoluteFill}
|
||||||
>
|
>
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<View style={styles.scene}>
|
<View style={styles.scene}>
|
||||||
|
<PreviousSceneContext.Provider value={previousScene}>
|
||||||
|
<HeaderShownContext.Provider
|
||||||
|
value={isParentHeaderShown || isCurrentHeaderShown}
|
||||||
|
>
|
||||||
<HeaderHeightContext.Provider value={headerHeight}>
|
<HeaderHeightContext.Provider value={headerHeight}>
|
||||||
{renderScene({ route: scene.route })}
|
{renderScene({ route: scene.route })}
|
||||||
</HeaderHeightContext.Provider>
|
</HeaderHeightContext.Provider>
|
||||||
|
</HeaderShownContext.Provider>
|
||||||
|
</PreviousSceneContext.Provider>
|
||||||
</View>
|
</View>
|
||||||
{headerMode === 'screen'
|
{headerMode === 'screen'
|
||||||
? renderHeader({
|
? renderHeader({
|
||||||
@@ -208,7 +214,7 @@ function CardContainer({
|
|||||||
layout,
|
layout,
|
||||||
insets,
|
insets,
|
||||||
scenes: [previousScene, scene],
|
scenes: [previousScene, scene],
|
||||||
getPreviousRoute,
|
getPreviousScene,
|
||||||
getFocusedRoute,
|
getFocusedRoute,
|
||||||
gestureDirection,
|
gestureDirection,
|
||||||
styleInterpolator: headerStyleInterpolator,
|
styleInterpolator: headerStyleInterpolator,
|
||||||
|
|||||||
163
packages/stack/src/vendor/views/Stack/CardStack.tsx
vendored
163
packages/stack/src/vendor/views/Stack/CardStack.tsx
vendored
@@ -6,12 +6,12 @@ import {
|
|||||||
Dimensions,
|
Dimensions,
|
||||||
Platform,
|
Platform,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
import type { EdgeInsets } from 'react-native-safe-area-context';
|
||||||
import { NavigationState as StackNavigationState } from 'react-navigation';
|
import type { NavigationState as StackNavigationState } from 'react-navigation';
|
||||||
|
|
||||||
import { MaybeScreenContainer, MaybeScreen } from '../Screens';
|
import { MaybeScreenContainer, MaybeScreen } from '../Screens';
|
||||||
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
|
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
|
||||||
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
||||||
import CardContainer from './CardContainer';
|
import CardContainer from './CardContainer';
|
||||||
import {
|
import {
|
||||||
DefaultTransition,
|
DefaultTransition,
|
||||||
@@ -19,12 +19,13 @@ import {
|
|||||||
} from '../../TransitionConfigs/TransitionPresets';
|
} from '../../TransitionConfigs/TransitionPresets';
|
||||||
import { forNoAnimation as forNoAnimationHeader } from '../../TransitionConfigs/HeaderStyleInterpolators';
|
import { forNoAnimation as forNoAnimationHeader } from '../../TransitionConfigs/HeaderStyleInterpolators';
|
||||||
import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
|
import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
|
||||||
|
import HeaderShownContext from '../../utils/HeaderShownContext';
|
||||||
import getDistanceForDirection from '../../utils/getDistanceForDirection';
|
import getDistanceForDirection from '../../utils/getDistanceForDirection';
|
||||||
import {
|
import type {
|
||||||
Route,
|
|
||||||
Layout,
|
Layout,
|
||||||
StackHeaderMode,
|
StackHeaderMode,
|
||||||
StackCardMode,
|
StackCardMode,
|
||||||
|
Route,
|
||||||
Scene,
|
Scene,
|
||||||
StackDescriptorMap,
|
StackDescriptorMap,
|
||||||
StackNavigationOptions,
|
StackNavigationOptions,
|
||||||
@@ -84,9 +85,10 @@ const getHeaderHeights = (
|
|||||||
) => {
|
) => {
|
||||||
return routes.reduce<Record<string, number>>((acc, curr) => {
|
return routes.reduce<Record<string, number>>((acc, curr) => {
|
||||||
const { options = {} } = descriptors[curr.key] || {};
|
const { options = {} } = descriptors[curr.key] || {};
|
||||||
const { height = previous[curr.key] } = StyleSheet.flatten(
|
const style: any = StyleSheet.flatten(options.headerStyle || {});
|
||||||
options.headerStyle || {}
|
|
||||||
);
|
const height =
|
||||||
|
typeof style.height === 'number' ? style.height : previous[curr.key];
|
||||||
|
|
||||||
const safeAreaInsets = {
|
const safeAreaInsets = {
|
||||||
...insets,
|
...insets,
|
||||||
@@ -242,7 +244,7 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
if (
|
if (
|
||||||
oldScene &&
|
oldScene &&
|
||||||
scene.__memo.every((it, i) => {
|
scene.__memo.every((it, i) => {
|
||||||
// @ts-ignore
|
// @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
|
||||||
return oldScene.__memo[i] === it;
|
return oldScene.__memo[i] === it;
|
||||||
})
|
})
|
||||||
) {
|
) {
|
||||||
@@ -300,7 +302,7 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
props.insets,
|
props.insets,
|
||||||
state.descriptors,
|
state.descriptors,
|
||||||
layout,
|
layout,
|
||||||
{}
|
state.headerHeights
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
@@ -335,6 +337,33 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
return state.routes[state.index];
|
return state.routes[state.index];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
private getPreviousScene = ({
|
||||||
|
route,
|
||||||
|
index,
|
||||||
|
}: {
|
||||||
|
route: Route<string>;
|
||||||
|
index: number;
|
||||||
|
}) => {
|
||||||
|
const previousRoute = this.props.getPreviousRoute({ route });
|
||||||
|
|
||||||
|
let previous: Scene<Route<string>> | undefined;
|
||||||
|
|
||||||
|
if (previousRoute) {
|
||||||
|
// The previous scene will be shortly before the current scene in the array
|
||||||
|
// So loop back from current index to avoid looping over the full array
|
||||||
|
for (let j = index - 1; j >= 0; j--) {
|
||||||
|
const s = this.state.scenes[j];
|
||||||
|
|
||||||
|
if (s && s.route.key === previousRoute.key) {
|
||||||
|
previous = s;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return previous;
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
mode,
|
mode,
|
||||||
@@ -345,7 +374,6 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
closingRouteKeys,
|
closingRouteKeys,
|
||||||
onOpenRoute,
|
onOpenRoute,
|
||||||
onCloseRoute,
|
onCloseRoute,
|
||||||
getPreviousRoute,
|
|
||||||
getGesturesEnabled,
|
getGesturesEnabled,
|
||||||
renderHeader,
|
renderHeader,
|
||||||
renderScene,
|
renderScene,
|
||||||
@@ -384,8 +412,57 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
// For modals, usually we want the screen underneath to be visible, so also disable it there
|
// For modals, usually we want the screen underneath to be visible, so also disable it there
|
||||||
const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
|
const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HeaderShownContext.Consumer>
|
||||||
|
{(isParentHeaderShown) => {
|
||||||
|
const isFloatHeaderAbsolute =
|
||||||
|
headerMode === 'float'
|
||||||
|
? this.state.scenes.slice(-2).some((scene) => {
|
||||||
|
const { descriptor } = scene;
|
||||||
|
const options = descriptor ? descriptor.options : {};
|
||||||
|
const {
|
||||||
|
headerTransparent,
|
||||||
|
headerShown = isParentHeaderShown === false,
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
if (headerTransparent || headerShown === false) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
: false;
|
||||||
|
|
||||||
|
const floatingHeader =
|
||||||
|
headerMode === 'float' ? (
|
||||||
|
<React.Fragment key="header">
|
||||||
|
{renderHeader({
|
||||||
|
mode: 'float',
|
||||||
|
layout,
|
||||||
|
insets: { top, right, bottom, left },
|
||||||
|
scenes,
|
||||||
|
getPreviousScene: this.getPreviousScene,
|
||||||
|
getFocusedRoute: this.getFocusedRoute,
|
||||||
|
onContentHeightChange: this.handleHeaderLayout,
|
||||||
|
gestureDirection:
|
||||||
|
focusedOptions.gestureDirection !== undefined
|
||||||
|
? focusedOptions.gestureDirection
|
||||||
|
: defaultTransitionPreset.gestureDirection,
|
||||||
|
styleInterpolator:
|
||||||
|
focusedOptions.headerStyleInterpolator !== undefined
|
||||||
|
? focusedOptions.headerStyleInterpolator
|
||||||
|
: defaultTransitionPreset.headerStyleInterpolator,
|
||||||
|
style: [
|
||||||
|
styles.floating,
|
||||||
|
isFloatHeaderAbsolute && styles.absolute,
|
||||||
|
],
|
||||||
|
})}
|
||||||
|
</React.Fragment>
|
||||||
|
) : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
|
{isFloatHeaderAbsolute ? null : floatingHeader}
|
||||||
<MaybeScreenContainer
|
<MaybeScreenContainer
|
||||||
enabled={isScreensEnabled}
|
enabled={isScreensEnabled}
|
||||||
style={styles.container}
|
style={styles.container}
|
||||||
@@ -406,7 +483,7 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
|
|
||||||
const {
|
const {
|
||||||
safeAreaInsets,
|
safeAreaInsets,
|
||||||
headerShown,
|
headerShown = isParentHeaderShown === false,
|
||||||
headerTransparent,
|
headerTransparent,
|
||||||
cardShadowEnabled,
|
cardShadowEnabled,
|
||||||
cardOverlayEnabled,
|
cardOverlayEnabled,
|
||||||
@@ -470,22 +547,10 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
left: safeAreaInsetLeft = insets.left,
|
left: safeAreaInsetLeft = insets.left,
|
||||||
} = safeAreaInsets || {};
|
} = safeAreaInsets || {};
|
||||||
|
|
||||||
const previousRoute = getPreviousRoute({ route: scene.route });
|
const headerHeight =
|
||||||
|
headerMode !== 'none' && headerShown !== false
|
||||||
let previousScene = scenes[index - 1];
|
? headerHeights[route.key]
|
||||||
|
: 0;
|
||||||
if (previousRoute) {
|
|
||||||
// The previous scene will be shortly before the current scene in the array
|
|
||||||
// So loop back from current index to avoid looping over the full array
|
|
||||||
for (let j = index - 1; j >= 0; j--) {
|
|
||||||
const s = scenes[j];
|
|
||||||
|
|
||||||
if (s && s.route.key === previousRoute.key) {
|
|
||||||
previousScene = s;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MaybeScreen
|
<MaybeScreen
|
||||||
@@ -503,7 +568,6 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
layout={layout}
|
layout={layout}
|
||||||
gesture={gesture}
|
gesture={gesture}
|
||||||
scene={scene}
|
scene={scene}
|
||||||
previousScene={previousScene}
|
|
||||||
safeAreaInsetTop={safeAreaInsetTop}
|
safeAreaInsetTop={safeAreaInsetTop}
|
||||||
safeAreaInsetRight={safeAreaInsetRight}
|
safeAreaInsetRight={safeAreaInsetRight}
|
||||||
safeAreaInsetBottom={safeAreaInsetBottom}
|
safeAreaInsetBottom={safeAreaInsetBottom}
|
||||||
@@ -516,21 +580,25 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
onPageChangeConfirm={onPageChangeConfirm}
|
onPageChangeConfirm={onPageChangeConfirm}
|
||||||
onPageChangeCancel={onPageChangeCancel}
|
onPageChangeCancel={onPageChangeCancel}
|
||||||
gestureResponseDistance={gestureResponseDistance}
|
gestureResponseDistance={gestureResponseDistance}
|
||||||
headerHeight={headerHeights[route.key]}
|
headerHeight={headerHeight}
|
||||||
onHeaderHeightChange={this.handleHeaderLayout}
|
onHeaderHeightChange={this.handleHeaderLayout}
|
||||||
getPreviousRoute={getPreviousRoute}
|
getPreviousScene={this.getPreviousScene}
|
||||||
getFocusedRoute={this.getFocusedRoute}
|
getFocusedRoute={this.getFocusedRoute}
|
||||||
mode={mode}
|
mode={mode}
|
||||||
headerMode={headerMode}
|
headerMode={headerMode}
|
||||||
headerShown={headerShown}
|
headerShown={headerShown}
|
||||||
headerTransparent={headerTransparent}
|
hasAbsoluteHeader={
|
||||||
|
isFloatHeaderAbsolute && !headerTransparent
|
||||||
|
}
|
||||||
renderHeader={renderHeader}
|
renderHeader={renderHeader}
|
||||||
renderScene={renderScene}
|
renderScene={renderScene}
|
||||||
onOpenRoute={onOpenRoute}
|
onOpenRoute={onOpenRoute}
|
||||||
onCloseRoute={onCloseRoute}
|
onCloseRoute={onCloseRoute}
|
||||||
onTransitionStart={onTransitionStart}
|
onTransitionStart={onTransitionStart}
|
||||||
onTransitionEnd={onTransitionEnd}
|
onTransitionEnd={onTransitionEnd}
|
||||||
gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
|
gestureEnabled={
|
||||||
|
index !== 0 && getGesturesEnabled({ route })
|
||||||
|
}
|
||||||
gestureVelocityImpact={gestureVelocityImpact}
|
gestureVelocityImpact={gestureVelocityImpact}
|
||||||
{...transitionConfig}
|
{...transitionConfig}
|
||||||
/>
|
/>
|
||||||
@@ -538,28 +606,12 @@ export default class CardStack extends React.Component<Props, State> {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</MaybeScreenContainer>
|
</MaybeScreenContainer>
|
||||||
{headerMode === 'float'
|
{isFloatHeaderAbsolute ? floatingHeader : null}
|
||||||
? renderHeader({
|
|
||||||
mode: 'float',
|
|
||||||
layout,
|
|
||||||
insets: { top, right, bottom, left },
|
|
||||||
scenes,
|
|
||||||
getPreviousRoute,
|
|
||||||
getFocusedRoute: this.getFocusedRoute,
|
|
||||||
onContentHeightChange: this.handleHeaderLayout,
|
|
||||||
gestureDirection:
|
|
||||||
focusedOptions.gestureDirection !== undefined
|
|
||||||
? focusedOptions.gestureDirection
|
|
||||||
: defaultTransitionPreset.gestureDirection,
|
|
||||||
styleInterpolator:
|
|
||||||
focusedOptions.headerStyleInterpolator !== undefined
|
|
||||||
? focusedOptions.headerStyleInterpolator
|
|
||||||
: defaultTransitionPreset.headerStyleInterpolator,
|
|
||||||
style: styles.floating,
|
|
||||||
})
|
|
||||||
: null}
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
}}
|
||||||
|
</HeaderShownContext.Consumer>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -567,10 +619,13 @@ const styles = StyleSheet.create({
|
|||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
floating: {
|
absolute: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
},
|
},
|
||||||
|
floating: {
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import HeaderContainer, {
|
|||||||
Props as HeaderContainerProps,
|
Props as HeaderContainerProps,
|
||||||
} from '../Header/HeaderContainer';
|
} from '../Header/HeaderContainer';
|
||||||
import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
|
import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
|
||||||
import {
|
import type {
|
||||||
Route,
|
Route,
|
||||||
StackNavigationHelpers,
|
StackNavigationHelpers,
|
||||||
StackNavigationConfig,
|
StackNavigationConfig,
|
||||||
@@ -356,14 +356,16 @@ export default class StackView extends React.Component<Props, State> {
|
|||||||
|
|
||||||
private handleOpenRoute = ({ route }: { route: Route<string> }) => {
|
private handleOpenRoute = ({ route }: { route: Route<string> }) => {
|
||||||
const { state, navigation } = this.props;
|
const { state, navigation } = this.props;
|
||||||
|
const { closingRouteKeys, replacingRouteKeys } = this.state;
|
||||||
|
|
||||||
this.handleTransitionComplete();
|
this.handleTransitionComplete();
|
||||||
|
|
||||||
if (
|
if (
|
||||||
this.state.replacingRouteKeys.every((key) => key !== route.key) &&
|
closingRouteKeys.some((key) => key === route.key) &&
|
||||||
|
replacingRouteKeys.every((key) => key !== route.key) &&
|
||||||
!state.routes.some((r) => r.key === route.key)
|
!state.routes.some((r) => r.key === route.key)
|
||||||
) {
|
) {
|
||||||
// If route isn't present in current state, assume that a close animation was cancelled
|
// If route isn't present in current state, but was closing, assume that a close animation was cancelled
|
||||||
// So we need to add this route back to the state
|
// So we need to add this route back to the state
|
||||||
navigation.dispatch(NavigationActions.navigate(route));
|
navigation.dispatch(NavigationActions.navigate(route));
|
||||||
} else {
|
} else {
|
||||||
@@ -438,6 +440,11 @@ export default class StackView extends React.Component<Props, State> {
|
|||||||
navigation,
|
navigation,
|
||||||
keyboardHandlingEnabled,
|
keyboardHandlingEnabled,
|
||||||
mode = 'card',
|
mode = 'card',
|
||||||
|
headerMode = mode === 'card' && Platform.OS === 'ios'
|
||||||
|
? 'float'
|
||||||
|
: 'screen',
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
descriptors: _,
|
||||||
...rest
|
...rest
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
@@ -448,9 +455,6 @@ export default class StackView extends React.Component<Props, State> {
|
|||||||
closingRouteKeys,
|
closingRouteKeys,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const headerMode =
|
|
||||||
mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<GestureHandlerWrapper style={styles.container}>
|
<GestureHandlerWrapper style={styles.container}>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|||||||
import validateDeprecatedOptions from '../utils/validateDeprecatedOptions';
|
import validateDeprecatedOptions from '../utils/validateDeprecatedOptions';
|
||||||
import validateDeprecatedConfig from '../utils/validateDeprecatedConfig';
|
import validateDeprecatedConfig from '../utils/validateDeprecatedConfig';
|
||||||
import StackViewBase from '../vendor/views/Stack/StackView';
|
import StackViewBase from '../vendor/views/Stack/StackView';
|
||||||
import {
|
import type {
|
||||||
StackNavigationHelpers,
|
StackNavigationHelpers,
|
||||||
StackNavigationConfig,
|
StackNavigationConfig,
|
||||||
StackDescriptorMap,
|
StackDescriptorMap,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"extends": "./tsconfig",
|
"extends": "./tsconfig",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"paths": {}
|
"paths": {},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
{ "path": "../react-navigation" }
|
{ "path": "../react-navigation" }
|
||||||
],
|
],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./lib/typescript"
|
"outDir": "./lib/typescript",
|
||||||
|
"importsNotUsedAsValues": "error",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,17 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [2.9.0](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.13...react-navigation-tabs@2.9.0) (2020-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/tabs/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## [2.8.13](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.12...react-navigation-tabs@2.8.13) (2020-04-30)
|
## [2.8.13](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.12...react-navigation-tabs@2.8.13) (2020-04-30)
|
||||||
|
|
||||||
**Note:** Version bump only for package react-navigation-tabs
|
**Note:** Version bump only for package react-navigation-tabs
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-navigation-tabs",
|
"name": "react-navigation-tabs",
|
||||||
"version": "2.8.13",
|
"version": "2.9.0",
|
||||||
"description": "Tab Navigation components for React Navigation",
|
"description": "Tab Navigation components for React Navigation",
|
||||||
"main": "lib/commonjs/index.js",
|
"main": "lib/commonjs/index.js",
|
||||||
"module": "lib/module/index.js",
|
"module": "lib/module/index.js",
|
||||||
@@ -56,8 +56,8 @@
|
|||||||
"react-native-gesture-handler": "^1.6.0",
|
"react-native-gesture-handler": "^1.6.0",
|
||||||
"react-native-reanimated": "^1.2.0",
|
"react-native-reanimated": "^1.2.0",
|
||||||
"react-native-tab-view": "^2.13.0",
|
"react-native-tab-view": "^2.13.0",
|
||||||
"react-navigation": "^4.3.9",
|
"react-navigation": "^4.4.0",
|
||||||
"typescript": "~3.8.3"
|
"typescript": "^3.9.5"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "*",
|
"react": "*",
|
||||||
|
|||||||
16
yarn.lock
16
yarn.lock
@@ -3202,10 +3202,10 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903"
|
resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903"
|
||||||
integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw==
|
integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw==
|
||||||
|
|
||||||
"@react-navigation/stack@^5.3.6":
|
"@react-navigation/stack@^5.6.0":
|
||||||
version "5.3.6"
|
version "5.6.0"
|
||||||
resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.3.6.tgz#7a1bf2f6b77dd92a0aa7befb4f3263215bed58f5"
|
resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.6.0.tgz#c307559ab6ba380f977f7f74efbe861bcbbdcf4b"
|
||||||
integrity sha512-6uE9pWMa9tdvDSbMV9o6/1cFrT60c2S3CTKIR5mZWJbyanIGFdu/ScbjIvplnG5kLG24rIpc3rtC0FgqTsBVXQ==
|
integrity sha512-e5uU37qgi9cXqOac8P2oFAj+4ZY7dI2kt04jg5+psAYN0Coawk6oyowBpBy6FsMBHMQv/p8J97Hc6eUnTwgzQw==
|
||||||
dependencies:
|
dependencies:
|
||||||
color "^3.1.2"
|
color "^3.1.2"
|
||||||
react-native-iphone-x-helper "^1.2.1"
|
react-native-iphone-x-helper "^1.2.1"
|
||||||
@@ -16708,10 +16708,10 @@ typescript@3.7.3:
|
|||||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
|
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
|
||||||
integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
|
integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
|
||||||
|
|
||||||
typescript@~3.8.3:
|
typescript@^3.9.5:
|
||||||
version "3.8.3"
|
version "3.9.5"
|
||||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
|
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
|
||||||
integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
|
integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
|
||||||
|
|
||||||
ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
|
ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
|
||||||
version "0.7.21"
|
version "0.7.21"
|
||||||
|
|||||||
Reference in New Issue
Block a user