1. Use a Design System
Without consistent styling, it's hard to get the best possible results. A Design System is a set of rules and principles that set the foundation for how the application should look and feel. You need 4 things to keep in mind while working with your design system.
- Spacing: While working with a cross-platform application, the screen sizes might vary between different components present on a screen, but make sure to provide consistent spacing between them for a coherent look.
- Color: Choosing the right colors is not only the most important thing but also how you use them. A great solution is to use Color Palettes, where you can name your colors according to the preferred naming conventions, which increases your overall workflow.
Always name your colors in a way that you don’t have to think about how they should look in your application, name your colors in a more defined way so that you can make faster decisions.
For example, ‘Primary’ is a primary color in the application, and ‘Danger’ is the color that would be used in danger icons or anywhere you are enforcing the red color.
- Typography: We often forget about how the fonts change the way our application look in the results. It’s best to stick to a limited set of font families, weights and sizes to achieve a pleasant coherent look.
2. Responsive Style Properties
In Web Applications, the need for responsive design is apparent where the screen sizes can range from a small mobile device to a widescreen desktop device. But in React Native where the target is only mobile devices, it might not work with the same device size, but the variance in screen dimension is already big enough which makes it hard to find that one size that fits all for styling the application.
- To work with responsive design you can define some breakpoints by categorizing different screen devices.
For example:
- With these breakpoints, anything below 321 pixels in width should fall in the category of being a smaller mobile device, and below 768 is a regular mobile device & anything wider than that is a tablet.
3. Use TypeScript
TypeScript and React make a perfect combination, especially if you are working in Visual Studio Code. The benefit that you get by using TypeScript is that instead of relying on React’s PropTyes validation which only happens when the component is rendered at runtime, TypeScript allows you to validate any errors in your project. Also, you can define property types to only accept values available in the theme & with this, your editor will also autocomplete the valid values for you.
4. Static Image Resources
Always manage your static image resources the right way, otherwise, your application will be using a lot of time to work with static files event when it's not required. To add a static image in your application, you have to do it in such a way that the image name require is defined statically.
For example,
5. Use Platform-Specific Styles
React Native offers a built-in API to write platform-specific code, without the Platform API you will end up having a lot of different styles for different platforms (Android & iOS), to organize these styles you can use the Platform module for Stylesheets. You can use the Platform.OS to automatically detect the OS and then apply the right styles.
For example,
6. Create Aliases
Creating aliases is the best way to get rid of the issue with nested imports, such as ActiveButton from ‘../../Components/Buttons’. You can use babel-plugin-module-resolver to create such aliases.
7. Write sagas for asynchrony
Redux is generally programmed to work in a synchronous pattern that looks something like this: Action dispatch followed by reducer acting to change the store - followed by a repeat.
This is a fixed pattern in which redux works. Now, anything that falls out of the natural flow of the Redux is called a side-effect.
export function* loginProcess({payload: session }) {
const { login } = url
yield put(doAuthenticateUserStart())
const data = yield call(makeApiCall, login, { session })
if (data.message || data.errors) {
yield put(doLoginUserError(data))
} else if (data) {
yield put(doLoginUserDone(data))
yield call(continueOrderingProcess)
}
}Now, the question is how do you add these foreign elements? It is where the Redux saga comes into play with its middleware capabilities.
The Redux-saga uses the ES6 feature called generator to neatly include asynchronous code which resembles to be in a synchronous format.
Note: The above code uses JavaScript generator functions, please look into them if this seems confusing.
8. Optimizing React Native Images
Apps build under the React Native framework showcase an advantage of smooth and quick response. Such apps are attuned to delivering high performance.
But certain elements bring in performance issues. One such element is the use of the image in its raw form.
The images used in the React native ideally should be resized for achieving a better load time. It is also advised to store the resized images in the cloud for easy access.
Using a CDN link to route the image back to API can be a fruitful way to improve the load time.
9. Feedback/Highlight Facility In Gesture System
It is important to ascertain how the user is willing to interact with a particular component/button in the app. Either they want to scroll/slide/swipe.
For a better understanding and implementation, React Native comes with a Gesture Responder System. It maps out the lifecycle of a gesture.
Generally, it is advisable to add visual feedback for a gesture touch, so that users are wary of the outcomes. The visual feedback is powered by animation.
Also, the cancel-ability i.e., to abort when the finger touch is moved away from the elements must be included.
10. Using Platform Specific Code & Style
The potential of React Native was to develop a cross-platform native application sharing the codebase. Using platform-specific code is one of the effective React Native Best Practices.
This allowed us to develop an application that fits both iOS and Android versions. It allows the teams that were set aside to develop for the dual-platform to work in tandem.
Having stated that there remains scope for using platform-specific code for initiating style sheets and callbacks, these are just a few areas where you might need platform-specific code.
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
fontFamily: 'Arial',
},
android: {
fontFamily: 'Roboto',
},
}),
},
});There are two specific APIs: Platform.OS and Platform.select. These APIs help to gauge the native platform and apply appropriate styles.
11. Use Safe Area View
In the newer versions of the iPhone, the sensor and the home button overlap with the nav and tab bar components. It is one of the effective React Native Security Best Practices.
This creates a bad user experience and also the interface looks murky. To solve this issue React Native introduced something called safe area view.
The moment you import the safe area view from the RN and substitute it for the view tag, the UI overlaps disappear. Now, you have to import the SAV for each button component i.e the tab and the nave bar.
Also, in the landscape mode, the content seems to overlap with the sensor cluster, so in the view tag for content, you need to import the safe area view.
12. Don’t Use TouchWithoutFeedback
Generally, the buttons component in React Native does not have much to offer in terms of real-time display of controls. To tackle this issue, the RN includes touchable button components in various forms.
The list includes: TouchableHighlight, TouchableOpacity, Touchable Native Feedback, and finally touchable without feedback, this is where the developer needs to be extremely cautious.
The docs available on the RN official website state you should have a good reason for using TouchWithoutFeeedback, as each element must exude visual feedback when clicked.
You can use this touchable element when you do not want to trigger animated feedback when initiating action.