initial commit

reactnav5-tab-navigator/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

reactnav5-tab-navigator/.gitignore

@@ -0,0 +1,16 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store
+
+article.md

reactnav5-tab-navigator/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import MainStackNavigator from './src/navigation/MainStackNavigator'
+
+export default function App() {
+  return <MainStackNavigator />
+}

reactnav5-tab-navigator/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "Blank Template",
+    "slug": "reactnav5",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

reactnav5-tab-navigator/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

reactnav5-tab-navigator/package.json

@@ -0,0 +1,29 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "0.1.5",
+    "@react-navigation/native": "5.0.0",
+    "@react-navigation/stack": "5.0.0",
+    "expo": "~36.0.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
+    "react-native-screens": "2.0.0-alpha.12",
+    "react-native-web": "~0.11.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "babel-preset-expo": "~8.0.0"
+  },
+  "private": true
+}

reactnav5-tab-navigator/src/navigation/MainStackNavigator.js

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
+
+import Home from '../screens/Home'
+import Detail from '../screens/Detail'
+import Settings from '../screens/Settings'
+
+const Stack = createStackNavigator()
+
+function MainStackNavigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName='Home'
+        screenOptions={{
+          gestureEnabled: true,
+          headerStyle: {
+            backgroundColor: '#101010'
+          },
+          headerTitleStyle: {
+            fontWeight: 'bold'
+          },
+          headerTintColor: '#ffd700',
+          headerBackTitleVisible: false
+        }}
+        headerMode='float'>
+        <Stack.Screen
+          name='Home'
+          component={Home}
+          options={{ title: 'Home Screen' }}
+        />
+        <Stack.Screen
+          name='Detail'
+          component={Detail}
+          options={({ route }) => ({
+            title: route.params.item.name
+          })}
+        />
+        <Stack.Screen
+          name='Settings'
+          component={Settings}
+          options={{ title: 'Settings' }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
+}
+
+export default MainStackNavigator

reactnav5-tab-navigator/src/screens/Detail.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
+
+function Detail(props) {
+  const { route, navigation } = props
+  const { item } = route.params
+  const { name, home, species } = item
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Detail Screen</Text>
+      <View style={styles.card}>
+        <Text style={styles.cardText}>Name: {name}</Text>
+        <Text style={styles.cardText}>Home Planet: {home}</Text>
+        <Text style={styles.cardText}>Species: {species}</Text>
+      </View>
+      <TouchableOpacity
+        style={styles.buttonContainer}
+        onPress={() => navigation.navigate('Settings')}>
+        <Text style={styles.buttonText}>Go to Settings</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ebebeb'
+  },
+  text: {
+    color: '#101010',
+    fontSize: 24,
+    fontWeight: 'bold'
+  },
+  card: {
+    width: 350,
+    height: 100,
+    borderRadius: 10,
+    backgroundColor: '#101010',
+    margin: 10,
+    padding: 10,
+    alignItems: 'center'
+  },
+  cardText: {
+    fontSize: 18,
+    color: '#ffd700',
+    marginBottom: 5
+  },
+  buttonContainer: {
+    backgroundColor: '#222',
+    borderRadius: 5,
+    padding: 10,
+    margin: 20
+  },
+  buttonText: {
+    fontSize: 20,
+    color: '#fff'
+  }
+})
+
+export default Detail

reactnav5-tab-navigator/src/screens/Home.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
+
+const character = {
+  name: 'Luke Skywalker',
+  home: 'Tatooine',
+  species: 'human'
+}
+
+function Home(props) {
+  const { navigation } = props
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Home Screen</Text>
+      <TouchableOpacity
+        style={styles.buttonContainer}
+        onPress={() => navigation.navigate('Detail', { item: character })}>
+        <Text style={styles.buttonText}>Who is {character.name}?</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ebebeb'
+  },
+  text: {
+    color: '#101010',
+    fontSize: 24,
+    fontWeight: 'bold'
+  },
+  buttonContainer: {
+    backgroundColor: '#222',
+    borderRadius: 5,
+    padding: 10,
+    margin: 20
+  },
+  buttonText: {
+    fontSize: 20,
+    color: '#fff'
+  }
+})
+
+export default Home

reactnav5-tab-navigator/src/screens/Settings.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
+
+function Settings(props) {
+  const { navigation } = props
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Settings</Text>
+      <TouchableOpacity
+        style={styles.buttonContainer}
+        onPress={() => navigation.popToTop()}>
+        <Text style={styles.buttonText}>Go to Home</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ebebeb'
+  },
+  text: {
+    color: '#101010',
+    fontSize: 24,
+    fontWeight: 'bold'
+  },
+  buttonContainer: {
+    backgroundColor: '#222',
+    borderRadius: 5,
+    padding: 10,
+    margin: 20
+  },
+  buttonText: {
+    fontSize: 20,
+    color: '#fff'
+  }
+})
+
+export default Settings