React Native Starter App with NativeBase + CodePush + Redux

Overview

Discontinued in favour of ReactNativeSeed.com

Native Starter Kit v6.1.0

A Starter Kit for React Native + NativeBase + React Navigation + Redux + CodePush Apps (iOS & Android)

Brought to you by NativeBase

Native-Starter-Kit

A simple starter project for React Native + NativeBase + React Navigation + Redux + CodePush apps on iOS and Android.

Note: Shifted to React Navigation from React Native Router Flux in the master branch. React Navigation has become standard for navigation solution in React Native. We are just keeping up with the current trend.

No need of reinventing the wheel. To have immediately something to continue building on, it would be best to start from some starter kit for getting React Native - based applications off the ground in a hurry.

This is a starter kit that you can install on the fly to get the basic plumbing of React Native with NativeBase, Redux and CodePush.

Find out more Free React JS Themes and React Native Themes.

Content

Screens

ios-demo

Technologies

Technologies used in Native Starter Kit

React Native

React Native helps in making the development work easier and allowing the developers to focus on the core app features in every new release. It is the fastest-developing mobile app development that essentially permits you to create an isolated product with often outcomes.

The hymn of React Native — learn once, write anywhere.

React Native takes charge of the view controllers and programmatically generates native views using javascript. This means that you can have all the speed and power of a native application, with the ease of development that comes with React.

NativeBase

NativeBase is a free and open source framework.

This framework enable developers to build high-quality mobile apps using React Native iOS and Android apps with a fusion of ES6. NativeBase builds a layer on top of React Native that provides you with basic set of components for mobile application development.

The applications stack of components is built using native UI components and because of that, there are no compromises with the User Experience of the applications. NativeBase is targeted specially on the look and feel, and UI interplay of your app.

NativeBase without a doubt fits in well with mobile applications which cut downs one huge part of your app The Front end.

Redux

As the requirements for JavaScript single-page applications have become increasingly complicated, our code must manage more state than ever before. UI state is also increasing in complexity, as we need to manage the active route, the selected tab, whether to show a spinner or not, should pagination controls be displayed, and so on.

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. These restrictions are reflected in the steps of three.

  • The state of whole application is stored in an object tree within a single store.
  • The only way to mutate the state is to emit an action, an object describing what happened.
  • To specify how the state tree is transformed by actions, you write pure reducers.

CodePush

React Native app is composed of JavaScript files, images, which are bundled together by the packager and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file). Once the app is released, updating either the JavaScript code or image assets, requires you to recompile and redistribute the entire binary.

The CodePush plugin helps get product improvements in front of your end users instantly, with the aid of preserving your javascript and images synchronized with updates you launch to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available.

React Navigation

React Navigation is a routing package that allows you to:

  • Declare different kinds of Routers.
  • Routers fall into the category of StackNavigator , DrawerNavigator , and TabNavigator.
  • We can also nest these Routers for more complex transitions.

React Native Easy Grid

React Native Easy Grid is an open source package for grid layout from the team of NativeBase.

The layout system is an essential concept that needs to be mastered in order to create great layouts and UIs. React Native uses Flexbox to create the layouts, which is great when we need to accommodate our components and views in different screen sizes or even different devices. Flexbox is awesome but it could be tiresome for newbies.

Easy Grid is very powerful and flexible layout system. No more worries about props of Flexbox such as alignItems, flexDirection, justifyContent, margin, padding, position, width etc. You can create any layout with all the available options that we have. Flexbox makes it look like percentages, however what actually is happening is just ratios. On the easier part, ratios are easier to represent than percentage/decimals. For this reason, the Easy Grid takes in ratios in place of percentage. Performance wise, Easy Grid is noteworthy and works as fine as Flexbox, not much of calculation.

More Examples . . .

React Native-NativeBase Seed

React Native-NativeBase Seed is a basic configuration that every React Native app must have.

This is open source and perfect for any newbie to start with React Native.

This is a React Native Project with NativeBase, React Navigation, Redux, CodePush, Push Notification and other basic must-have libraries.

Get Started

1. System Requirements

2. Installation

On the command prompt run the following commands

$ git clone https://github.com/start-react/native-starter-kit.git

$ cd native-starter-kit/

$ npm install
$ react-native link

CodePush plugin installation and key deployment.

3. Simulate for iOS

Method One

  • Open the project in XCode from ios/NativeStarterKit.xcodeproj

  • Hit the play button.

