react-native initial development environment setting
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
MyProject migrated css to styled-components.ts Sep 19, 2018
.gitignore Initial commit Sep 18, 2018
LICENSE Initial commit Sep 18, 2018
README.md Update README.md Nov 4, 2018

README.md

react-native-awesome-starter

This repository is initial development environment settings customed by Holy Kiwi Team (2018.09.19)

UPDATE 2018.10.27

Contents

  1. react-native init

  2. use typescript

  3. use mobx and mobx-react

  4. connect with code-push

  5. connect with firebase

(TODO)

  • add assets/font
  • use react-native-splash-screen
  • use react-native-fast-image
  • use react-navigation or react-native-navigation

Version

  • react: 16.5.0
  • react-native: 0.57.4

How to set up

1. init your project with react-native-cli

$ npm install -g react-native-cli
$ react-native init MyProject
$ cd MyProject

2. use typescript

$ yarn add --dev typescript
$ yarn add --dev react-native-typescript-transformer
$ yarn tsc --init --pretty --jsx react
$ touch rn-cli.config.js
$ yarn add --dev @types/react @types/react-native

write this code in rn-cli.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

in order to migrate to typescript, rename App.js to App.tsx

add typescript test infra

yarn add --dev ts-jest

write this in package.json

"jest": {
  "preset": "react-native",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "transform": {
    "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
    "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  "testPathIgnorePatterns": [
    "\\.snap$",
    "<rootDir>/node_modules/"
  ],
  "cacheDirectory": ".jest/cache"
}

3. use mobx and mobx-react

npm install --save mobx mobx-react

add babel-preset plugin transform-decorators-legacy in .babelrc to use decorator syntax

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

Trouble Shooting

if you have error like this

error: bundling failed: Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.
npm install --save-dev @babel/plugin-proposal-decorators
{
  ...
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ]
}

let experimentalDecorators be true in tsconfig.json

{
  "compilerOptions": {
    ...
    "experimentalDecorators": true
    ...
  }
}

4. connect with code-push

install code-push-cli

npm install -g code-push-cli
code-push register

register your app in code-push

code-push app add <AppName-Android>
code-push app add <AppName-iOS>

you can check apps that you registered by this command.

code-push app list
npm install --save react-native-code-push@latest
react-native link react-native-code-push

iOS

write Staging Deployment Key in info.plist

<key>CodePushDeploymentKey</key>
<string><Staging Deployment Key></string>

Android

write Staging Deployment Key in MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush("<Staging Deployment Key>", getApplicationContext(), BuildConfig.DEBUG)
    );
}

5. connect with firebase

npm install --save react-native-firebase
react-native link react-native-firebase

create your project in Firebase

Analytics

iOS

Setup GoogleService-Info.plist

install GoogleService-Info.plist and move to ios/[YOUR APP NAME] directory

Initialize Firebase

in AppDelegate.m

#import <Firebase.h>

[FIRApp configure];
Install Firebase Library

in PodFile

# Required by RNFirebase
pod 'Firebase/Core', '~> 5.9.0'
pod install

Android

Setup google-services.json

install google-services.json and move to android/app directory

write this code in app.gradle (project level)

buildscript {
  // ...
  dependencies {
    // ...
    classpath 'com.google.gms:google-services:4.0.1'
  }
}

write this code very bottom in app.gradle (app level)

apply plugin: 'com.google.gms.google-services'
Initialize Firebase
dependencies {
  // This should be here already
  implementation project(':react-native-firebase')

  // Firebase dependencies
  implementation "com.google.android.gms:play-services-base:15.0.1"
  implementation "com.google.firebase:firebase-core:16.0.3"

  ...

Analytics logEvent

You can track event with logEvent function
firebase.analytics().logEvent(eventName, params);
// eventName: string, params: object

Admob

iOS

Android

Trouble Shooting

Problem

When you build react-native application in Xcode

Xcode 10: Build input file double-conversion cannot be found

Solution

$ cd node_modules/react-native/scripts && ./ios-install-third-party.sh && cd ../../../
$ cd node_modules/react-native/third-party/glog-0.3.5/ && ../../scripts/ios-configure-glog.sh && cd ../../../../

reference: https://github.com/facebook/react-native/issues/21168

Problem

error (when pod install)

In Podfile:
    React/CxxBridge (from `../node_modules/react-native`) was resolved to 0.57.2, which depends on
      Folly (= 2016.10.31.00)

Solution

write this code in Podfile

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

reference: https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

Deprecated

styled-components

3. use styled-components (ts)

yarn add --dev styled-components

make index.ts file in theme directory

import * as styledComponents from "styled-components";

const {
  default: styled,
  css,
  injectGlobal,
  ThemeProvider
} = styledComponents as styledComponents.ThemedStyledComponentsModule<
  IThemeInterface
>;

export interface IThemeInterface {
  primaryColor: string;
}

export const theme = {
  primaryColor: "#e9e9eb"
};

export default styled;
export { css, injectGlobal, ThemeProvider };

In react-native, you cannot use keyframes. You should use Animated API supported by react-native.

migrate css to styled-components

// in App.tsx
const ContainerView = styled(View)`
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #F5FCFF;
`;

class App extends Component {
  render() {
    return (
      <ContainerView>
        // ...
      </ContainerView>
    );
  }
}

Reference