A starter boilerplate for a ecommerce mobile app using React Native

by React Native Example

2021-09-05

React-Native-Ecommerce

A starter boilerplate for a ecommerce mobile app using React Native and Redux.

Screens Recording

Requirements

Node 6.x or newer
React Native for development
Xcode for iOS development
Android Studio for Android development
Android SDK 23.0.1 or newer for Android development
Android Marshmallow or newer on your Android device to test properly

See Getting Started to install requirement tools.

Stack

React JS is a JavaScript library
React Native 0.63.2 for building native apps using react
Redux 4.0.5 a predictable state container for Javascript apps
Redux-persist 6.0.0 Persist and rehydrate a redux store. Javascript apps
Alert 4.3.0 An alert to notify users
Babel 7.2.3 for ES6+ support
Bottom-Tabs 5.11.11 for Bottom Navigations
Navigation for React Native a router based on new React Native Navigation API

Libraries

@react-native-community/masked-view 0.1.10
@react-navigation/native 5.7.3
@react-navigation/stack 5.9.0
Bottom-Tabs 5.11.11
react-native-gesture-handler 1.7.0
react-native-reanimated 1.13.0
react-native-safe-area-context 3.1.7
react-native-screens 2.10.1
react-redux 7.2.1
redux 4.0.5
redux-saga 1.1.3
Alert 4.3.0
Redux-persist 6.0.0
Touch-ripple 0.0.0

Get Started

1. Installation

On the command prompt run the following commands

$ git clone https://github.com/noddy1996/react-native-redux-starter.git

$ cd react-native-redux-starter/

$ npm install

2. Simulate for iOS

$ cd ios && pod install

Method One

Open the project in Xcode from ios/react_native_redux_starter.xcodeproj.
Hit the play button.

Method Two

Run the following command in your terminal.

$ react-native run-ios

3. Simulate for Android

Make sure you have an Android emulator installed and running.
Run the following command in your terminal.

$ react-native run-android

4. How to Decide the Navigation

Navigation is decided By navigationTypeTabs Key definend in app.json.
navigationTypeTabs : true, will give you the bottom Tabs and vice versa.

Debugger

React Native Debugger : The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools
redux-devtools-extension 2.13.5

Rename Project

Rename react-native app with just one command

This package assumes that you created your react-native project using react-native init.

Installation

yarn global add react-native-rename
or
npm install react-native-rename -g

Switch to new branch first

better to have back-up

git checkout -b rename-app

Usage

react-native-rename <newName>

With custom Bundle Identifier (Android)

react-native-rename <newName> -b <bundleIdentifier>

Example

react-native-rename "Travel App"

With custom Bundle Identifier

react-native-rename "Travel App" -b com.junedomingo.travelapp

GitHub

https://github.com/eramudeep/react-native-ecommerce