CODING STANDARD FOR REACT NATIVE
1. CODE STRUCTURE
- Put all your imports in order at the very top of the code file. You shall ideally prioritize as follows:
import React from 'react';
import PropTypes from 'prop-types';
import {useTheme} from 'styled-components';
// Components
import {Picture} from '../';
// Icons
import {GreaterThan} from '..//img/icons';
// Styled Components
import {
Row,
H5,
SubTitle,
BulletIn,
HorizontalSpacer,
Caption,
} from '..//img/styles';
import {CardContainer, PatientDetailContainer, StatusContainer} from './styles';
// Utils
import normalize from '../../utils/pixelDensityHandler';
Ensure all your imports statements are on new lines, making your imports clean and easy to understand for all the components, third-party libraries, etc. Treat props as read-only. Do not try to modify them.
- Use index.js for each folder to export so that all the imports are referenced on the index.js file, and you don't have to write import statements again and again for every file.
// Components
import {PatientListHeader, PatientCard, SearchBar} from '../../components';
- It's easy to get confused about whether to use double quotes (" ") or single quotes (' ') while working with react. The simple answer is: to maintain consistency in whatever you're using. Also, consider that you use double quotes (" ") for jsx attributes and single quotes (' ') for the js code (follow the standard way or maintain consistency).
- Dividing the whole app into components and then working on it on a separate file is a good practice to maintain clean code.
- Place all your standard CSS files in one common file
3) Do you sometimes use CSS styles with JSX? But it's a bad practice. Always create styled-components for each element styling and put all the styling under styles.js files only.
Create many utility files that can help you remove duplicate code from multiple files.
Create multiple files instead of writing a big file. (Componentization of code: fix to small functionality for each file).
Separate all your service calls into a separate file. If it’s a big project, try to split the services into multiple files. (name convention module_name.service.js).
Name your files logically according to the job that they perform.
Clean code is self-commenting (using the right variable names and function names). Use comments only to explain complex functions.
Use the dry principle(don’t repeat yourself).
Remove console. Logs — unless you have strong motivation why you would like it?
Avoid multiple if-else blocks. Instead, use ternary — best for clean code practice
Remove all commented-out codes. The biggest motivation for writing comments is the bad code that you write. It would be good to spend more time writing descriptive functions, methods, and filenames that are self-explanatory.
2. STRUCTURING THE FOLDER
Your App’s directory structure shall be as follows:
└── /src
├── /assets - Contains static assets such as images, SVG, company logo, etc.
├── /components - reusable components like buttons, forms
├── /contexts - Contains all the contexts like theme setup
├── /navigations - Routes-related code would be here
├── /services - JavaSript modules
├── /store - redux store
├── /utils - utilities, helpers, constants.
├── /screens - majority of the app pages would be here
├── index.js
└── App.js
3.BASICS
4. NAMING CONVENTIONS
5. AVOID INLINE STYLING
Using inline stylings is much harder to maintain if a change is to be made there will be hundreds of places in the code you will have to search and change unless all styles are clearly defined with unique class names in a CSS stylesheet.
For any property you want to change, you would have to simply modify the corresponding class name properties in the stylesheet, all the Views that use the class name will be affected.
A well-defined stylesheet is extremely helpful while building complex React Native apps. Use React Native Stylesheet object to add styles specific to a certain component. To achieve this we’re using the styled-components.
6. DO USE A SAFE AREA VIEW
** If you want your app to look good on every iOS device you should use SafeAreaView which provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).
7. DO USE A KEYBOARD AVOIDING VIEW
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.
8. ALWAYS USE LOADERS WHILE FETCHING THE DATA FROM API
** This is something that is very easy to implement. Adding Loading Indicators makes your app look more responsive and professional to users.
9. BUG AVOIDANCE
10. ENVIRONMENTAL VARIABLES
If you are using some external APIs for data you must use the .env file to store your sensitive credentials like API keys. Environment variables can also help us to store our API link in one location so that we don’t have to change the link in each file manually. As React Native doesn’t recognize the .env file. We need to manually configure this by using the babel-plugin-inline-dotenv package.
Open the .env file and declare your environment variable.
REACT_APP_PROTOCAL=https
REACT_APP_API_SERVER_HOST=api.sample.com
11. REACT COMPONENTS
- Class Component
**import React from 'react';**
**import {View, Text, Button} from 'react-native';**
**class App extends React.Component {**
**constructor(props) {**
` `**super(props);**
` `**this.state = {change: true};**
**}**
**render() {**
**return (**
**<View>**
**<Button**
**title="Click Me"**
**onPress={() => {**
**this.setState({change: !this.state.change});**
**}}**
**/>**
**<Text>{this.state.change ? 'Hello World' : 'Welcome'}</Text>**
**</View>**
**);**
**}**
**}**
**export default App;**
1. **Functional Component**
**import React from 'react';**
**import {View, Text, Button} from 'react-native';**
**const App = props => {**
**const [change, setChange] = React.useState(false);**
**return (**
**<View>**
**<Button title="Click Me" onPress={() => setChange(!change)} />**
**<Text>{change ? 'Hello World' : 'Welcome'}</Text>**
**</View>**
**);**
**};**
**export default App;**