You try to see what is wrong

Not really an issue I would say, just a couple types missing.

Adding these allows for typescript to recognize navigation and routes as well as avoid typescript not liking the options={homeOptions} object we're passing in.

Other than that I'd say this is the best boiler plate I've seen so far. Simple and to the point allowing a man to work quickly, great job!!

const AuthStack = createStackNavigator<AuthParamList>();
const AppStack = createStackNavigator<AppParamList>();

type AppParamList = {
  Home: undefined;
};

export type AppNavProps<T extends keyof AppParamList> = {
  navigation: StackNavigationProp<AppParamList, T>;
  route: RouteProp<AppParamList, T>;
};

type AuthParamList = {
  Login: undefined;
  ForgotPassword: undefined;
};

export type AuthNavProps<T extends keyof AuthParamList> = {
  navigation: StackNavigationProp<AuthParamList, T>;
  route: RouteProp<AuthParamList, T>;
};

interface HomeOptions {
  title: 'Home';
  headerTitleStyle: {
    fontWeight: 'bold';
  };
  headerRight: () => JSX.Element;
}

const homeOptions: HomeOptions = {
  title: 'Home',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerRight: () => <ThemeController />,
};

While trying to convert the JS version of this great project, I kept running into this problem

"t is not a function. (In 't(i,c)', 't' is an instance of Object)"

while trying to convert

createStore

to

configureStore

This is the

configureStore.js

import { configureStore } from '@reduxjs/toolkit'
import {  persistStore,  persistReducer,  FLUSH,  REHYDRATE,  PAUSE,  PERSIST,  PURGE,  REGISTER,} from 'redux-persist'
import AsyncStorage from '@react-native-community/async-storage';
import { createLogger } from 'redux-logger';
import createSagaMiddleware from 'redux-saga';

//import sagas from 'app/sagas';
import {
  loginReducer,
  paymentReducer,
  signupReducer
} from '../reducer';

const config = {
  key: 'root',
  storage: AsyncStorage,
  blacklist: ['loadingReducer'],
  debug: true, //to get useful logging
};

const middleware = [];
const sagaMiddleware = createSagaMiddleware();

middleware.push(sagaMiddleware);

if (__DEV__) {
  middleware.push(createLogger());
}
const reducers = persistReducer(config, {reducer:{
    loginReducer,
    signupReducer,
    paymentReducer
  }})

const store = configureStore({
  reducer: reducers,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
      thunk: false,
      ...middleware
    }),
})

let persistor = persistStore(store);
const myStore = () => {
  return { persistor, store };
};

export default myStore
//sagaMiddleware.run(sagas);

export const store = configureStore({
  reducer: {},
})

while this is

App.js

import React from 'react';
import { ActivityIndicator } from 'react-native';
import { Provider } from 'react-redux';
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import 'react-native-gesture-handler';
import Navigator from './app/navigation';
import myStore from './app/store/configureStore';
import { enableScreens } from 'react-native-screens';
enableScreens();

const { persistor, store } = myStore();

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    // primary: '#3498db',
    // accent: '#f1c40f',
  },
};

export default function Entrypoint() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <PaperProvider theme={theme}>
          <Navigator />
        </PaperProvider>
      </PersistGate>
    </Provider>
  );
}

What am i doing wrong Sir?

Would be nice to have a helper components directory, with a sample sub directory including a component. Would containers go with that as well? Or a separate directory for helper component's containers?

I am proposing adding a components directory.

Borrowing from https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76
it seems that it may be wise to put both containers and components under the components directory, while keeping screens directory separate. Screens will use helper components.

So, the structure would look something like this:

├── Entrypoint.js
├── actions
├── api
├── config
├── components
  └── Form
      ├── FormView.js
      ├── FormContainer.js
      ├── index.js
      └── styles.js
├── actions
├── lib
├── navigation
├── package.json
├── reducers
├── sagas
├── screens
├── store
└── utils

Would like some feedback on this approach.

Hi @victorkvarghese ,

congratulations for the project, it would be possible to implement the following features:

• i18n
• Typescript
• Axios
• Check darkMode (the first time the app is started, it takes the value of the device if the device uses darkmode is set if it does not use it no, then this state is saved, if the user through the switch decides to change this value, then set the new value is not taken into consideration if the device is in dark mode or not)
• Example login page using SafeAreaView
• Manage the different endpoints for dev, staging, production
• In the structure add a part relating to the Assets
• Manage themes, for example if the device uses dark mode use the dark theme
• Examples of screens using react native paper, I have seen that it is used in the rn-coffee project
• Obfuscate code
• react-native-animated-tabbar
• react-native-app-tour
• Use of Pinned ShortCuts

Hi,

I have an issue, when i trying to integrate firebase authentication.

Seems it has to update more Packages, While i upgrading one by one it not running

Have you upgrade to latest version ?

Hi, I'm new to redux-saga and I don't know how to change the state and call the API use Redux and Redux-saga.
Can you add some example in your project?
Thank you! 😄

Can you please help me to clear or wipe the entire store or set everything in the reducers to initial value?

trying to run the app from a fresh clone but i keep getting this error

error: Error: Unable to resolve module `app/navigation` from `app\Entrypoint.tsx`: app/navigation could not be found within the project.

when I try to run the app with react-native run-android the output is:

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

In this case though we can have them using react-native upgrade but the newly created android is not configured according to the react native navigation

Very nice structure - Thanks @victorkvarghese

After I ran the app, I wanted to check which screen is rendered first, that took me a minute to figure it out. Because in the NavigationStack.js I couldn't see which one is the initial route.

I understand now what you place as a first property to the config object that you pass to the createStackNavigator, becomes the first route that renders. However, passing another object with initialRouteName property makes it easier to read and understand.

I am new to RN, let me know if that does/n't matter.

It works in the structure I installed with react-navigation but it doesn't work in your boilerplate. Can you share a document on this subject? I can run as myapp:// but I can't run as myapp://routename.

I cloned the and followed all commands from instruction to init the app. But then got error even it shown
** BUILD SUCCEEDED **.

Can you please provide one example for write testcases for login page? I have written below test case for login page but it not executes. Can you please help me on that ?

import React from 'react';
import Enzyme, { mount } from 'Enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from '../app/reducers/loginReducer';
import Login from '../app/src/crust/containers/Login'

Enzyme.configure({ adapter: new EnzymeAdapter() });

describe(' test', () => {
const mockStore = createStore(reducer, {count: 0});
const getWrapper = () => mount(



);

it('should add to count and display the correct # of counts', () => {
const wrapper = getWrapper();
expect(wrapper.find('Text').text()).toEqual('Count: 0');
wrapper.find('Button').simulate('onPress');
expect(wrapper.find('Text').text()).toEqual('Count: 1');
});
});

Help us reproduce - tell us about your environment

1. Ubuntu
2. Android
3. Latest Master

Steps to reproduce

1. git clone https://github.com/victorkvarghese/react-native-boilerplate
2. npx react-native-rename reactnativeboilerplate
3. yarn install
4. yarn start
5. npx react-native run-android

Expected result

1. It should run successfully on android

Actual result

Hi,
I am using the boilerplate for one of my project. It's good.
you can add redux navigation.
In the saga the navigation action is throwing error.
yield put(navigationActions.navigateToHomeScreen({}));
Can you show a working example?

Hi @victorkvarghese
Thanks for supporting this boilerplate.
I like this one and determined to start with this boilerplate for my project.
I have issue using redux-saga for api integration.
Just now enabled your commented login saga and test but have above issue.
Looking forward to your feedback asap.