Solving View Overflow in Android (ReactNative)

React Native does a great job providing a React interface to build native mobile apps (Android/iOS).

However Android and iOS have some particularities that provides different behaviours, different features and different bugs.

One of the issues that we hit is how overflow happen differently in iOS and on Android.

In iOS the parent View won't clip their children views:

iOS View clipping behaviour

On the other hand, in Android the parent View will clip their children views:

Android View clipping behaviour

One way to solve this in Android is to move the children view outside the parent and use absolute style. This works great in simple views but won't scale well for more complex layouts.

How to solve the overflow in Android?

We found a method in Android documentation that would enable us to avoid clipping children:

ViewGroup Android documentation (https://developer.android.com/reference/android/view/ViewGroup.html#setClipChildren(boolean))

First we try to apply setClipChildren(false) to all our Views. It didn't go well, the performance was so slow.

So we decided to create a custom View that would enable overflow to children. We wrote the react-native-view-overflow bridge and the performance is great.

How to use react-native-view-overflow?

yarn add react-native-view-overflow
react-native link react-native-view-overflow

The link only happens on Android, as iOS has no clip of children behaviour as default.

So you enable ViewOverflow just wrapping your component in ViewOverflow:

import ViewOverflow from 'react-native-view-overflow';

<ViewOverflow>
    <ComponentToEnableOverflow />
</ViewOverflow>

How this works on Android?

The code that enables this is:

react-native-view-overflow android bridge code

It will setClipChildren to false when onLayout method of this View has been called, we set the parent of the View itself so the View won't be clipped as well.

Newsletter

Subscribe to my newsletter for new content https://sibelius.substack.com/