Method Two

  • Run the following command in your terminal
$ react-native run-ios

4. Simulate for Android

  • Make sure you have an Android emulator installed and running.

  • Run the following command in your terminal

$ react-native run-android

Note: If you are building Native Starter Kit for first time on your system, please follow Method One to simulate on iOS. (To link the CodePush plugin through Xcode for iOS)

For apps with more advance designs, please visit NativeBase Market.

Comments
  • How to run starter kit on actual iOS and Android devices

    How to run starter kit on actual iOS and Android devices

    Okay... I've successfully installed and ran the starter kit in my iOS simulator (XCODE 8.0) but I would like to run it on actual devices connected to my iMAC.

    I tried opening XCODE and loading the project and running it directly - but get compilation and signing errors.

    Is there a written guide for this?

    opened by cpalanzo 14
  • error running on simulator (android)

    error running on simulator (android)

    Having so many problems getting this running.

    I've done the react-native upgrade because was getting another issue, and now am getting this error:

    screenshot 2016-06-13 16 26 25

    any tips?

    anything else you need to know?

    running android studio on mac with a 6.0 emulated device

    opened by vesper8 13
  • How to rename this project

    How to rename this project

    I'm follow this post https://medium.com/the-react-native-log/how-to-rename-a-react-native-app-dafd92161c35 to rename the project, but it's not working.

    opened by realironnam 12
  • react-native link problem

    react-native link problem

    HI! anyone can help me with this error?

    `D:_DEV_Labs\ReactNative\native-starter-kit>react-native link ? What is your CodePush deployment key for Android (hit to ignore) _gi-TBhZ56viRsyUMe6kZPDgcSVV4yodWNPWf rnpm-install info Linking react-native-code-push android dependency rnpm-install info Android module react-native-code-push has been successfully linked rnpm-install info iOS module react-native-code-push is already linked "CodePush.h" header already imported. D:_DEV_Labs\ReactNative\native-starter-kit\node_modules\react-native-code-push\scripts\postlink\ios\postlink.js:26 var oldJsCodeLocationAssignmentStatement = appDelegateContents.match(/(jsCodeLocation = .*)\n/)[1]; ^

    TypeError: Cannot read property '1' of null at Object. (D:_DEV_Labs\ReactNative\native-starter-kit\node_modules\react-native-code-push\scripts\postlink\ios\postlink.js:26:96) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (D:_DEV_Labs\ReactNative\native-starter-kit\node_modules\react-native-code-push\scripts\postlink\run.js:1:63) at Module._compile (module.js:570:32) D:_DEV_Labs\ReactNative\native-starter-kit\node_modules\react-native\local-cli\core\makeCommand.js:19 throw new Error(Error occured during executing "${ command }" command); ^

    Error: Error occured during executing "node node_modules/react-native-code-push/scripts/postlink/run" command at ChildProcess.prelink (D:/_DEV/_Labs/ReactNative/native-starter-kit/node_modules/react-native/local-cli/core/makeCommand.js:19:15)`

    react-native-cli: 1.2.0 react-native: 0.35.0 npm: 3.10.9

    opened by thiagoterleski 12
  • Failed at the NativeStarterKit

    Failed at the NativeStarterKit

    Hi,

    I just recently did a fresh install for React-native on my windows machine and am following the steps to install the native-starter-kit kit for a fresh project. When running npm install, I am receiving an error of "Failed at the [email protected] postinstall script 'remotedev-debugger && sh .add-pre-commit-hook'.

    It states to ensure i have the latest version of node.js and npm which I do.

    Any ideas what the issue is?

    P.S. Also because of this if i try to link I get errors such as "Cannot read property '1' of null" in postlink.js and a few other errors.

    Thanks!

    opened by MattHartz 11
  • Padding problems on Android

    Padding problems on Android

    Hi, I would like to know if your product only targets iOS apps or if you support Android as well. I'm asking this because I noticed that the widgets on Android are a little bit weird (look at the AppBar and the Button) starter

    I know its just a simple padding problem but since I will be buying your product (pro version) I would like to know if it's target for Android too

    opened by rafaelcorreiapoli 11
  •  Entry,

    Entry, ":CFBundleIdentifier", Does Not Exist

    Checkedout from repo, ran npm install and link. Error message while running application: Failed to install the requested application An application bundle was not found at the provided path. Provide a valid path to the desired application bundle. Print: Entry, ":CFBundleIdentifier", Does Not Exist

    Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/NativeStarterKit.app/Info.plist Print: Entry, ":CFBundleIdentifier", Does Not Exist

    opened by arashbi 9
  • Unable to resolve module TextInputState

    Unable to resolve module TextInputState

    Unable to resolve module TextInputState from /Users/stplmacmini6/Desktop/native-starter-kit/node_modules/react/lib/NativeMethodsMixin.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/TextInputState and its parent directories.

    I also follow the steps:

    1. Clear watchman watches: watchman watch-del-all.
    2. Delete the node_modules folder: rm -rf node_modules && npm install.
    3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache

    but did not fix. Also I have upgraded node.js and react-native with latest version.

    opened by akhivicky 9
  • Drawer Navigating Animation

    Drawer Navigating Animation

    When I navigate to other screens, the hidden drawer flickers between them. I think this is not a right way to show it when navigating. Is there anyone to help me to resolve this issue? Thanks

    opened by WebTalentTop 8
  • Can master branch be used for start new project

    Can master branch be used for start new project

    I need to start a new project and just wondering can I download starter kit from master branch to create new project from it. I mean is it production ready? I know that navigation experimental is replaced with react router flux and when I open project I see in /actions/sideBarNav that there is still 'react-native-navigation-redux-helpers', replaceAt, pushRoute etc. AppNavigator contains '_renderScene()' and I think it is not in use anymore? This is obsolete code, right?

    opened by vvusts 8
  • Codepush Key, Portrait, Readme, Background

    Codepush Key, Portrait, Readme, Background

    Hi There!

    Any plans to make your framework/themes compatible with portrait? screen shot 2016-09-28 at 3 12 36 pm

    Also, could please elaborate how we can add the codepush keys on IOS? screen shot 2016-09-28 at 3 13 48 pm

    Missing some details here for begginers: Add the codepush production key in place of Release key Add the codepush staging key in place of Debug key

    Is there any problem with images or the background was changed to white in this new version?

    opened by basequatro 8
  • var oldJsCodeLocationAssignmentStatement = appDelegateContents.match(/(jsCodeLocation = .*)/)[1];

    var oldJsCodeLocationAssignmentStatement = appDelegateContents.match(/(jsCodeLocation = .*)/)[1];

    var oldJsCodeLocationAssignmentStatement = appDelegateContents.match(/(jsCodeLocation = .*)/)[1]; ^

    TypeError: Cannot read property '1' of null at Object. (/Users/ab/Documents/ios/ios_app/node_modules/react-native-code-push/scripts/postlink/ios/postlink.js:39:94) at Module._compile (module.js:641:30) at Object.Module._extensions..js (module.js:652:10) at Module.load (module.js:560:32) at tryModuleLoad (module.js:503:12) at Function.Module._load (module.js:495:3) at Module.require (module.js:585:17) at require (internal/module.js:11:18) at Object. (/Users/ab/Documents/ios/ios_app/node_modules/react-native-code-push/scripts/postlink/run.js:1:63) at Module._compile (module.js:641:30) /Users/ab/Documents/ios/ios_app/node_modules/react-native/local-cli/core/makeCommand.js:29 throw new Error(Error occured during executing "${command}" command); ^

    Error: Error occured during executing "node node_modules/react-native-code-push/scripts/postlink/run" command at ChildProcess.prelink (/Users/ab/Documents/ios/ios_app/node_modules/react-native/local-cli/core/makeCommand.js:29:15) at ChildProcess.emit (events.js:159:13) at maybeClose (internal/child_process.js:943:16)

    opened by imankitaman 1
  • Codepush crashes on Android but works on iOS

    Codepush crashes on Android but works on iOS

    Hello, I had codepush working completely fine on iOS, but on Android, when I accept the update, the app just crashes and rolls back to the previous version ... The log in chrome console disappears quickly so I am not sure what this thing is related to but it seems to be style related... If it is the case, why would it work on iOS though?

    opened by aselvais 0
