first commit

Author: lcameroon

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

.expo/packager-info.json

@@ -0,0 +1,5 @@
+{
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null
+}

.expo/settings.json

@@ -0,0 +1,7 @@
+{
+  "hostType": "tunnel",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null
+}

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# Jest
+.jest/
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.watchmanconfig

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

App.tsx

@@ -0,0 +1,54 @@
+import * as Expo from 'expo';
+import * as React from 'react';
+import { StyleProvider } from 'native-base';
+import { Provider } from 'react-redux';
+
+import App from './src/App/index.native';
+import getTheme from './src/App/theme/components';
+import variables from './src/App/theme/variables/platform';
+import configureStore from './src/App/store';
+
+export interface IProps {}
+export interface IState {
+  store: {};
+  isLoading: boolean;
+  isReady: boolean;
+}
+
+export default class Setup extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      store: configureStore(() => this.setState({ isLoading: false })),
+      isReady: false
+    };
+  }
+
+  componentWillMount() {
+    this.loadFonts();
+  }
+
+  async loadFonts() {
+    await Expo.Font.loadAsync({
+      Roboto: require('native-base/Fonts/Roboto.ttf'),
+      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
+      Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf')
+    });
+
+    this.setState({ isReady: true });
+  }
+
+  render() {
+    if (!this.state.isReady || this.state.isLoading) {
+      return <Expo.AppLoading />;
+    }
+    return (
+      <StyleProvider style={getTheme(variables)}>
+        <Provider store={this.state.store}>
+          <App />
+        </Provider>
+      </StyleProvider>
+    );
+  }
+}

README.md

@@ -0,0 +1,57 @@
+## React and React Native app + Typescript
+
+React and React Native app provide magic platform-splitting functionality based on special file extensions. Just the component for the target platform is compiled at build time.
+
+Follow these practice:
+
+* Put the component in a folder
+* Break out the shared interface into a separate `.d.ts` file.
+* Name the web/default file `index.tsx` (not `index.web.tsx`)
+* Name the native file `index.native.tsx` (both `ios` and `android`)
+* For android splitting, add `index.android.tsx` which will override `.native`
+
+The `.d.ts` file enables VS Code code hinting for JSX props, and helps manage the project cross-platform by ensuring the consumers of the component have a unified interface.
+
+---
+
+### Install
+
+```
+npm install
+```
+
+### Run Web
+
+```
+npm start
+```
+
+### Run iOS
+
+```
+npm run ios
+```
+
+### Run Android
+
+```
+npm run android
+```
+
+---
+
+### Caution:
+
+Beware auto-imports! It's easy to accidentally import a file like this:
+
+```js
+import Header from './Header/index.android';
+```
+
+instead of the correct generic way:
+
+```js
+import Header from './Header';
+```
+
+Also, when working on the native app, be mindful that VS Code's `Go To Definition` will always jump to the `index.tsx` (web) file.

app.json

@@ -0,0 +1,9 @@
+{
+  "expo": {
+    "sdkVersion": "27.0.0",
+    "packagerOpts": {
+      "sourceExts": ["ts", "tsx"],
+      "transformer": "node_modules/react-native-typescript-transformer/index.js"
+    }
+  }
+}