user2015762 user2015762 - 2 months ago 10
Android Question

React native: children view cannot go beyond parent view on Android but it is working on iOS

I have encountered a problem porting my app from iOS to android. I have built a minimal bug case with which it can be reproduced.

My app is very simple and consists of one component:

const Main = () => (
<View>
<View style= {styles.green}>
<View style={styles.blue}/>
</View>
</View>
)

export default Main;

const styles = StyleSheet.create({
green: {
height:200,
marginTop: 200,
backgroundColor: 'green',
},
blue:{
position:'absolute',
height: 100,
width: 100,
top: -50,
backgroundColor: 'blue',
},
})


But strangely this component renders differently on iOS and Android

iOS



render ios

Android



render android

I would like it to render like on iOS on both devices. You can check code on this repo https://github.com/42void/ReactNativeBug to easily reproduce it.

Thank you!

Answer

In Android overflow property defaults to 'hidden' and cannot be changed.

From 0.23 known issues, apparently isn't fixed yet.

Comments