WIP - example app

example/.expo-shared/assets.json

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

example/.gitignore

@@ -0,0 +1,11 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/

example/.watchmanconfig

@@ -0,0 +1 @@
+{}

example/App.tsx

@@ -0,0 +1,73 @@
+import React, { ComponentType } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { createStackNavigator } from 'react-navigation-stack';
+import { useNavigation } from 'react-navigation-hooks';
+import { createAppContainer } from 'react-navigation';
+
+const Screen1 = () => (
+  <View style={{ flex: 1, width: '100%', backgroundColor: 'grey' }}>
+    <Text>Screen1</Text>
+  </View>
+);
+
+const Screen2 = () => (
+  <View style={{ flex: 1, width: '100%', backgroundColor: 'red' }}>
+    <Text>Screen1</Text>
+  </View>
+);
+
+const Screens: { [key: string]: ComponentType<any> } = {
+  Screen1,
+  Screen2,
+};
+
+const Home = () => {
+  const { navigate } = useNavigation();
+  return (
+    <View style={{ flex: 1, width: '100%', backgroundColor: 'grey' }}>
+      <Text>Home</Text>
+      {Object.keys(Screens).map(screenName => {
+        return (
+          <TouchableOpacity
+            onPress={() => navigate({ routeName: screenName })}
+            style={{
+              margin: 10,
+              padding: 10,
+              borderWidth: 1,
+              borderRadius: 5,
+              backgroundColor: 'blue',
+            }}
+          >
+            <Text style={{ color: 'black' }}>{screenName}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const ScreenRoutes = Object.keys(Screens).map(screenName => {
+  const Screen = Screens[screenName]!;
+  return {
+    screen: Screen,
+    navigationOptions: {
+      title: screenName,
+    },
+  };
+}) as any;
+
+const MainNavigator = createStackNavigator(
+  {
+    Home,
+    ...ScreenRoutes,
+  },
+  {
+    headerMode: 'none',
+    mode: 'modal',
+  }
+);
+
+const AppContainer = createAppContainer(MainNavigator);
+
+export default AppContainer;

example/app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "name": "react-navigation-hooks-examples",
+    "slug": "react-navigation-hooks-examples",
+    "privacy": "public",
+    "sdkVersion": "34.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
+    },
+    "packagerOpts": {
+      "config": "./metro.config.js",
+      "projectRoots": ""
+    }
+  }
+}

example/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            'react-navigation-hooks': '../src/Hooks',
+          },
+        },
+      ],
+    ],
+  };
+};

example/metro.config.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
+
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const project = require('../package.json');
+const escape = require('escape-string-regexp');
+
+const projectDependencies = Object.keys({
+  ...project.dependencies,
+  ...project.peerDependencies,
+});
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [path.resolve(__dirname, '..')],
+
+  resolver: {
+    blacklistRE: blacklist([
+      new RegExp(
+        `^${escape(
+          path.resolve(__dirname, 'node_modules', project.name)
+        )}\\/.*$`
+      ),
+      new RegExp(
+        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
+      ),
+    ]),
+
+    providesModuleNodeModules: [
+      '@expo/vector-icons',
+      '@babel/runtime',
+      ...projectDependencies,
+    ],
+  },
+};

example/package.json

@@ -0,0 +1,31 @@
+{
+  "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-navigation/core": "^3.4.2",
+    "@react-navigation/native": "^3.5.0",
+    "add": "^2.0.6",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "expo": "^34.0.1",
+    "react": "16.8.3",
+    "react-dom": "^16.8.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
+    "react-native-web": "^0.11.4",
+    "react-navigation": "^3.11.1",
+    "react-navigation-stack": "^2.0.0-alpha.7",
+    "yarn": "^1.17.3"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.23",
+    "@types/react-native": "^0.57.65",
+    "babel-preset-expo": "^6.0.0",
+    "typescript": "^3.4.5"
+  },
+  "private": true
+}

example/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  }
+}