From Vue to React Native: A Complete Guide to Building a Delivery App on Android

Project Background – The delivery‑chain app was originally built with Vue, but the team had no Android experience, so they chose React Native to handle the complex business logic and interactions.

Introduction – React Native allows a single codebase to run on multiple platforms; the author documents the entire process from project scaffolding to hot‑update deployment.

Section 1: Environment Setup

Required tools include Node (v8+), Git, Python 2, JDK 1.8, Android Studio (prefer the bundled SDK), an Android emulator such as Genymotion, and React Native version 0.54.2.

Section 2: Debugging

Create a project with react-native init yourProjectName, install global packages npm install -g yarn react-native-cli, and add the following scripts to package.json:

{
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "dev": "react-native run-android"
  }
}

Run npm run dev to start the Metro bundler (port 8081) and launch the app on the emulator. Open http://localhost:8081/index.bundle?platform=android to verify the bundle, and use the Dev Settings menu to set the computer’s IP for remote debugging.

Section 3: Common Issues

Create an empty assets folder under android/app/src/main and run

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

to fix first‑run failures.

Disable Live Reload when the HOME key causes multiple reloads.

Modify the app name in android/app/src/main/res/values/strings.xml.

Restart the browser if debugging messages disappear.

Section 4: Coding Details

Routing – Use react-navigation; navigation adds a view layer, so page refreshes require passing parameters.

State Management – Install MobX with npm install mobx mobx-react --save. If the @observer decorator is not recognized, add babel-plugin-transform-decorators-legacy.

Storage – Use react-native-storage for persistent data.

Hot Updates – The author uses Pushy; remember to delete old packages on the Pushy console and call markSuccess after a successful JS update.

Data Requests – Use the built‑in fetch API.

Section 5: Vue to React Native Differences

Conditional rendering: Vue’s v‑if="show" becomes this.state.show ? … : null in RN.

List rendering: Vue’s v‑for="item in items" translates to mapping over arrays in RN.

Styling: RN uses View and Text components; font‑related styles belong to Text.

Event handling: Only components like Touchable*, Button, and Text have click events; bind this using bind, arrow functions, or class property syntax.

Section 6: Common Pitfalls

Use new Date('yyyy/mm/dd') in production builds.

Place local HTML files for WebView in android/app/src/main/assets.

If storage promises hang, restart the app.

Delete the android/app/build folder or run npm run clean to resolve stubborn file‑deletion errors.

Conclusion – The author hopes this RN 0.54.2 walkthrough helps Vue developers transition to React Native; feedback and questions can be sent to [email protected] .