From 8f2b95ca9786aa91e4c7f0e70a009b93796a858e Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sun, 9 May 2021 06:03:38 +0200 Subject: [PATCH] chore: drop support for older versions of react-native-screens --- .../bottom-tabs/src/views/ScreenFallback.tsx | 25 +++------- packages/drawer/src/views/ScreenFallback.tsx | 25 +++------- packages/stack/src/views/Screens.tsx | 12 ++--- packages/stack/src/views/Stack/CardStack.tsx | 48 +++++++------------ 4 files changed, 31 insertions(+), 79 deletions(-) diff --git a/packages/bottom-tabs/src/views/ScreenFallback.tsx b/packages/bottom-tabs/src/views/ScreenFallback.tsx index ed3dabfb..1435aa04 100644 --- a/packages/bottom-tabs/src/views/ScreenFallback.tsx +++ b/packages/bottom-tabs/src/views/ScreenFallback.tsx @@ -1,11 +1,6 @@ import * as React from 'react'; import { Platform, StyleProp, ViewStyle } from 'react-native'; -import { - Screen, - screensEnabled, - // @ts-ignore - shouldUseActivityState, -} from 'react-native-screens'; +import { Screen, screensEnabled } from 'react-native-screens'; import { ResourceSavingView } from '@react-navigation/elements'; type Props = { @@ -18,19 +13,11 @@ type Props = { export default function ScreenFallback({ visible, children, ...rest }: Props) { // react-native-screens is buggy on web if (screensEnabled?.() && Platform.OS !== 'web') { - if (shouldUseActivityState) { - return ( - - {children} - - ); - } else { - return ( - - {children} - - ); - } + return ( + + {children} + + ); } return ( diff --git a/packages/drawer/src/views/ScreenFallback.tsx b/packages/drawer/src/views/ScreenFallback.tsx index ed3dabfb..1435aa04 100644 --- a/packages/drawer/src/views/ScreenFallback.tsx +++ b/packages/drawer/src/views/ScreenFallback.tsx @@ -1,11 +1,6 @@ import * as React from 'react'; import { Platform, StyleProp, ViewStyle } from 'react-native'; -import { - Screen, - screensEnabled, - // @ts-ignore - shouldUseActivityState, -} from 'react-native-screens'; +import { Screen, screensEnabled } from 'react-native-screens'; import { ResourceSavingView } from '@react-navigation/elements'; type Props = { @@ -18,19 +13,11 @@ type Props = { export default function ScreenFallback({ visible, children, ...rest }: Props) { // react-native-screens is buggy on web if (screensEnabled?.() && Platform.OS !== 'web') { - if (shouldUseActivityState) { - return ( - - {children} - - ); - } else { - return ( - - {children} - - ); - } + return ( + + {children} + + ); } return ( diff --git a/packages/stack/src/views/Screens.tsx b/packages/stack/src/views/Screens.tsx index e6682e13..6c13ed63 100644 --- a/packages/stack/src/views/Screens.tsx +++ b/packages/stack/src/views/Screens.tsx @@ -9,8 +9,6 @@ try { // Ignore } -export const shouldUseActivityState = Screens?.shouldUseActivityState; - // So we use our custom implementation to handle a11y better class WebScreen extends React.Component< ViewProps & { @@ -65,13 +63,9 @@ export const MaybeScreen = ({ } if (enabled && Screens?.screensEnabled()) { - if (shouldUseActivityState) { - return ( - - ); - } else { - return ; - } + return ( + + ); } return ; diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx index b6a0582d..2dd4d73a 100755 --- a/packages/stack/src/views/Stack/CardStack.tsx +++ b/packages/stack/src/views/Stack/CardStack.tsx @@ -18,11 +18,7 @@ import { Background, } from '@react-navigation/elements'; -import { - MaybeScreenContainer, - MaybeScreen, - shouldUseActivityState, -} from '../Screens'; +import { MaybeScreenContainer, MaybeScreen } from '../Screens'; import type { Props as HeaderContainerProps } from '../Header/HeaderContainer'; import CardContainer from './CardContainer'; import { @@ -467,9 +463,7 @@ export default class CardStack extends React.Component { onGestureCancel, // Enable on new versions of `react-native-screens` // On older versions of `react-native-screens`, there's an issue with screens not being responsive to user interaction. - detachInactiveScreens = Platform.OS === 'web' - ? true - : shouldUseActivityState ?? false, + detachInactiveScreens = true, } = this.props; const { scenes, layout, gestures, headerHeights } = this.state; @@ -551,34 +545,24 @@ export default class CardStack extends React.Component { // For the old implementation, it stays the same it was let isScreenActive: Animated.AnimatedInterpolation | 2 | 1 | 0 = 1; - if (shouldUseActivityState || Platform.OS === 'web') { - if (index < self.length - activeScreensLimit - 1) { - // screen should be inactive because it is too deep in the stack - isScreenActive = STATE_INACTIVE; - } else { - const sceneForActivity = scenes[self.length - 1]; - const outputValue = - index === self.length - 1 - ? STATE_ON_TOP // the screen is on top after the transition - : index >= self.length - activeScreensLimit - ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit - : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit - isScreenActive = sceneForActivity - ? sceneForActivity.progress.current.interpolate({ - inputRange: [0, 1 - EPSILON, 1], - outputRange: [1, 1, outputValue], - extrapolate: 'clamp', - }) - : STATE_TRANSITIONING_OR_BELOW_TOP; - } + if (index < self.length - activeScreensLimit - 1) { + // screen should be inactive because it is too deep in the stack + isScreenActive = STATE_INACTIVE; } else { - isScreenActive = scene.progress.next - ? scene.progress.next.interpolate({ + const sceneForActivity = scenes[self.length - 1]; + const outputValue = + index === self.length - 1 + ? STATE_ON_TOP // the screen is on top after the transition + : index >= self.length - activeScreensLimit + ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit + : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit + isScreenActive = sceneForActivity + ? sceneForActivity.progress.current.interpolate({ inputRange: [0, 1 - EPSILON, 1], - outputRange: [1, 1, 0], + outputRange: [1, 1, outputValue], extrapolate: 'clamp', }) - : 1; + : STATE_TRANSITIONING_OR_BELOW_TOP; } const {