This is a starter project for react native with redux state management.
Sometimes state management can be difficult in the react native projects.
Redux is used to overcome this difficulty. Also this project helps to you understanding redux environments and start a new project by giving sample scenario.
Main purpose of this project is exemplify usage of basic components (button, switch, text, view etc.), building navigation and state management with redux.
Scenario of screen access created as a sample problem. In this scenario, until users enable screen access for screen one, two or four, can not navigate to screen. This pipeline managed by redux components(reducer, actions, useSelector, useDispatch etc.)
Project folder and file structure are shown as below.
├─ components
├ ├─ CustomButton.js # User defined button component which is responsible for navigation and control access to screens...
├ ├─ CustomSwitch.js # User defined switch component which is responsible for changing operation access screens...
├ ├─ Divider.js # User defined divider UI component...
├ └─ Title.js # User defined Header UI component...
├
├─ components
├ └─ Constants.js # Keep screen navigation title values...
├
├─ redux
├ └─ actions
├ └─ ActionScreenAccess.js # Keep actions of screen access adding and removing situation...
├ └─ reducers
├ └─ ReducerScreenAccess.js # Keep reducer to handle action such as adding screen access & removing screen access..
├
├─ screens
├ ├─ ScreenHome.js # This is initial screen which has components, store, navigation etc. ...
├ ├─ ScreenOne.js # This is sample empty screen...
├ ├─ ScreenTwo.js # This is sample empty screen...
├ ├─ ScreenThree.js # This is sample empty screen...
├
├ App.js
└─ index.js
To install libraries:
cd <project_folder>
npm install
To start project:
npx react-native start
npx react-native run-android
or
npx react-native run-ios
Please read react native documentation for more information about setup environment and starting project.
https://reactnative.dev/docs/environment-setup