1

I'm using a simple ScrollView with the following style:

<ScrollView style={
    {
        height: '100%', 
        width: '100%', 
        shadowRadius: 8,
        backgroundColor: 'white',
        shadowOpacity: 0.2,
        shadowColor: 'black',
        elevation: 20,
        shadowOffset: {
            width: 0,
            height: 0
        },
        position:'relative',
        marginTop: 10,
        paddingTop: 10,
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15
        }
}>
    <Content .../>
</ScrollView>

When scrolling down, I'm experiencing no padding of the content, which looks bad.

gif

What style property can improve this visualization?

My environment:

  Expo CLI 3.21.12 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.3.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - /usr/local/bin/npm
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 11.5/11E608c - /usr/bin/xcodebuild
    npmPackages:
      expo: 37.0.0 => 37.0.0
      react: 16.9.0 => 16.9.0
      react-dom: 16.9.0 => 16.9.0
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4
      react-native-web: 0.11.7 => 0.11.7
    npmGlobalPackages:
      expo-cli: 3.21.12

This is tested on Android emulator Pixel 2 XL Android R

Mugen
  • 8,301
  • 10
  • 62
  • 140

3 Answers3

3

Use a prop called contentContainerStyle , like this

    <ScrollView 
       style={{
        height: '100%', 
        width: '100%', 
        shadowRadius: 8,
        backgroundColor: 'white',
        shadowOpacity: 0.2,
        shadowColor: 'black',
        elevation: 20,
        shadowOffset: {
            width: 0,
            height: 0
        },
        position:'relative',
        marginTop: 10,
        paddingTop: 10,
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15
        }}
      contentContainerStyle={{paddingBottom: value}}
    >

this will insert a space at last when scrollview ends.

  • did not change anything in the display – Mugen Jun 27 '20 at 12:44
  • remove height: 100 and try again. Also react native only support px not %. For using percentages, calculate total height using Dimensions and then do processing –  Jun 27 '20 at 13:12
0

I ended up with the following workaround. I'm not pleased with it, but at least it makes sense.

It basically means doing the styling in a neutral wrapping View, and add a buffer for top padding above the ScrollView itself.

<View style={{
        flex: 1,
        height: '100%', 
        width: '100%', 
        shadowRadius: 8,
        backgroundColor: 'white',
        shadowOpacity: 0.2,
        shadowColor: 'black',
        elevation: 20,
        shadowOffset: {
            width: 0,
            height: 0
        },
        position:'relative',
        marginTop: 10,
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15
}}>
    <View style={height: 10, width: '100%'}/>
    <ScrollView>
        <Content .../>
    </ScrollView>
</View>
Mugen
  • 8,301
  • 10
  • 62
  • 140
0

{borderWidth: 10, borderColor: 'white'} on the ScrollView did the trick for me, nothing else worked

yemd
  • 420
  • 4
  • 15