CODEWITHSUNDEEP
react-nativereact-native-scrollview
Mugen
Mugen

Reputation: 9095

Keep content padding when scrolling in ScrollView

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

Upvotes: 1

Views: 3877

Answers (3)

yemd
yemd

Reputation: 498

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

Upvotes: 0

Mugen
Mugen

Reputation: 9095

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>

Upvotes: 0

user10839007
user10839007

Reputation:

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.

Upvotes: 3

Related Questions