Hi, thanks for create this boilerplate. How i can implement authentication flow with react navigation switch navigator
https://reactnavigation.org/docs/en/auth-flow.html

Hi @thecodingmachine, @AurelGit :
Would it be possible to publish the code on snack.expo.io, so as to be able to test it without having to create a project on your PC?

Is your feature request related to a problem? Please describe.
Providing a way for the deep linking support in the boilerplate code.

Describe the solution you'd like
I wanted to implement the deep linking support in the boilerplate. Therefore I made below adjustments in the code we have:

— Provided we have another screen available where we want to implement deep linking support.
— In the App/Navigators/AppNavigator.js file, we would need to define the screen name in the stack navigator. Along with that, we would need to supply path attribute to define a unique screen name as per the code segment below:

const StackNavigator = createStackNavigator(
    {
      SplashScreen: SplashScreen,
      MainScreen: {
        screen: ExampleScreen,
      },
      ChatScreen: {
        screen: ChatScreen,
        path: 'chat', // this attribute defines deep linking path
      },
  },
  {
    initialRouteName: 'SplashScreen',
    headerMode: 'none',
  }
)

— Then we would need to set the host in the App/Containers/Root/RootScreen.js and the same host needs to be set in the AppNavigator component props as per the code segment below:

render() {
    //Deep linking prefix
    const prefix = 'thecodingmachine://';

    return (
      <View style={styles.container}>
        <AppNavigator
          uriPrefix={prefix}
          // Initialize the NavigationService (see https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
          ref={(navigatorRef) => {
            NavigationService.setTopLevelNavigator(navigatorRef)
          }}
        />
      </View>
    )
  }
}

— As a next step, we would need to set the host and scheme in Android manifest file. And for iOS, we would need to set the same in the Info tab in the xcodeproject.

Describe alternatives you've considered
— That was the simplest solution I could manage, but happy to explore and adapt the code.
— @AurelGit - happy to prep this solution as PR if you think it will be fruitful. Thanks.

Looking for JS files in
/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate

warning: the transform cache was reset.
Loading dependency graph, done.
error: bundling failed: Error: While resolving module App/Config, the Haste package App was found. However the module Config could not be found within the package. Indeed, none of these files exist:

