DEV Community

Miguel Meza
Miguel Meza

Posted on • Edited on

Updating ReactNativeExpo.js v1 to v2

#reactnative #expo #nativebase

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
Enter fullscreen mode Exit fullscreen mode

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
    registerRootComponent(App);
Enter fullscreen mode Exit fullscreen mode
  • .buckconfig 
    [android]
      target = Google Inc.:Google APIs:23

    [maven_repositories]
      central = https://repo1.maven.org/maven2
Enter fullscreen mode Exit fullscreen mode
  • babel.config.json

Handle the responsibility that one day has .babelrc

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

File to replace

  • package.json

With all dependencies updated.

    {
      "name": "react-native-expo-starter",
      "homepage": "https://github.com/migu33l/React-Native-Expo-Starter",
      "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
    }
Enter fullscreen mode Exit fullscreen mode
  • packager-info.json 
    {
      "devToolsPort": 19002,
      "expoServerPort": null,
      "packagerPort": null,
      "packagerPid": null,
      "expoServerNgrokUrl": null,
      "packagerNgrokUrl": null,
      "ngrokPid": null,
      "webpackServerPort": null
    }
Enter fullscreen mode Exit fullscreen mode
  • settings.json 
    {
      "hostType": "lan",
      "lanType": "ip",
      "dev": true,
      "minify": false,
      "urlRandomness": "xe-t27",
      "https": false
    }
Enter fullscreen mode Exit fullscreen mode
  • 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",
      storage,
      blacklist: ["status"]
    };
    ...

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

Changed his name for Questrial.ttf

  • .gitignore 
    # OSX
    #
    .DS_Store

    # Xcode
    #
    build/
    *.pbxuser
    !default.pbxuser
    *.mode1v3
    !default.mode1v3
    *.mode2v3
    !default.mode2v3
    *.perspectivev3
    !default.perspectivev3
    xcuserdata
    *.xccheckout
    *.moved-aside
    DerivedData
    *.hmap
    *.ipa
    *.xcuserstate
    project.xcworkspace

    # Android/IntelliJ
    #
    build/
    .idea
    .gradle
    local.properties
    *.iml

    # node.js
    #
    node_modules/
    npm-debug.log
    yarn-error.log

    # BUCK
    buck-out/
    \.buckd/
    *.keystore

    # 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:
    # https://docs.fastlane.tools/best-practices/source-control/

    */fastlane/report.xml
    */fastlane/Preview.html
    */fastlane/screenshots

    # Bundle artifacts
    *.jsbundle

    # CocoaPods
    /ios/Pods/

    # Expo
    .expo/*
    /web-build
Enter fullscreen mode Exit fullscreen mode
  • 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) {
        super(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'),
          ...Ionicons.font,
        });

        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 />
              </StyleProvider>
            </PersistGate>
          </Provider>
        );
      }
    }
Enter fullscreen mode Exit fullscreen mode
  • 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": ["**/*"]
      }
    }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Extra

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

amitkumar13 profile image

Memory Leak Detection in React Native with LeakCanary

Amit Kumar -

viksingh profile image

Best React Native UI Libraries Developers Should Know

Vikas Singh -

sebastienlorber profile image

This Week In React #207: Next.js, shadcn/ui, Headless UI, RN 0.76, New Architecture, NativeWind, RNTL, Reassure, Bottom Tabs...

Sebastien Lorber -

ajmal_hasan profile image

React Native 0.76: What’s New and Exciting

Ajmal Hasan -