What Are The Ways To Capture User Feedback in React Native Application?

There’s nothing like receiving real feedback from your users. But the question is how to capture that feedback. Here we will discuss everything about how you should prompt them, when you should prompt them, and what tools can be used to capture the user’s feedback in react native application. 

Let’s have a look at some of the bad ways or bad times when applications ask for a feedback or a review:

• When a user first open the app

• In the midst of an important action, such as checking out

• When they take up the entire screen and don't let the user do anything unless he/she does their feedback thing. 

This perhaps provides a lesson! If you are also a React native developer looking out for that ultimate solution to capture user feedback, crash reports, bug reports, and more, then check them out here! 

Performance is one aspect that can entirely change the overall perception of the service that you deliver. Although, the fact is that we sometimes have a hard time matching our expectations with that of the customers’ on that aspect. 

Good Ways and Right Time to Ask For Feedback

After noting some bad ways, let’s have a look at a few places/times you could ask for user feedback and get good responses:

• When the user completes an important action, such as checking out. This implies detecting when an action is complete and not just randomly asking for feedback after a particular amount of time. 

• When they carry out a similar action many times. For instance, your app provides them a random joke and they press on the “New Joke” button 10 times. This would be a great opportunity to ask them. 

• When they shake their phone vigorously out of frustration. You may ask them if they are facing some issues?

Some Best Practices for Capturing User Feedback 

The Feedback Screen

There are a variety of ways in which you can present the request for feedback or review or bug report. The easiest way, however, is by adding a global modal screen that you can access and also present from anywhere in your app. You can do this by developing a new screen having a form of some sort and then adding a stack navigator as new root navigator. 

With such setup, you can now open the Feedback screen from anywhere in your app through this.props.navigation.navigate(‘Feedback’) and it will emerge on top of the current screen.

Presenting Feedback Form after a Particular Number of Actions

You can either do this based on actions in a single component or on a larger scale. For instance you wish to ask for feedback after 15 total actions instead of say, 5 single actions. You can track the number of actions in Context or Redux and when that value hits the desired number, just prompt them (avoid doing it in case they are doing some important task)! You are required to just increment a clickCount on state whenever an action is being taken. When it hits your desired number, it will reset the number and open the feedback screen.

Provide The User a Way Out

Do not forget to provide the user a clear way to get out of submitting the feedback! Maybe they don’t want to do it, don’t have the time, or just are aware of what is going on. Make it very clear how to get out. Always leave a good impression. 

Remember that you are developing an application that provides value to them. Feedbacks/reviews will come eventually, but do not force it.

Outsourcing Feedback and Bug Report Capturing 

With all that said, it is also important for you to set up something on the backend so as to capture that feedback and present it to the product owners. That’s quite a work and code for you to maintain. If you are keeping your focus on the product that you are building and not much on the support system that keeps things going, we get you. Capturing feedback and bug reporting are definitely necessary but not everyone wants to build. 

And so, there are some tools such as Instabug to handle all that for you. You can use it to not only capture user feedback and bug reports, but also to detect product exceptions and crashes.

TouchableOpacity Component 

There is a great and simple solution in React Native - TouchableOpacity component on all components which accepts user interactions. This will provide feedback to the user during the interaction and is an amazing way to indicate that something is going to occur after the interaction.

Skeleton Screens

If the click results in opening a new screen, then you should probably think about your data loading. Generally, a good approach is to open a new screen quickly, render the content that you have, and display a loader or some placeholder component while the content is loading. This technique is known as Skeleton Screens.

In case, your click results in something else, like adding an item to your favorites, cart, or post a chat message, often this will contain a remote API call. In such a situation, you should act as if the endpoint did already respond successfully. This pattern is known as Optimistic UI and is widespread across the industry.

Images 

A huge aspect about the performance and usability of your React Native applications is image. When talking about it, the browser is doing a big job dealing with images, speaking of downloading, scaling, caching, decoding and displaying them - and all this happening in a streamed way.

Use Of an Image Caching Solution

React Native code provides an Image component, which does an amazing job at displaying a single image, though has some issues while dealing with a lot of them like flickering issues and also when many images are being loaded in the apps, they at some point stop loading. In such a case, switch to react-native-fast-image.

Load Images the Size You Need Them

React-native-fast-image will solve a lot of your issues, however, you might still face some random crashes in your app linked to some images. This might be due to you asking your app to download, cache, and scale tens of Images, each one of them weighing several hundred KiloBytes.
In any case, be careful about the size as well as the amount of the images that you are loading, since this puts a lot of pressure on the device. Doing a big part of the job not on the device but before is a good solution.
Even if you do not have any memory issues with images, it is still a good practice to size your image in the exact dimension that you will display them. This will result in less pressure on your user device.

You can use an Images Scaling CDN solution which would allow you to download images scaled precisely at the size you would display it. CloudImage is a great choice for this which allows you to request an image on the fly with a specific dimension.  

Make Use of Pure Components Wisely 

React Native applications are, after all, React applications. Most of the best practices which are good for React apps are also good for React Native apps. Probably the most popular best practices around React performances concerns the use or not of PureComponent or React.memo(). In general, unnecessary re-render in React is not an issue, however can become one when it comes to complex applications. PureComponent is a good way to prevent a component to re-render when the props did not get changed. 

Some developers consider it a good pattern to use PureComponent by default while implementing a new Component. However, note that this can prove to be more harmful than helpful and is a good example of Evil Premature Optimization.

In case you really wish to reduce re-render, then while instancing a component, you should avoid creating any props of that PureComponent in your parent render method. 

Avoid Creating any New Props At Render Time When Using a PureComponent

The two major cases when providing props are giving new objects and new functions. The example mentioned above also shows giving a child Component as Children Props, although if you go beyond JSX, at the end, it is just a usual JS object.

Also note that arrays are objects. While switching your component to a more functional style, always know that most functional functions, which themselves are pure, form new references. Again, do not call these functions at render time. 

Avoid Risks When Going Functional 

When using React Native, there’s yet another pattern that you might use a lot - renderProps. This implies giving as props a function that returns a component. From the point of view of props, a renderProps is just a usual function provided as props, and so the best practice is to not create renderProps at runtime.

Avoid Using HOCs on The Fly

When your application becomes complex and you wish to share some common pattern across your component, it is not infrequent to use High Order Components (HOCs). Making use of HOCs is rather a good practice even if this sometimes gets arguable as it increases indirection. It can, however, increase the complexity of your code comprehension. 

Wrapping Up

Hope this was a good and helpful read. Any personal tips to share? Do share with us. And if you have any query, please put it there and we will do our best to answer.