react-native-template-alecpo v0.1.2
react-native-template-alecpo
ā ļø Thanks for coming, but first...let's take a selfie!š¤³š»
You will need to ensure that the React Native development environment is working correctly. If you haven't already, I suggest taking a look here before continuing.
āļø About the project
The intent of this project is to provide a custom template for React Native developers that wishes to start a brand new application, not by the begin, but having a pre-built project with the most commons and populars libraries and a reasonable pattern for the folder hierarchy.
š¤ How many different libraries do we have?
- @react-navigation/native ā Provide a powerful, easy to use and completely customizable screens navigation in React Native;
- @react-navigation/stack ā Provide a stack navigation model to use on react navigation;
- axios ā "Promise based HTTP client";
- formik ā Helper to build forms in react/react-native easily;
- prop-types ā "Used as runtime type checking for React props and to document the intended types of properties passed to components";
- react-native-masked-text ā "This is a simple masked text (normal text and input text) component for React-Native";
- react-native-safe-area-context ā "A flexible way to handle safe area", is something like a better version of SafeAreaView;
- redux ā "A Predictable State Container for JS Apps";
- react-redux ā Integration of redux to Reacts applications;
- redux-logger ā Allows to log the changes that is made in the redux state (display actions dispatches and store changes in browser console);
- redux-thunk ā Intercept an action and handle with it's behavior and results;
- styled-components ā Have a clean code with native css styling creating custom natives components;
yup ā Validation JS tool to improve the use of Formik library;
š How to use it
It's simple, just run the command bellow on your workspace directory:
npx react-native init MyProjectName --template react-native-template-alecpo
š The folder hierarchy explanation
ā ļø This topic only describes that folders and files that diverges from the original React Native template.
alecpo-template
āāā src/
ā āāā assets/ # Use this folder to storage any kind of assets required by your app.
ā ā āāā img/ # Feel free to divide the images into subfolders .
ā ā āāā svgAnimations/ # svg folder for animations (e.g: used by Lottie library)
ā āāā components/ # Put every kind of reusable custom components here.
ā ā āāā DivisorLine.js # custom component to divide sections or elements in a list.
ā ā āāā Icon.js # custom provided by react-native-vector-icons.
ā ā āāā Label.js # custom text.
ā ā āāā SubmitButton.js # custom submit button.
ā āāā config/ # Folder to the configurations files (e.g: API constants file, Reactotron, i18n, etc).
ā ā āāā api.js # file to define the API's and endpoints constants.
ā āāā navigation/ # Folder for the "navigators" of React Navigation library. Use to structure the folder hierarchy. (Hint: Do this with advance planning).
ā ā āāā RootStackNavigator.js # initial navigator of React Nativagation library.
ā āāā screens/ # Folder for ALL the screens files.
ā ā āāā HomeScreen.js # Initial screen.
ā āāā store/ # Follow the structure to use Redux in your project.
ā ā āāā actions/ # Action types and action creators files.
ā ā āāā reducers/ # "Reducer's" files.
ā ā āāā storeConfig.js # "store" settings file.
ā āāā utils/ # Helpers for your project.
ā ā āāā customPropTypes/ # This folder contains the customs PropTypes that you probably will need.
ā ā āāā enums/ # Enums folders.
ā ā āāā colors.js # File to specify your application's color palette.
ā ā āāā spacing.js # Generic pattern of spacings to your project.
ā ā āāā strings.js # Strings constants used to prevent syntax mistakes and provide a scalable internationalization.
ā ā āāā typography.js # Constants used to customize the "Label" component.
āāā .prettierrc.json # Used to indent your project automatically.
āāā babel.config.js # Allows you to use an alias on import custom modules or components (e.g: #/components/Label).
āāā jsconfig.json # Offers autocomplete for your absolute path using alias (#/).
āāā LICENSE # License file description.
āāā README.md # Template documentation in markdown text.