As a developer we always want to build a good application. 📱 But sometimes we miss out on some of the small but important things which can make our application better. In this article, we will see some of the simple tips and tricks to improve the UX (User Experience).

Let's start with the first tip.

1. Add a Loading Indicator during the API call

Ahh! We all know this and its simple, but many times we miss it while developing app.

While making an API call, we should always show a Loading Indicator(Loading Spinner) to the user. This will give a good user experience to the app user. It indicates that some process is going on in the background and the user should wait for some time.

This will be very helpful when the API call takes a long time to complete. In that case, the user will not feel that the application is not responding or crashed. You can take an edge in terms of UX by showing a loading indicator.

How? : You can make a custom loading indicator or use a third party library like react-native-loading-spinner-overlay.

2. Use a same React Native Touchable throughtout the application

React Native provides many Touchables like TouchableOpacity, TouchableWithoutFeedback, TouchableHighlight etc.

Sometimes we use all these inter-changeably. But its an ideal practice to use a same React Native Touchable throughout the application. This will give a uniform touchable behavior to the user while using the app.

How? : Choose one Touchables which suits your requirement and be consistent with it in entire app.

3. Make a habit of checking your application performance and UI of different devices

While developing an application, we always test our application on a single device (generally emulator). But we should also test our application on different devices parallelly while developing. This will help us to find out the performance issues and UI issues of our application on different devices. And it help to fix those issues before releasing the application to production.

This habit will be very helpful in the long run especially when your major part of target audience is Android Users. As Android users have a wide range of devices with different screen sizes and resolutions, so its very important to test your application on different devices and give best UI to all users.

How? : You can setup different devices in your local machine using Android Studio. You can also use a cloud service like BrowserStack, Firebase etc.

4. Handle Keyboard issues

Keyboard issues - one the common issues faced by beginners.

Keyboard issues are very common in mobile applications. There are many keyboard issues like keyboard covering the input field, keyboard not closing when the user clicks outside the input field, keyboard hiding the scroll view content etc. These issues can be very annoying for the user. So its very important to handle these issues properly.

How? : You can use a KeyboardAvoidingView provided by React Native, third party library like react-native-keyboard-aware-scroll-view also handle keyboard issues.

5. Handle iOS Safe Area

iOS Safe Area is the area which is not covered by the notch or the home indicator. This area is very important in terms of UX. Many times we miss this catch and our UI looks bad on iPhone X and above devices. SafeAreaView is highlighted by red color in below image for visual understanding.

How? : React Native provides SafeAreaView API to handle this.

Closing Comments 👋

In this article, We learned how to use the hitSlop property in React Native to increase the touchable area of a button without increasing its size. 📱

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow me for regular update of my articles. 🔗

Rushi Patel, Signing Off! 😊