This is a simple boilerplate that we use for our react native projects.
Use our starter cli here (https://github.com/f22labs/f22-app-starter)
- react-navigation - https://reactnavigation.org/
- axios - https://github.com/axios/axios
- styled-components - https://www.styled-components.com/
- formik and yup - https://jaredpalmer.com/formik/docs/overview, https://github.com/jquense/yup
- react-native-simple-store - https://jasonmerino.me/react-native-simple-store
- react-native-elements - https://react-native-elements.github.io/react-native-elements/
- react-native-dotenv - https://github.com/zetachang/react-native-dotenv
- react-native-dropdownalert - https://github.com/testshallpass/react-native-dropdownalert
- react-native-splash-screen - https://github.com/crazycodeboy/react-native-splash-screen
app
โโโ App.js
โโโ api
โ โโโ config.js # Contains the base url and list of urls used for apis
โ โโโ manager.js # Contains common function to call the apis
โโโ components # Contains reusable components used in the app
โ โโโ AlertMessage # Used for showing dropdown alert
โ โ โโโ AlertMessage.js
โย ย โโโ Header # Contains the custom header related files
โย ย โย ย โโโ Header.js
โย ย โย ย โโโ HeaderCenter.js
โย ย โย ย โโโ HeaderLeft.js
โย ย โย ย โโโ HeaderRight.js
โย ย โย ย โโโ ScreenWithHeader.js
โย ย โโโ Loader # Contains the Loader UI
โย ย โย ย โโโ Loader.js
โย ย โโโ NetInfo # Contains component for rendering no connection view
โย ย โโโ NetInfo.js
โโโ helpers # Helper files
โย ย โโโ StatusBarHeight.js
โย ย โโโ Touchable.js
โย ย โโโ validationSchema.js
โโโ hooks # Used for custom hooks
โย ย โโโ useDropDown.js
โย ย โโโ useLoader.js
โโโ navigation # Used for navigation related files
โย ย โโโ AppContainer.js
โย ย โโโ NavigationService.js
โโโ providers # Contains Context providers used in the app
โย ย โโโ DropDownProvider.js
โย ย โโโ LoaderProvider.js
โโโ screens # Contains list of all screens used in the app
โย ย โโโ FirstScreen.js
โย ย โโโ SecondScreen.js
โย ย โโโ SplashScreen.js
โโโ services # Contains api services
โย ย โโโ UserService.js
โย ย โโโ index.js
โโโ store # Contains config for simple store (offline storage)
โย ย โโโ index.js
โโโ styled_components # List of styled components
โย ย โโโ StyledCommon.js
โโโ theme # Contains the app theme,fonts and colors
โโโ Colors.js
โโโ Fonts.js
โโโ appElementsTheme.js
- Place fonts in
app/assets/fonts
. react-native link
to link the fonts.- Use your fonts in
app/theme/Fonts
and expose it in your app.
- Create a
.env
in root of the project and copy contents of.env.example
into this. - Replace the variable with your preferred variables.
- Import the
ScreenWithHeader
component in the the current screen component. - Wrap the entire screen around the
<ScreenWithHeader>
component like below.
function FirstScreen() {
return (
<ScreenWithHeader>
<Text>
First Screen
</Text>
// ... All the other components go here.
</ScreenWithHeader>
);
}
Props | Type | Description |
---|---|---|
leftComponent | Component | Used for rendering the left component of the header |
centerComponent | Component | Used for rendering the center component of the header |
rightComponent | Component | Used for rendering the right component of the header |
The NetInfo Badge is extracted into a custom component present in app/components/NetInfo/NetInfo.js
can be imported into the Header or any custom component to display the badge.
All the custom hooks must be inside the app/hooks
folder.
Note - If you are using a context provider, expose them as custom hooks. check existing hooks for reference
Hooks | Description |
---|---|
useDropdown | Used for displaying the Alert Messages |
useLoader | Used for displaying the Activity Indicator |
- The
{base_url}
and the endpoints must be configured in theconfig.js
file. - Create your services in the
app/services/{YOUR_SERVICE_NAME}.js
and follow the pattern used in theapp/services/UserService.js
and link the corresponding service inapp/services/index.js
file.
- Go to
app/assets/images
and replace launch_screen.png with your preferred image.
Note: Keep the filename same.
- To customise it completely, edit
LaunchScreen.xib
in Xcode.
- Go to
android/app/src/main/res/
and replace the launch_screen.png in the corresponding drawable folders. - To customise it completely, edit
android/app/src/main/res/layout/launch_screen.xml
in Android Studio or your preferred editor.
If you find any issues with the docs. Feel free to raise an issue.