Releases(v6.2.0)
React Native Typescript starter kit / template (Redux Thunk + React Native Navigation v7 + TSLint)

React Native Template - TypeScript An opinionated React Native Starter Kit with React Native Navigation + Redux + Airbnb TSLint to build iOS and Andro

Amit Mangal 269 Dec 29, 2022
Just a starter code to use redux and react-native with Login

React Native Redux Starter Code Login using Redux, Redux Saga and Redux Storage Good practice to create a Login using Redux, Redux Saga and Redux Stor

Sibelius' Projects 177 Oct 30, 2022
react-native-hot-redux-starter ★135

React Native Hot Redux Starter (deprecated) Hot reloading is now built into React Native, so use that instead of this. This is a starter kit for build

Adam Pash 137 Feb 14, 2022
React native starter using typescript and redux-saga.

?? React Native Boilerplate - May 2021 React Native Boilerplate is a starting point for React Native application. This project is configured with redu

Vilmar Cabañero 2 Feb 3, 2022
Pepperoni - React Native App Starter Kit for Android and iOS

Futurice React Native Starter Kit ⚠️ Deprecation Warning Dear community, as time moved on so did React Native and we've not been able to provide conti

Futurice 4.6k Jan 4, 2023
🚀A powerful react native starter template that bootstraps development of your mobile application

