feat: initial implementation of @react-navigation/elements

react-navigation · Jan 29, 2021 · 07ba7a9 · 07ba7a9
1 parent c345ef1
commit 07ba7a9
Show file tree

Hide file tree

Showing 29 changed files with 251 additions and 425 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -13,6 +13,7 @@
       "@react-navigation/bottom-tabs",
       "@react-navigation/material-top-tabs",
       "@react-navigation/material-bottom-tabs",
+      "@react-navigation/elements",
       "@react-navigation/devtools"
     ]
   },

diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -8,11 +8,9 @@ import {
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
+import { SafeAreaProviderCompat } from '@react-navigation/elements';
 
-import SafeAreaProviderCompat, {
-  initialMetrics,
-} from './SafeAreaProviderCompat';
-import ResourceSavingScene from './ResourceSavingScene';
+import ScreenFallback from './ScreenFallback';
 import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
 import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
 import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
@@ -73,14 +71,14 @@ export default class BottomTabView extends React.Component<Props, State> {
 
     const { state, descriptors } = this.props;
 
-    const dimensions = initialMetrics.frame;
+    const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
     const tabBarHeight = getTabBarHeight({
       state,
       descriptors,
       dimensions,
       layout: { width: dimensions.width, height: 0 },
       insets: {
-        ...initialMetrics.insets,
+        ...SafeAreaProviderCompat.initialMetrics.insets,
         ...props.safeAreaInsets,
       },
       style: descriptors[state.routes[state.index].key].options.tabBarStyle,
@@ -164,10 +162,10 @@ export default class BottomTabView extends React.Component<Props, State> {
               }
 
               return (
-                <ResourceSavingScene
+                <ScreenFallback
                   key={route.key}
                   style={StyleSheet.absoluteFill}
-                  isVisible={isFocused}
+                  visible={isFocused}
                   enabled={detachInactiveScreens}
                 >
                   <SceneContent
@@ -178,7 +176,7 @@ export default class BottomTabView extends React.Component<Props, State> {
                       {descriptor.render()}
                     </BottomTabBarHeightContext.Provider>
                   </SceneContent>
-                </ResourceSavingScene>
+                </ScreenFallback>
               );
             })}
           </ScreenContainer>

diff --git a/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx b/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx
diff --git a/packages/bottom-tabs/src/views/ScreenFallback.tsx b/packages/bottom-tabs/src/views/ScreenFallback.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Platform, StyleProp, ViewStyle } from 'react-native';
+import {
+  Screen,
+  screensEnabled,
+  // @ts-ignore
+  shouldUseActivityState,
+} from 'react-native-screens';
+import { ResourceSavingScene } from '@react-navigation/elements';
+
+type Props = {
+  visible: boolean;
+  children: React.ReactNode;
+  enabled: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+export default function ScreenFallback({ visible, children, ...rest }: Props) {
+  // react-native-screens is buggy on web
+  if (screensEnabled?.() && Platform.OS !== 'web') {
+    if (shouldUseActivityState) {
+      return (
+        <Screen activityState={visible ? 2 : 0} {...rest}>
+          {children}
+        </Screen>
+      );
+    } else {
+      return (
+        <Screen active={visible ? 1 : 0} {...rest}>
+          {children}
+        </Screen>
+      );
+    }
+  }
+
+  return (
+    <ResourceSavingScene visible={visible} {...rest}>
+      {children}
+    </ResourceSavingScene>
+  );
+}
diff --git a/packages/bottom-tabs/tsconfig.json b/packages/bottom-tabs/tsconfig.json
@@ -3,7 +3,8 @@
   "references": [
     { "path": "../core" },
     { "path": "../routers" },
-    { "path": "../native" }
+    { "path": "../native" },
+    { "path": "../elements" }
   ],
   "compilerOptions": {
     "outDir": "./lib/typescript"

diff --git a/packages/drawer/package.json b/packages/drawer/package.json
@@ -45,6 +45,7 @@
     "color": "^3.1.3"
   },
   "devDependencies": {
+    "@react-navigation/elements": "^1.0.0",
     "@react-navigation/native": "^5.8.9",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",

diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -8,9 +8,9 @@ import {
   TextStyle,
   Platform,
 } from 'react-native';
+import { PlatformPressable } from '@react-navigation/elements';
 import { Link, useTheme } from '@react-navigation/native';
 import Color from 'color';
-import TouchableItem from './TouchableItem';
 
 type Props = {
   /**
@@ -68,7 +68,7 @@ type Props = {
    *
    * @platform ios
    */
-  pressOpacity?: string;
+  pressOpacity?: number;
   /**
    * Style object for the label element.
    */
@@ -87,7 +87,7 @@ const Touchable = ({
   accessibilityRole,
   delayPressIn,
   ...rest
-}: React.ComponentProps<typeof TouchableItem> & {
+}: React.ComponentProps<typeof PlatformPressable> & {
   to?: string;
   children: React.ReactNode;
   onPress?: () => void;
@@ -115,14 +115,14 @@ const Touchable = ({
     );
   } else {
     return (
-      <TouchableItem
+      <PlatformPressable
         {...rest}
         accessibilityRole={accessibilityRole}
         delayPressIn={delayPressIn}
         onPress={onPress}
       >
         <View style={style}>{children}</View>
-      </TouchableItem>
+      </PlatformPressable>
     );
   }
 };

diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx
@@ -18,10 +18,10 @@ import {
   useTheme,
   ParamListBase,
 } from '@react-navigation/native';
+import { SafeAreaProviderCompat } from '@react-navigation/elements';
 
 import { GestureHandlerRootView } from './GestureHandler';
-import SafeAreaProviderCompat from './SafeAreaProviderCompat';
-import ResourceSavingScene from './ResourceSavingScene';
+import ScreenFallback from './ScreenFallback';
 import Header from './Header';
 import DrawerContent from './DrawerContent';
 import Drawer from './Drawer';
@@ -173,10 +173,10 @@ function DrawerViewBase({
           } = descriptor.options;
 
           return (
-            <ResourceSavingScene
+            <ScreenFallback
               key={route.key}
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
-              isVisible={isFocused}
+              visible={isFocused}
               enabled={detachInactiveScreens}
             >
               {headerShown ? (
@@ -192,7 +192,7 @@ function DrawerViewBase({
                 </NavigationContext.Provider>
               ) : null}
               {descriptor.render()}
-            </ResourceSavingScene>
+            </ScreenFallback>
           );
         })}
       </ScreenContainer>

diff --git a/packages/drawer/src/views/Header.tsx b/packages/drawer/src/views/Header.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Text, View, Image, StyleSheet, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PlatformPressable } from '@react-navigation/elements';
 import { DrawerActions, useTheme } from '@react-navigation/native';
-import TouchableItem from './TouchableItem';
 import type { Layout, DrawerHeaderProps } from '../types';
 
 export const getDefaultHeaderHeight = (
@@ -67,7 +67,7 @@ export default function HeaderSegment({
   const leftButton = headerLeft ? (
     headerLeft({ tintColor: headerTintColor })
   ) : (
-    <TouchableItem
+    <PlatformPressable
       accessible
       accessibilityRole="button"
       accessibilityLabel={headerLeftAccessibilityLabel}
@@ -89,7 +89,7 @@ export default function HeaderSegment({
         source={require('./assets/toggle-drawer-icon.png')}
         fadeDuration={0}
       />
-    </TouchableItem>
+    </PlatformPressable>
   );
   const rightButton = headerRight
     ? headerRight({ tintColor: headerTintColor })

diff --git a/packages/drawer/src/views/ResourceSavingScene.tsx b/packages/drawer/src/views/ResourceSavingScene.tsx