Added @react-navigation/native v6 (#7)

* react-navigation rnative * rnative react-navigation init * init react native with navigation * xpo react navigation testing * expo working again - needed react 17.0.2 * working with newer react native version * working build with react native bump in xpo * read me update
Enricopv · Dec 30, 2021 · f09ad3f · f09ad3f
1 parent 3808b9b
commit f09ad3f
Show file tree

Hide file tree

Showing 25 changed files with 668 additions and 625 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,13 @@
 - Shout out to this [gist](https://gist.github.com/sibelius/8ca62bab78ee9644ae5caffb9f1b1ef4) for making life easier.
 - Thanks to https://turborepo.org/ for being rad
 
+
+## Notes
+- The expo project runs on expo sdk 43 because sdk 44 has bugs with @react-navigation (more particulary react-native-screens I think). Once sdk 44 is more stable with @react-navigation, I will bump it.
+
+- xpo is running react-native: 66.4, which is not the version that expo sdk 43 is supposed to run with (64.3). However I found that it v64.3 not work with v6 of `@react-navigation` otherwise.
+
+
 # Turborepo Boiler Plate
 
 - Includes Next.js, Remix, Expo, and React Native projects
@@ -10,7 +17,9 @@
     - docs: Next.js
     - blog: Remix
     - rnative: React Native
+      - @react-navigation/native-stack example
     - xpo: Expo
+      - @react-navigation/native-stack example
   - packages
     - ui: react lib
     - ui-native: react-native lib
@@ -19,7 +28,7 @@
 
 # How to use
 
-## NOTE FOR REACT NATIVE:
+### NOTE FOR REACT NATIVE:
 
 1. In the scripts of `apps/rnative/package.json` you will want to make sure that `dev` is set to run either ios or android depending on your setup. By default it runs
 ios.
@@ -37,12 +46,16 @@ scripts": {
     "clean": "rm -rf .turbo && rm -rf node_modules"
   },
 ```
+### Run commands:
+`yarn dev` runs all the projects in a development state as this project copies the kitchen-sink example from turbo. You will want to edit the `dev` command of a project's `package.json` to do something else or remote it entirely. You may want look at Turbo's docs under --scope for more control.
 
 - Clone: `git clone https://github.com/Enricopv/turbo-boilerplate.git {name}`
 - Install: `yarn`
 - Run: `yarn dev`
 
-## Long jest-haste-map Issue
 
-If you are running into ths problem, try running `yarn clean:watchman`. 
+
+## Troubleshooting
+<b>Long jest-haste-map Issue</b>
+- If you are running into ths problem, try running `yarn clean:watchman`.
 
diff --git a/apps/rnative/App.tsx b/apps/rnative/App.tsx
@@ -8,119 +8,24 @@
  * @format
  */
 
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import * as React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-import {Button} from 'ui-native';
-import * as requestWrapper from 'bp-request';
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import DeafultReactNativeScreen from './src/screens/DefaultReactNativeScreen';
+import DetailsScreen from './src/screens/DetailsScreen';
+import {RootStackParamList} from './src/types/navigation-types';
 
-const Section: React.FC<{
-  title: string;
-}> = ({children, title}) => {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-};
-
-const App = () => {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-  React.useEffect(() => {
-    requestWrapper
-      .get<{}, {data: {abilities: any}}>(
-        'https://pokeapi.co/api/v2/pokemon/ditto',
-      )
-      .then(result => {
-        console.log('result', result?.data?.abilities);
-      });
-  }, []);
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
+function App() {
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <Button />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={DeafultReactNativeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
-};
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
+}
 
 export default App;
diff --git a/apps/rnative/android/app/src/main/java/com/rnative/MainActivity.java b/apps/rnative/android/app/src/main/java/com/rnative/MainActivity.java
@@ -2,6 +2,12 @@
 
 import com.facebook.react.ReactActivity;
 
+/**
+   * Added for react-navigation
+   * https://reactnavigation.org/docs/getting-started/
+   */
+import android.os.Bundle;
+
 public class MainActivity extends ReactActivity {
 
   /**
@@ -12,4 +18,13 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "rnative";
   }
+
+  /**
+   * Added for react-navigation
+   * https://reactnavigation.org/docs/getting-started/
+   */
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
 }
diff --git a/apps/rnative/ios/Podfile.lock b/apps/rnative/ios/Podfile.lock
@@ -272,6 +272,8 @@ PODS:
   - React-jsinspector (0.66.4)
   - React-logger (0.66.4):
     - glog
+  - react-native-safe-area-context (3.3.2):
+    - React-Core
   - React-perflogger (0.66.4)
   - React-RCTActionSheet (0.66.4):
     - React-Core/RCTActionSheetHeaders (= 0.66.4)
@@ -337,6 +339,9 @@ PODS:
     - React-jsi (= 0.66.4)
     - React-logger (= 0.66.4)
     - React-perflogger (= 0.66.4)
+  - RNScreens (3.10.1):
+    - React-Core
+    - React-RCTImage
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -382,6 +387,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -394,6 +400,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -448,6 +455,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -472,6 +481,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -506,6 +517,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 94ce921e1d8ce7023366873ec371f3441383b396
   React-jsinspector: d0374f7509d407d2264168b6d0fad0b54e300b85
   React-logger: 933f80c97c633ee8965d609876848148e3fef438
+  react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   React-perflogger: 93075d8931c32cd1fce8a98c15d2d5ccc4d891bd
   React-RCTActionSheet: 7d3041e6761b4f3044a37079ddcb156575fb6d89
   React-RCTAnimation: 743e88b55ac62511ae5c2e22803d4f503f2a3a13
@@ -518,6 +530,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: e3ffca672dd3772536cb844274094b0e2c31b187
   React-runtimeexecutor: dec32ee6f2e2a26e13e58152271535fadff5455a
   ReactCommon: 57b69f6383eafcbd7da625bfa6003810332313c4
+  RNScreens: 522705f2e5c9d27efb17f24aceb2bf8335bc7b8e
   Yoga: e7dc4e71caba6472ff48ad7d234389b91dadc280
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

diff --git a/apps/rnative/metro.config.js b/apps/rnative/metro.config.js
@@ -33,7 +33,7 @@ const config = {
 };
 
 /**
- * Get monorepo depencies, flagged by a "*"
+ * Get monorepo dependencies, flagged by a "*"
  */
 
 const monoRepoFolders = workspacePackage.workspaces.packages.map(pkg =>
@@ -111,6 +111,15 @@ config.resolver.blockList = [...unusedRepoPackages, ...usedRepoPackages];
  */
 config.resolver.extraNodeModules = {
   'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+  '@react-navigation/native': path.resolve(
+    __dirname,
+    '../../node_modules/@react-navigation/native',
+  ),
+
+  '@react-navigation/native-stack': path.resolve(
+    __dirname,
+    '../../node_modules/@react-navigation/native-stack',
+  ),
 };
 
 module.exports = config;
diff --git a/apps/rnative/package.json b/apps/rnative/package.json
@@ -12,9 +12,13 @@
     "clean": "rm -rf .turbo && rm -rf node_modules"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native-stack": "^6.2.5",
     "bp-request": "*",
     "react": "17.0.2",
     "react-native": "0.66.4",
+    "react-native-safe-area-context": "^3.3.2",
+    "react-native-screens": "^3.10.1",
     "ui-native": "*"
   },
   "devDependencies": {

diff --git a/apps/rnative/src/components/StatusBar.tsx b/apps/rnative/src/components/StatusBar.tsx
@@ -0,0 +1,22 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * Generated with the TypeScript template
+ * https://github.com/react-native-community/react-native-template-typescript
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import {StatusBar as RNStatusBar, useColorScheme} from 'react-native';
+
+const StatusBar = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <RNStatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+  );
+};
+
+export default StatusBar;
diff --git a/apps/rnative/src/screens/DefaultReactNativeScreen/components/Section.tsx b/apps/rnative/src/screens/DefaultReactNativeScreen/components/Section.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {Text, useColorScheme, View} from 'react-native';
+import {Colors} from 'react-native/Libraries/NewAppScreen';
+import {styles} from './styles';
+
+type SectionProps = {
+  title?: string;
+  children?: React.ReactNode;
+};
+
+export const Section: React.FC<SectionProps> = ({children, title}) => {
+  const isDarkMode = useColorScheme() === 'dark';
+  return (
+    <View style={styles.sectionContainer}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: isDarkMode ? Colors.white : Colors.black,
+          },
+        ]}>
+        {title}
+      </Text>
+      <Text
+        style={[
+          styles.sectionDescription,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+};