Element overflow hidden in React-Native Android

Question

I have an app here where I need to put the logo in the navbar. That need to overflow the scene layout. Work well in Ios with no problem but in android seem like he not working. I put the code at the bottom of the images. As you can see I use EStyleSheet so that let me use %.

IOS

Android

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import EStyleSheet from 'react-native-extended-stylesheet';
import { View, Platform } from 'react-native';
import { SmallLogo } from './components';
import { checkColor } from './helpers';
import {
  HomeScreen,
  ImagePickerScreen,
  WaitingResponseScreen,
  ResultsScreen
} from './modules';
import Colors from '../constants/Colors';

const styles = EStyleSheet.create({
  navStyle: {
    flex: 1,
    marginTop: '5%',
    alignItems: 'center',
  },
  logoCircle: {
    backgroundColor: '$whiteColor',
    height: 60,
    width: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

const logoNav = result => (
  <View style={styles.navStyle}>
    <View style={styles.logoCircle}>
      <SmallLogo color={checkColor(result)} />
    </View>
  </View>
);

const pdTop = Platform.OS === 'ios' ? 64 : 54;

export default () => (
  <Router
    sceneStyle={{ paddingTop: pdTop }}
    navigationBarStyle={{ backgroundColor: Colors.greenColor }}
    renderTitle={props => {
      if (props.result) {
        return logoNav(props.result);
      }
      return logoNav(null);
    }}
    backButtonTextStyle={{ color: Colors.whiteColor }}
    leftButtonIconStyle={{ tintColor: Colors.whiteColor }}
  >
    <Scene
      key="home"
      component={HomeScreen}
    />
    <Scene
      key="imagesPicker"
      hideBackImage
      component={ImagePickerScreen}
    />
    <Scene
      key="waitingResponse"
      backTitle="Back"
      component={WaitingResponseScreen}
    />
    <Scene
      key="results"
      backTitle="Back"
      initial
      component={ResultsScreen}
    />
  </Router>
);

Answer 1

In Android you cannot draw outside of the component's boundaries, which is a very annoying thing. I usually do the following as a workaround: Wrap your component in a new <View> that wraps both the former container and the overflowing data. Set the view backgroundColor to 'transparent' so that it is invisible, and the pointerEvents prop to 'box-none', so that events get propagated to children. The dimensions of the view should be those of the former top component plus the overflow (in your case, it is just the height), but I think this should also work with Flexbox nicely in some circumstances.

Answer 2

This is as pretty epic known issue.

• Github issue from 2015
  overflow:hidden in React-Native Android
• React Native Known Issus page
  The overflow style property defaults to hidden and cannot be changed on Android
• Top trending feature request on the official React Native request board.
  Feature Requests - React Native

Upvote here to bring the issue more attention.

Answer 3

Following up on martinarroyo's answer. Unfortunately he's right, currently there's no real better way, however, react-native 0.41 (not stable yet) promises to add android support for overflow: visible which is great news, because the workaround isn't all that fun...

Answer 4

I had the similar problem and I found this amazing article on medium.com. https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd

According to the article, you can use react-native-view'overflow library (a bridging header written to support the overflow in react-native android.

All you need to do is wrap the overflowcomponent in the <ViewOverflow>. Hope this helps!