Every framework has its bugs and issues and React Native is not different. I’m going to describe the issues which took some time of mine and how I solved them or what workarounds I used to overcome them when there’s no clear solution.

The issues which you’ll see here are present in the latest (by the time of writing this article, and due to the bug with developers who develop on Windows) 0.55.4 version and could be solved already in the next releases but it’s still good to know about them.

If you just starting with React Native then it will be great to know these pitfalls before the release of your application. In case if you’re already handled them it would also be good to check presented solutions (or workarounds) in order to compare it and if yours are better then share it with the community.

Image’s border radius on Android Lollipop

That is the very first issue which I experienced when I started working with React Native. If you place an image with a border radius (ex. rounded image) into an item of a list and you’ll be continuously scrolling this list, eventually you’ll see a black images and after some time the app will crash.

This bug is specific to Android Lollipop and it creates a memory leak which crashes an app. The only solution I found so far is to use the next approach:

It’s not perfect and it has a little flow in having a slightly sharpened corners on Android Lollipop but it’s better to have it than having or no image at all or even worse a time bomb which will crash your app.

Different shadows on different platforms

On iOS you have a full control of the way your shadows will look like, but in case of Android there are no shadows which you can control, there’s only the elevation parameter which is not handled the way you could do it on iOS and it’s available starting from Android 5.0 before that there is even no elevation.

The example how to apply a shadow for Android and iOS in the style:

…Platform.select({

ios: {

shadowColor: "#000",

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.8,

shadowRadius: 2,

},

android: {

elevation: 5

},

}),

So if you’d like to have the same experience on both platforms, you either draw them using external libraries (which I don’t recommend due to performance decrease) or you use images as shadows (also not pretty good solution). If you accept to have different looks then use elevation and shadows and for Android < 5.0 you can use borders.

The opacity issue with floating components

While opacity works fine and expected with relative components, but when you expect an element to be hidden from the end user’s eyes by setting opacity to 0 you receive a surprisingly contrary result. The component becomes fully visible and could move to the screen’s borders. The workaround in this case would be to set opacity down to 0.01 and hide it by using the component’s local state variable which will be responsible for that.

const opacity = scrollY.interpolate({

inputRange: [0, 20, 50],

outputRange: [0.01, 1.2, 1],

extrapolate: "clamp",

}) as any;



this.buttonStyle = StyleSheet.flatten([styles.commonContainer, {opacity}, {transform: [{scale: opacity}]}]) as ViewStyle;

In this example I simply change the size and the opacity of the button by depending on the current list’s vertical scroll position and in outputRange you can see that the lowest opacity it can have is 0.01 instead of 0.

Frequent re-render and not responsive UI

It’s more like optimization but when it comes to testing and publishing apps it becomes one big issue. The layout should always be responsible and should be rendered as fast as possible. Here’s the things I use to speed up the rendering time:

Use as less components as possible

Use StyleSheet.create and StyleSheet.flatten for styles. Don’t create anonymous styles within style parameter

Use PureComponents

Use FlatList for lists

Use native driver with animations

Don’t forget about React.Fragment

In-app notifications in iOS

Every version of IOS below 11 doesn’t provide you with a built in mechanism to show a notification when your app is open but sometimes the need for it might exist, in this case it would be great to find a component which will be responsible for rendering a custom component over your app or make one yourself to show user the notification.

This component can do a trick if you need to implement it as quickly as possible:

That’s it

There will be another list of bugs and solutions. If you know better solutions for these problems then you can always write them down in the comments. Hope you won’t face any in your projects. Happy coding🎉