react-native: [Android] ScrollView clips children even with overflow: 'visible'

@kneza23 @sxyshirly @nofacez

If you are using overflow property inside a scroll view or flatlist, add this prop to your scrollview or flatlist

removeClippedSubviews(false)

On Android the default value is true which obstructs it from rendering extra content.

@19BCS1114 Your solution does not seem to work for the Author’s snack: https://snack.expo.io/Xw1c66W8R

Just add the prop removeClippedSubviews={false} to the ScrollView and you’ll see it does not change the UI at all. I checked on an Android device too

Not ideal, for the time being I’m using this workaround to have a scrollable overflowing container:

<FlatList
  data={undefined}
  renderItem={undefined}
  ListHeaderComponent={
    <View style={styles.overflowing}>
      ...
    </View>
  }
/>

@kneza23 @sxyshirly @nofacez

If you are using overflow property inside a scroll view or flatlist, add this prop to your scrollview or flatlist

removeClippedSubviews(false)

On Android the default value is true which obstructs it from rendering extra content.

In my case, the issue was because I set width: screenWidth in contentContainerStyle and when I remove contentContainerStyle, and add a view inside with that style, it working.

.....
        <ScrollView
          // contentContainerStyle={styles.scrollViewContent} //=> remove this
        >
          <View style={styles.scrollViewContent}> {/*add this*/}
          {/*some contents*/}
          </View>
        </ScrollView>

.....
const styles = StyleSheet.create({
  scrollViewContent: {
    flexGrow: 1,
    width: screenWidth,
    overflow: 'visible',
  },

});