react-native-view-overflow

react-native-view-overflow copied to clipboard

normal Useage

<View style={{height: 200, backgroundColor: 'white'}}>
  <ViewOverflow style={{width: 200, height: 100, backgroundColor: 'pink'}}>
    <View style={{width: 100, height: 50, position: 'absolute', left: 100, bottom: -25, backgroundColor: 'yellow'}}>
        <View style={{backgroundColor: 'skyblue', height: '100%'}} />
    </View>
  </ViewOverflow>
</View>

let we set outside the ViewOverflow area bottom: -25 change to bottom: -50

to fixed it, we can replace View with ViewOverflow

<View style={{height: 200, backgroundColor: 'white'}}>
  <ViewOverflow style={{width: 200, height: 100, backgroundColor: 'pink'}}>
    <ViewOverflow style={{width: 100, height: 50, position: 'absolute', left: 100, bottom: -50, backgroundColor: 'yellow'}}>
        <View style={{backgroundColor: 'skyblue', height: '100%'}} />
    </ViewOverflow>
  </ViewOverflow>
</View>

now we can see it

So，Usage outside the ViewOverflow area seems like:

<ViewOverflow>
    <ViewOverflow style={styles.absolute}>
        <ComponentContent />
    <ViewOverflow>
</ViewOverflow>

Every View with overflowing area must have as parent another ViewOverflow component.