• /Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/App/Config(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• /Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/App/Config/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  at resolveHasteName (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro-resolver/src/resolve.js:236:9)
  at Object.resolve (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro-resolver/src/resolve.js:103:20)
  at ModuleResolver.resolveDependency (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:143:31)
  at ResolutionRequest.resolveDependency (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
  at DependencyGraph.resolveDependency (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
  at Object.resolve (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/lib/transformHelpers.js:264:42)
  at dependencies.map.result (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
  at Array.map ()
  at resolveDependencies (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
  at /Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
  BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓░░░░░░░░░ 49.0% (300/511)::ffff:127.0.0.1 - - [25/Sep/2019:09:32:23 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
  BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓░░░░░░░░░ 49.0% (300/511), failed.

Just got the boilerplate up-and-running. Clicking refresh results in error message 50% of attempts. I assume this is not intended? What could be wrong?

MacOS Sierra 10.12.6 (16G1815)
MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
Started app by running >react-native run-ios

Must be propTypes instead of propsTypes, see https://www.npmjs.com/package/prop-types#usage

It seems that Yahoo's link is not working anymore. I'm getting "There was an error fetching the temperature" message in my app.

Hi guys, I am parisien aussi and pleased that I have found a boilerplate to get started with react-native. I have never developed react-native application before but I am considering making one with your boilerplate. I use ReactJS, redux, saga so it would make sense to start with native for a simple app.

Current React-Native version is v0.61.1 while this repository use v0.60.5.

I am reading react-native documentation and I have read the upgrade react-native guide.
I wonder if there is a strategy in this repo for doing that because I have not seen anything in the README.md.

I have read your README and I really like the bundle you have made, especially the fastlane tools integrated.

The documentation is poor, so I ask for advice on how to get started with the boilerplate.

• Why not expo (honest question)
• is there a migration strategy here?
• is there a documentation for this project?
• is there any other advice I could get from the coding machine before getting my hand dirty ?
• Do you recommend fastlane for newcomer in native development (iOS and Android) or you recommend to get started with the basic first?

Thanks for sharing,

After installing react-native-sensitive-info on a fresh download I was getting this error:

A problem occurred evaluating project ':react-native-sensitive-info'.
> Cannot get property 'minSdkVersion' on extra properties extension as it does not exist

After some poking around it seems this project is using an older version of gradle and the gradle build file doesn't include the minSdkVersion var.

I fixed the problem by replacing android/build.gradle with the gradle config from a fresh react native project.

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.4'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}


task wrapper(type: Wrapper) {
    gradleVersion = '4.4'
    distributionUrl = distributionUrl.replace("bin", "all")
}

Hi guys,

Do you think rewrite this boilerplate with hooks ? :) I think it can extreme perfect.

If you start this boilerplate our developers can attend the develop this boilerplate.

Thanks,
Ozan.

I've been trying to setup the boilerplate with a drawer having tabs as well as stacks, but unfortunately failed it and looking for some help.

I'm not able to open the drawer by sliding to the right and I do not get the drawer icon which is usually on the top left.
It shows the tabs though.

My code of the RootScreen looks like:

/*
 * TABS
 */
const TabsNavigator = createMaterialTopTabNavigator(
	{
		Welcome: {
			screen: ExampleScreen
		},
		Story: {
			screen: ExampleScreen
		}
	}
);

/*
 * DRAWER
 */
const DrawerNavigator = createDrawerNavigator(
	{
		Home: {
			screen: TabsNavigator
		},
		Links: {
			screen: ExampleScreen
		},
		Settings: {
			screen: SettingsScreen
		}
	}
);

/*
 * STARTSCREEN
 */
const AppNav = createStackNavigator(
	{
		// Create the application routes here (the key is the route name, the value is the target screen)
		// See https://reactnavigation.org/docs/en/stack-navigator.html#routeconfigs
		SplashScreen: SplashScreen,
		
		// The main application screen is our "ExampleScreen". Feel free to replace it with your
		// own screen and remove the example.
		MainScreen: DrawerNavigator,
	},
	{
		// By default the application will show the splash screen
		initialRouteName: 'SplashScreen',
		
		// See https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig
		headerMode: 'none',
	}
)

const App = createAppContainer(AppNav)
class RootScreen extends Component {
  componentDidMount() {
    // Run the startup saga when the application is starting
    this.props.startup()
  }

  render() {
    return (
      <View style={styles.container}>
        <App
          // Initialize the NavigationService (see https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
          ref={(navigatorRef) => {
            NavigationService.setTopLevelNavigator(navigatorRef)
          }}
        />
      </View>
    )
  }
}

Any ideas?
I would also much appreciate if this is standard part of the boilerplate.

Thanks,
Zefau

Unable to load script. Make sure you're either running a Metro server
Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle index.android.bundle is packaged correctly for release.

• Instead of copying the right Config/index.[env].js, you could use the __DEV__ variable.
• I would rename App/ into src/ (App/App.js does not sound right to me)
• Why not use built-in fetch instead of Axios?
• The path for the source files is too verbose imo, e.g.
  screens/Splash/SplashScreen.js along with a SplashScreenStyle.js could just be screens/Splash/index.js along with a style.js.
  And that would also make the imports lighter:
  import SplashScreen from 'screens/Splash/SplashScreen' becomes
  import SplashScreen from 'screens/Splash' which is explicit enough.
  Same goes for other folders.
• import PropTypes from 'prop-types' instead of
  import { PropTypes } from 'prop-types'

Hi,
You might have an idea on how to supply the data source for a flat list component. Redux state returns a list of map instead of array of object which is causing flatlist not to render

<FlatList keyExtractor={(item) => item.ID} style={{ backgroundColor: Colors.white, paddingHorizontal: 15 }} data={this.state.listings} extraData={this.state.listings} // renderItem={this.renderUserGroup} renderItem={({ item }) => ( <View> <Text>test</Text> </View> )} />

`const mapStateToProps = (state) => {
// console.log('state.listings.get(listings)', state.listings.get('listings'))
return {
fetching: state.listings.get('fetching'),
listings: state.listings.get('listings'),
}
}

const mapDispatchToProps = (dispatch) => {
return {
getListings: () => dispatch(ListingActions.listingRequest()),
}
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(AllListingScreen)`

console log of data shows its a list

Appreciate if you can shed some light.
Thanks.

This is not an issue about a problem.

For my point of view it is simply a bad implementation of a concept, that is Presentational and Container Components.

If you read this example provided in this post by Dan Abramov You will see clearly how the presentational is separated from the container.

Having said that, I suggest that the example container be changed as follows:

import React from 'react'
import { Platform } from 'react-native'
import { connect } from 'react-redux'
import { PropTypes } from 'prop-types'
import ExampleActions from 'App/Stores/Example/Actions'
import { isHot } from 'App/Stores/Example/Selectors'
import Example from 'App/Screens/Example'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu.',
  android: 'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu.',
})

class ExampleScreen extends React.Component {
  componentDidMount() {
    this.props.fetchTemperature()
  }

  render() {
    let temperature = this.props.temperatureIsLoading ? '...' : this.props.temperature
    if (temperature === null) {
      temperature = '??'
    }

    return (
      <Example
        instructions={instructions}
        temperature={temperature}
        isHot={isHot}
        temperatureErrorMessage={this.props.temperatureErrorMessage}
        onPress={this.props.fetchTemperature}
      />
    )
  }
}

ExampleScreen.propsTypes = {
  temperature: PropTypes.number,
  temperatureErrorMessage: PropTypes.string,
}

const mapStateToProps = (state) => ({
  temperature: state.example.get('temperature'),
  temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
  temperatureIsLoading: state.example.get('temperatureIsLoading'),
  isHot: isHot(state),
})

const mapDispatchToProps = (dispatch) => ({
  fetchTemperature: () => dispatch(ExampleActions.fetchTemperature()),
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ExampleScreen)

And next we can create a screen folder for screens and inside it I suggest create a screen for Example like this:

import React from 'react'
import { Text, View, Button } from 'react-native'
import { PropTypes } from 'prop-types'

import Style from './styles'

const ExampleScreen = ({
  instructions,
  temperature,
  isHot,
  temperatureErrorMessage,
  fetchTemperature,
}) => (
  <View style={Style.container}>
    <Text style={Style.title}>TheCodingMachine boilerplate</Text>
    <Text style={Style.text}>To get started, edit App.js</Text>
    <Text style={Style.text}>{instructions}</Text>
    <Text style={Style.text}>The weather temperature is: {temperature}</Text>
    <Text style={Style.text}>{isHot ? "It's pretty hot!" : ''}</Text>
    <Text style={Style.text}>{temperatureErrorMessage}</Text>
    <Button onPress={fetchTemperature} title="Refresh" />
  </View>
)

ExampleScreen.propsTypes = {
  instructions: PropTypes.string,
  temperature: PropTypes.number,
  isHot: PropTypes.boolean,
  temperatureErrorMessage: PropTypes.string,
  fetchTemperature: PropTypes.func,
}

ExampleScreen.defaultProps = {
  fetchTemperature: () => {},
}

export default ExampleScreen

Renaming the project updates the following files accordingly:

• App/index.js
• App/app.json
• /android/settings.gradle

But the file MainActivity.java gets deleted once renaming the project. Thus /android/app/src/main/java/com/[yourprojectname]/MainActivity.java does not exist.

Manually copying and modifying the files solves the problem.
Thus, adaption of yarn run rename is required.

Originally posted by @Zefau in #22 (comment)

Is it okay to ignore the warning "componentwillreceiveprops is deprecated and will be removed in the next major version" ?

I am quite new to the repo and I cannot make it work on API 23 emulator or a physical Android 5 device. The app crashes once loaded, without any react native red background error. Would appreciate if you can take a look. Remote debugger shows nothing since the RN is not loaded yet I suspect.

react-native run-android completes without any error in console though.

React Native Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 7.60 GB / 15.96 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.3.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.1.0.0 AI-173.4907809

Can you please use the release github tab? That way we would know what are the new features you are adding here in this feature over time. Or maybe add some tags for the releases

Describe alternatives you've considered
We are using this boilerplate for react-web and it's good: https://github.com/react-boilerplate/react-boilerplate/releases

Thanks

Many developers came here since they want to enjoy a carefully crafted RN boilerplate, if it can also provide some best-practice kitchen such as how to implement navigation with redux would be awesome!

Hi there

The project is nicely organised. I love it. Only one little request if you can post a login code, as the example is only demonstrate an api call to retrieve the data, we need an example for post data call as well.

Thanks,
Xiaoyu Chen

Pros and cons of changing the environment like this?

"scripts": {
    "env-dev": "cp App/Config/index.dev.js App/Config/index.js",
    "env-prod": "cp App/Config/index.production.js App/Config/index.js",
    "env-staging": "cp App/Config/index.staging.js App/Config/index.js"
}

Hi,

I'm having a strange behavior after fetching data from a REST API.
The API Service output a JSON Object, but once merged on state it is converted to List Object.

So i end up with a strange object within my container :

List {size: 12, _origin: 0, _capacity: 12, _level: 5, _root: null, …}

With no ways to parse the datas... can't figure out what's happening here...any ideas ?

After succesfull android compile i get this error when launching the app:
error: bundling failed: Error: While resolving module App/Config, the Haste package App was found. However the module Config could not be found within the package.
Thank you.

Running the project, it directly loads the Example screen.

Thanks

instead of having to update the config file all the time, would using an env variable work??

const default_config = {
  default:        true,
  response_type:  'json',
  env:            'should_override'
}

if (process.env['NODE_ENV'] == 'development'){
  env_config = {
    api_url:  'https://query.yahooapis.com/v1/public/',
    env:      'development',
  }
} else {
  env_config = {
    api_url:  'https://query.yahooapis.com/v1/public/',
    env:      'production',
  }
}

export const Config = Object.assign(default_config, env_config);

Is your feature request related to a problem? Please describe.
It is, I am trying to figure out how to get axios interceptor access to my store. So I dont have to manually send and add the tokens all the time.

If there is a way you recommened please let me know?

Hi -

I set up the boilerplate and the app works in the simulator. However, the jest test keeps failing.

`ReferenceError: You are trying to import a file after the Jest environment has been torn down.

  at Object.get BackHandler [as BackHandler] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:222:12)
  at new NavigationContainer (node_modules/@react-navigation/native/dist/createAppContainer.js:204:47)
  at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3435:18)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6606:5)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7563:16)

ReferenceError: You are trying to import a file after the Jest environment has been torn down.

  at Object.get getNavigation [as getNavigation] (node_modules/@react-navigation/core/lib/commonjs/index.js:7:12)
  at NavigationContainer.render (node_modules/@react-navigation/native/dist/createAppContainer.js:464:42)
  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6660:31)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6615:24)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7563:16)

PASS tests/App-test.js
✓ renders correctly (9ms)

console.error node_modules/fbjs/lib/warning.js:30
Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9036
The above error occurred in the component:
in NavigationContainer (created by RootScreen)
in View (created by View)
in View (created by RootScreen)
in RootScreen (created by ConnectFunction)
in ConnectFunction (created by App)
in PersistGate (created by App)
in Provider (created by App)
in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.207s
Ran all test suites.
Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with --detectOpenHandles to troubleshoot this issue.
npm ERR! Test failed. See above for more details.`

npx envinfo --preset jest

Binaries:
Node: 12.4.0 - /usr/local/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
npmPackages:
jest: ^24.8.0 => 24.8.0

Thanks and best regards
Martin

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to introducing the react native boilerplate blog writeup
2. Scroll down to 'Getting Started' section.
3. The instructions followed verbatim for running the file might have some new users confused because the command should be:
   **npx** react-native run-ios
   It is just missing the npx portion of the text.

Expected behavior
New people learning react-native expect the command to run but can't get it to run by only running: react-native run-ios without the npx in the beginning.

Screenshots

Smartphone (please complete the following information):

• Device: [e.g. iPhoneX]

Additional context
It might be helpful to point out that this is last touched in 2018 and thought it might be helpful to new learners if it could be adjusted for them. The site was easy to find by Googling react-native boilerplate.

The eslint config proposed in the boilerplate does not support some features like arrow functions class methods, e.g.

class MyScreen extends React.Component {
  myMethod = () => {
    // ESLint "syntax error" when it should be valid (see RN docs)
  }

  render() {
    return (
      <View style={Style.container}>
        <Button onPress={this.myMethod}>Do it</Button>
      </View>
    )
  }
}

The solution is to simply use babel-eslint as the default parser, it's the one used by RN and Prettier anyway, and it's more modern:

• yarn add babel-eslint eslint-plugin-babel
• edit .eslintrc:
  • add "parser": "babel-eslint",
  • add "babel" at the begining of the plugins array

reduxsauce is now archived.

Use directly redux

Typescript support should be added.

error: bundling failed: Error: While resolving module App/Config, the Haste package App was found. However the module Config could not be found within the package. Indeed, none of these files exist:

axios used by apisauce is deprecated, and seems to not be maintained

error: bundling failed: Error: While resolving module App/Config, the Haste package App was found. However the module Config could not be found within the package. Indeed, none of these files exist:

• /Users/slevin/SEI/ReactNative/react-native-boilerplate/App/Config(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• /Users/slevin/SEI/ReactNative/react-native-boilerplate/App/Config/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  at resolveHasteName (/Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro-resolver/src/resolve.js:236:9)
  at Object.resolve (/Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro-resolver/src/resolve.js:103:20)
  at ModuleResolver.resolveDependency (/Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:143:31)
  at ResolutionRequest.resolveDependency (/Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
  at DependencyGraph.resolveDependency (/Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
  at Object.resolve (/Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro/src/lib/transformHelpers.js:261:42)
  at /Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31
  at Array.map ()
  at resolveDependencies (/Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
  at /Users/slevin/SEI/ReactNative/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
  BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓░░░░░░░ 62.2% (583/739), failed.

Describe the bug
Not entirely sure what the problem is, it's simply failing to launch in the iOS simulator for me

To Reproduce
Steps to reproduce the behavior:

1. clone the repository git clone https://github.com/thecodingmachine/react-native-boilerplate
2. remove the previous git history: rm -rf .git/
3. install the npm dependencies by running yarn
4. in the project root folder: react-native run-ios

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

When I run the app in IOS i'm getting this error:

For some reason the app always starts on ExampleScreen, even when initial route was set to SplashScreen before and now AuthLoginScreen

const StackNavigator = createStackNavigator(
  {
    // Create the application routes here (the key is the route name, the value is the target screen)
    // See https://reactnavigation.org/docs/en/stack-navigator.html#routeconfigs
    SplashScreen: SplashScreen,
    // The main application screen is our "ExampleScreen". Feel free to replace it with your
    // own screen and remove the example.
    MainScreen: ExampleScreen,
      AuthLoginScreen: AuthLoginScreen,
  },
  {
    // By default the application will show the splash screen
    initialRouteName: 'AuthLoginScreen',
    // See https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig
    headerMode: 'none',
  }
)

Also, where is the navigator configured? Seems like this.props.navigation.navigate('AuthLoginScreen') is invalid.

I have taken a copy of the boilerplate and I'm having trouble getting the reducer to update the state.

App/Sagas/index.js

// import { ExampleTypes } from 'App/Stores/Example/Actions'
import { StartupTypes } from 'App/Stores/Startup/Actions'
import { WelcomeTypes } from 'App/Stores/Welcome/Actions'
// import { fetchTemperature } from './ExampleSaga'
import { login } from './WelcomeSaga'
import { startup } from './StartupSaga'

export default function* root() {
  yield [
    /**
     * @see https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html
     */
    // Run the startup saga when the application starts
    takeLatest(StartupTypes.STARTUP, startup),
    // Call `fetchTemperature()` when a `FETCH_TEMPERATURE` action is triggered
    // takeLatest(ExampleTypes.FETCH_TEMPERATURE, fetchTemperature),
    // Call `login()` when a `LOGIN` action is triggered
    takeLatest(WelcomeTypes.LOGIN, login),
  ]
}

App/Sagas/WelcomeSaga.js

import WelcomeActions from 'App/Stores/Welcome/Actions'

/**
 * A saga can contain multiple functions.
 *
 * This example saga contains only one to fetch the weather temperature.
 * Feel free to remove it.
 */
export function* login() {
  // Dispatch a redux action using `put()`
  // @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
  yield put(WelcomeActions.loginLoading())

  // Fetch the account from an API
  const account = {foo:'bar'}

  if (account) {
    yield put(WelcomeActions.loginSuccess(account))
  } else {
    yield put(
      WelcomeActions.loginFailure('There was an error while logging in to the app.')
    )
  }
}

App/Stores/Welcome/Actions.js

/**
 * We use reduxsauce's `createActions()` helper to easily create redux actions.
 *
 * Keys are action names and values are the list of parameters for the given action.
 *
 * Action names are turned to SNAKE_CASE into the `Types` variable. This can be used
 * to listen to actions:
 *
 * - to trigger reducers to update the state, for example in App/Stores/Example/Reducers.js
 * - to trigger sagas, for example in App/Sagas/index.js
 *
 * Actions can be dispatched:
 *
 * - in React components using `dispatch(...)`, for example in App/App.js
 * - in sagas using `yield put(...)`, for example in App/Sagas/WelcomeSaga.js
 *
 * @see https://github.com/infinitered/reduxsauce#createactions
 */
const { Types, Creators } = createActions({
  // Login to the game
  login: null,
  // The login operation has started and is loading
  loginLoading: null,
  // The login was successfully
  loginSuccess: ['account'],
  // A login error occurred
  loginFailure: ['loginErrorMessage'],
  // Register to create an account
  register: null,
  // The register operation has started and is loading the result
  registerLoading: null,
  // The registration was successfully
  registerSuccess: ['account'],
  // A registration error occurred
  registerFailure: ['registerErrorMessage'],
  // Play with a guest account
  playAsGuest: null,
  // The register operation has started and is loading the result
  playAsGuestLoading: null,
  // The registration was successfully
  playAsGuestSuccess: ['guestAccount'],
  // A registration error occurred
  playAsGuestFailure: ['registerErrorMessage'],
})

export const WelcomeTypes = Types
export default Creators

App/Containers/WelcomeScreen/WelcomeScreen.js

import { Text, View, Button } from 'react-native'
import { connect } from 'react-redux'
import { PropTypes } from 'prop-types'
import WelcomeActions from 'App/Stores/Welcome/Actions'
import Style from './WelcomeScreenStyle'

/**
 * This is the welcome screen container component
 * 
 * This screen displays a static image which will be replaced with an animation
 * and two buttons, one to login to the game, one to register,
 * and one to play the game as a guest 
 */
export class WelcomeScreen extends React.Component {
    
    render() {
        console.log('this.props.loginIsLoading',this.props.loginIsLoading)
        console.log('this.props.account.foo',this.props.account.foo)
        let foo = this.props.loginIsLoading ? '...' : this.props.account.foo
        console.log('foo',foo)
        if (foo === undefined) {
            foo = '??'
          }
        // Render a welcome message and three buttons
        return (
            // Update with styles object
            <View>
                <Text id="game-name">Log It</Text>
                <Text id="welcome-text">The fun game to play with anyone.</Text>
                <Button id="login" onPress={this.props.login} title="Login"/>
                <Button id="register" onPress={this.props.register} title="Register"/>
                <Button id="play-as-guest" onPress={this.props.playAsGuest} title="Play as guest"/>
                <Text>The account foo value is: {foo}</Text>
            </View>
        )
    }
}

WelcomeScreen.propsTypes = {
    account: {foo: 'baz'},
    loginIsLoading: PropTypes.boolean
}

const mapStateToProps = (state) => ({
    account: state.welcome.get('account'),
    loginIsLoading: state.welcome.get('loginIsLoading')
  })

const mapDispatchToProps = (dispatch) => ({
    login: () => dispatch(WelcomeActions.login()),
    register: () => dispatch(WelcomeActions.register()),
    playAsGuest: () => dispatch(WelcomeActions.playAsGuest()),
  })

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(WelcomeScreen)```

I have update the libraries to the latest compatible versions and made necessary changes in the code but after renaming the project the app doesn't seem to even load. Gets stuck at loading dependency graph.

I've been using this boilerplate for a couple of weeks now and it's really great. You guys have definitely put a lot of effort in building the perfect and industry standard stuff.

The only thing that I think is missing in this boilerplate is a error/crash reporting tool. I was experimenting with the Bugsnag and integrated it as a service, just like NavigationService and it's doing really good.

It would be really good to see Bugsnag integrated out of the box

Plz help check, our prototype project based upon your starter-kit and seems that the boilerplate doesnt work properly. Tons of thanks

https://reddit.com/r/reactnative/comments/9j0smk/a_react_native_boilerplate_focused_on_separation/e6qljfl/

I just upgraded to Mojave and this seems to error out for me. I think the SDK version needs to be upgraded to the latest to be compatible with Mojave / Xcode 10. Just a heads up!

It might be worth trying Mojave out.

to improve development experience and speed up whole process, the redux's debugger should be integrated. which is easy to do by:

// Debug tool integration;
  let composeEnhancers = compose;
  if (__DEV__) {
    // Use it if Remote debugging with RNDebugger, otherwise use remote-redux-devtools
    // eslint-disable-next-line no-underscore-dangle
    composeEnhancers = (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ||
      require('remote-redux-devtools').composeWithDevTools)({
      name: Platform.OS,
    });
  }

...

  const store = createStore(
    persistedReducer,
    composeEnhancers(applyMiddleware(...middleware)),
  );

I am getting a network error when i try to refresh my app .Please suggest asap as i have a deadline of today for my work.

Thank you for that!
But why you didn't include web support by utilizing react native for web or using some other technique?