DEV Community


Posted on • Updated on

Updating ReactNativeExpo.js v1 to v2

Sadly, version 1 of the ReactNativeExpo.js has gone to the end because of continuous breaking changes of Expo and React Native, but don't be alarm yet, this is not a bad thing, is just version 1 is no more supported.

Never the less, we are making some changes to the project to fulfill all the need for the continuous function of the project, let's call it version 2 now.

Note aside; this guide is for migrating from version 1 to version 2. If you want to start from fresh from version 2, follow the instruction on the repository.

If you are still here, let's continue:

Version 1 to version 2

I split the migration into three parts; files that need delete, create, and must make some changes. Let's go:

Files to Delete

  • package-lock.json
  • .babelrc
  • docs
  • src/assets/native-base-theme:

Because of the update of Native-Base, for working correctly, we must delete de folder src/assets/native-base-theme and copy the new one.

    rm -rf ./src/assets/native-base-theme
    node node_modules/native-base/ejectTheme.js
    mv ./native-base-theme ./src/assets/native-base-theme

File to Create

  • index.js
    import { registerRootComponent } from 'expo';

    import App from './App';

    // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
    // It also ensures that whether you load the app in the Expo client or in a native build,
    // the environment is set up appropriately
  • .buckconfig
      target = Google Inc.:Google APIs:23

      central =
  • babel.config.json

Handle the responsibility that one day has .babelrc

    module.exports = function (api) {
      return {
        presets: ['babel-preset-expo'],
        plugins: [
              root: ['./'],
              alias: {
                '@app': './src/app',
                '@assets': './src/assets',
                '@common': './src/common',
                '@components': './src/components',
                '@constants': './src/constants',
  • .gitattributes
    *.pbxproj -text
  • .prettierignore
  • .prettierrc
      "bracketSpacing": true,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "es5",
      "printWidth": 80,
      "tabWidth": 2

File to replace

  • package.json

With all dependencies updated.

      "name": "react-native-expo-starter",
      "homepage": "",
      "version": "2.0.0",
      "devDependencies": {
        "@babel/core": "^7.9.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb-base": "^14.1.0",
        "eslint-config-prettier": "^6.10.1",
        "eslint-import-resolver-babel-module": "^5.1.2",
        "eslint-plugin-flowtype": "^4.7.0",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-standard": "^4.0.1",
        "prettier": "^2.0.4",
        "redux-logger": "^3.0.6",
        "schedule": "^0.5.0"
      "main": "index.js",
      "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "web": "expo start --web",
        "start": "expo start",
        "test": "jest"
      "dependencies": {
        "@expo/vector-icons": "^10.0.6",
        "@react-native-community/async-storage": "^1.9.0",
        "axios": "^0.19.2",
        "babel": "^6.23.0",
        "babel-eslint": "^10.1.0",
        "babel-plugin-module-resolver": "^4.0.0",
        "expo": "~37.0.3",
        "expo-splash-screen": "^0.1.1",
        "expo-updates": "~0.1.0",
        "native-base": "2.13.8",
        "prop-types": "^15.7.2",
        "react": "~16.9.0",
        "react-dom": "~16.9.0",
        "react-native": "~0.61.5",
        "react-native-gesture-handler": "~1.6.0",
        "react-native-reanimated": "~1.7.0",
        "react-native-screens": "~2.2.0",
        "react-native-unimodules": "~0.9.0",
        "react-native-web": "~0.11.7",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0"
      "private": true
  • packager-info.json
      "devToolsPort": 19002,
      "expoServerPort": null,
      "packagerPort": null,
      "packagerPid": null,
      "expoServerNgrokUrl": null,
      "packagerNgrokUrl": null,
      "ngrokPid": null,
      "webpackServerPort": null
  • settings.json
      "hostType": "lan",
      "lanType": "ip",
      "dev": true,
      "minify": false,
      "urlRandomness": "xe-t27",
      "https": false
  • src/app/store.js

In the last version of redux-persist@~6 the storage is not compatible and brings us an exception (AsyncStorage exception). You got two options:

  • Use redux-persions@~5, and no code must be changed.
  • Use redux-persist@~6, and must do these changes to store.js file.
    // before
    import storage from "redux-persist/es/storage";

    // after
    import { AsyncStorage } from "react-native";

    // before
    const config = {
      key: "root",
      blacklist: ["status"]

    // after
    const config = {
      key: "root",
      storage: AsyncStorage,
      blacklist: ["status"]
  • src/assets/fonts/Questrial-Regular.ttf

Changed his name for Questrial.ttf

  • .gitignore
    # OSX

    # Xcode

    # Android/IntelliJ

    # node.js

    # BUCK

    # fastlane
    # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
    # screenshots whenever they are needed.
    # For more information about the recommended setup visit:


    # Bundle artifacts

    # CocoaPods

    # Expo
  • App.js
    import * as React from 'react';
    import { AppLoading } from 'expo';
    import * as Font from 'expo-font';
    import { Ionicons } from '@expo/vector-icons';

    import { Provider } from 'react-redux';
    import { PersistGate } from 'redux-persist/es/integration/react';
    import { StyleProvider } from 'native-base';
    import { StatusBar, Platform } from 'react-native';

    import getTheme from '@assets/native-base-theme/components';
    import theme from '@assets/native-base-theme/variables/commonColor';

    import configureStore from '@app/store';
    import Loading from '@components/loading/Loading';
    import Dashboard from '@components/dashboard/Dashboard';

    const { persistor, store } = configureStore();

    if (Platform.OS === 'android') StatusBar.setHidden(true);

    export default class App extends React.Component {
      constructor(props) {

        this.state = {
          isReady: false,

      async componentDidMount() {
        await this.loadFonts();

      async loadFonts() {
        await Font.loadAsync({
          Roboto: require('native-base/Fonts/Roboto.ttf'),
          Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
          Questrial: require('@assets/fonts/Questrial.ttf'),

        this.setState({ isReady: true });

      render() {
        if (!this.state.isReady) {
          return <AppLoading></AppLoading>;

        return (
          <Provider store={store}>
            <PersistGate loading={<Loading />} persistor={persistor}>
              <StyleProvider style={getTheme(theme)}>
                <Dashboard />
  • app.json
      "name": "React Native Expo Starter",
      "displayName": "ReactNativeExpoStarter",
      "expo": {
        "name": "React Native Expo Starter",
        "slug": "React-Native-Expo-Starter",
        "icon": "src/assets/images/app-icon.png",
        "version": "2.0.0",
        "orientation": "portrait",
        "platforms": ["ios", "android", "web"],
        "assetBundlePatterns": ["**/*"]

Final Step

So we're done, let execute these commands:

    # remove dependencies
    rm -rf node_modules

    # for clean npm cache
    npm cache clean --force

    # install dependencies
    npm i

    # expo start
    npm start

And that its, everything must do ok.

If you had any doubt, don't hesitate and contact me, or better, contribute to this project, making changes and PR.


Version 2 of this project has disabled react-native by default (for the moment) because it has some problems with ScreenSplash.

In the meantime, if you want to fix these problems, this must-do first:3 install.

    # install the expo client
    npm install --global expo-cli

    # create a new project
    expo init my-project

    # copy the folder from my-project/ios and my-project/android and paste in the root of the project

    # if you want to test ios, first must install CocoaPods and execute this command
    pod install

    # modify the package.json and add this 2 lines underline scripts
            "android": "react-native run-android",
        "ios": "react-native run-ios",

    # now you can run ios and android nativly
    npm run ios
    npm run android

Discussion (0)