diff --git a/example/package.json b/example/package.json index 2960df917..fca131e81 100644 --- a/example/package.json +++ b/example/package.json @@ -25,6 +25,7 @@ "babel-plugin-module-resolver": "^3.2.0" }, "resolutions": { - "react-native-safe-area-view": "0.14.6" + "react-native-safe-area-view": "0.14.6", + "react-native-screens": "1.0.0-alpha.23" } } diff --git a/example/yarn.lock b/example/yarn.lock index 9ffb56ec6..8ced5a29d 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -1778,6 +1778,11 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" +debounce@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" + integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -4664,10 +4669,12 @@ react-native-safe-module@^1.1.0: dependencies: dedent "^0.6.0" -react-native-screens@1.0.0-alpha.22, "react-native-screens@^1.0.0 || ^1.0.0-alpha": - version "1.0.0-alpha.22" - resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz#7a120377b52aa9bbb94d0b8541a014026be9289b" - integrity sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA== +react-native-screens@1.0.0-alpha.22, react-native-screens@1.0.0-alpha.23, "react-native-screens@^1.0.0 || ^1.0.0-alpha": + version "1.0.0-alpha.23" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.23.tgz#25d7ea4d11bda4fcde2d1da7ae50271c6aa636e0" + integrity sha512-tOxHGQUN83MTmQB4ghoQkibqOdGiX4JQEmeyEv96MKWO/x8T2PJv84ECUos9hD3blPRQwVwSpAid1PPPhrVEaw== + dependencies: + debounce "^1.2.0" react-native-svg@9.4.0: version "9.4.0" diff --git a/package.json b/package.json index 9213432b3..abf5a634c 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "prepare": "bob build", "release": "release-it", "example": "yarn --cwd example", - "bootstrap": "yarn && yarn example" + "bootstrap": "yarn example && yarn" }, "publishConfig": { "registry": "https://registry.npmjs.org/" diff --git a/src/views/Stack/Stack.tsx b/src/views/Stack/Stack.tsx index ff970b945..cf1719ccd 100755 --- a/src/views/Stack/Stack.tsx +++ b/src/views/Stack/Stack.tsx @@ -8,7 +8,7 @@ import { ViewProps, } from 'react-native'; import Animated from 'react-native-reanimated'; -import { ScreenContainer, NativeScreen } from 'react-native-screens'; +import * as Screens from 'react-native-screens'; // Import with * as to prevent getters being called import { getDefaultHeaderHeight } from '../Header/HeaderSegment'; import { Props as HeaderContainerProps } from '../Header/HeaderContainer'; import StackItem from './StackItem'; @@ -66,26 +66,41 @@ type State = { const dimensions = Dimensions.get('window'); const layout = { width: dimensions.width, height: dimensions.height }; -const AnimatedScreen = Animated.createAnimatedComponent( - NativeScreen -) as React.ComponentType< +let AnimatedScreen: React.ComponentType< ViewProps & { active: number | Animated.Node } >; -const MaybeScreenContainer = Platform.OS === 'ios' ? View : ScreenContainer; +const MaybeScreenContainer = ({ + enabled, + ...rest +}: ViewProps & { + enabled: boolean; + children: React.ReactNode; +}) => { + if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) { + return ; + } + + return ; +}; const MaybeScreen = ({ + enabled, active, ...rest }: ViewProps & { + enabled: boolean; active: number | Animated.Node; children: React.ReactNode; }) => { - if (Platform.OS === 'ios') { - return ; + if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) { + AnimatedScreen = + AnimatedScreen || Animated.createAnimatedComponent(Screens.NativeScreen); + + return ; } - return ; + return ; }; const { cond, eq } = Animated; @@ -300,6 +315,7 @@ export default class Stack extends React.Component { return ( @@ -340,6 +356,7 @@ export default class Stack extends React.Component {