Solution of View Overflow in Android through ReactNative

React Native does a great job providing a React interface to build native mobile apps Android or iOS. However Android and iOS have some particularities that provide different behaviors, different features and different bugs.

 But here I showed only for Android —

 

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?

My process in Android documentation that would enable to avoid clipping children. First I try to apply setClipChildren(false) to all my Views. It didn’t go well, the performance was so slow. So I decided to create a custom View that would enable overflow to children. I 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?

package com.entria.views;

import android. content. Context;

 import android. view.ViewGroup;

import com.facebook. react . views. view. ReactViewGroup;

public class RNViewOverfIowLayout extends ReactViewGroup {

public RNViewOverfIowLayout(Context context) {

super( context) ;

}

@Override

protected void onLayout(boolean changed, int left, int top, in t right, int buttom) {

super. onLayout(changed, left, top, right, bottom) ;

try { ( (ViewGroup) getParent()) .setClipChildren(false) ;

} catch (Exception e) {

  e.printStackTrace( ) ;

       }

   }

} “

 

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s