React Native Starter ?? View Demo | Download | More templates | Support forum You're viewing the new and updated version of React Native Starter, prev

Flatlogic 2k Jan 5, 2023
Professional react-native starter kit with everything you'll ever need to deploy rock solid apps

WARNING This starter kit has been deprecated and is no longer being actively maintained by Ueno. React Native Starter The Professional React Native St

Ueno: A full-service agency 577 Oct 26, 2022
A react-native starter kit using RN0.63, Flipper support, LogBox, AndroidX, Hooks workflow, easy-peasy, code-push, Themes support and much more

cd A GOOD, up to date and easy to use starter and learning tool for beginners to intermediate. (IOS and Android ready) NEW React-Native updated to 0.6

HARISH JANGRA 254 Oct 29, 2022
React Native Starter Kit with Firebase Auth and Facebook Login

React Native Starter Kit ?? Bootstrap your app development by using this awesome react native starter kit, integrated with Firebase Auth and Facebook

Instamobile 393 Jan 2, 2023
✨ A React Native Starter with 10+ commonly used libraries ✨

React Native Starter ✨ A React Native Starter with 10+ commonly used libraries ✨ Overview Anyone who had to setup a React Native project from scratch

Adegboye Josiah 29 Dec 26, 2022
React Native Boilerplate - Redux + Saga + Reselect + redux-persist + react-navigation + TypeScript

React Native Boilerplate with Typescript Overview This React Native template for building solid applications through SOC(separation of concerns) betwe

Mengheang Rat 14 Oct 5, 2022
Simple ReactNative starter with an opinionated folder structure for mobile development.

Simple React Native Starter Simple ReactNative starter with an opinionated folder structure for mobile development. Getting Started Ensure you've foll

Patrick Ofilada 73 Sep 6, 2022
Rhinos-app is a react-native app which uses react-native-web to achieve cross-platform design.

Rhinos-app Rhinos-app is a react-native app which uses react-native-web to achieve cross-platform design. Live Demo: web version ?? FEATURES: ?? ?? Ru

null 82 Feb 14, 2022
React Native + React-Redux + Native Base + Code Push

React-Native-Starter-Pack React Native + React-Redux + Native Base + Code Push ##Setting Up Project npm i -g rninit rninit init <new-app-name> --sourc

Simar 40 Feb 14, 2022
Demo app for React Native Elements (w/ React Native Web)

React Native Elements App Mobile App This is the Demo app for React Native Elements built with Expo. The purpose of this app is to demonstrate the usa

React Native Elements 1.3k Jan 6, 2023
Boilerplate for iOS app development with React Native, ES6 and Reflux

react-native, es6 & reflux boilerplate As the very long repo title indicates, this is a boilerplate repository that includes the following: ES6-to-ES5

Filipe Dobreira 141 Apr 5, 2022
cross platform app with react in a monorepo

react-native-web-workspace An minimum boilerplate that has configured a native app running also on the web in the same monorepo. For a thorough discus

Zetta Garcia 77 Jul 24, 2022
Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!

Ignite - the hottest React Native boilerplate Battle-tested React Native boilerplate The culmination of five years of constant React Native developmen

Infinite Red, Inc. 14.7k Jan 5, 2023
React Native Meteor Boilerplate

React Native Meteor Boilerplate This is a simple way to get started building an app with React Native and Meteor. It is opinionated to make it easy fo

Spencer Carli 634 Nov 21, 2022