5

I'm building an application using react-native was all right until I needed to add ScrollView, no matter what screen I add and the content stops being rendered, no error is displayed, whatever is occurring is silent, I've tried Several things I saw on the internet but nothing solved my problem, I put an example code below...

My code:

export default () => (
    <View style={{flex: 1}}>
        <ScrollView style={{flex: 1}}>

             // My page content here

        </ScrollView>    
    </View>
);

Apparently it's something simple but I did not find the solution, if anyone can help me thank you.

1
  • is it rendering anything without scrollview? I mean if you put something else otherthan scrollview inside outer view component, does it render that or not? Commented Jun 17, 2017 at 20:53

10 Answers 10

17

The code that fixed this for me was to use contentContainerStyle={{flex: 1}} rather than just style. This sets the flex on the outer container of the scrollview, rather than the inner container.

2
  • 2
    This drove me crazy contentContainerStyle is so key!
    – prog
    Commented Jan 12, 2021 at 15:09
  • after adding this is the scroll view is not scrolling
    – user14135278
    Commented Mar 4, 2021 at 6:36
5

Try adding a height and width to the scroll view's style, and then work your way from there.

Or

make it absolute position and set the top, left, bottom and right position to 0 as such

position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
0
3

I think because you used flex style in root and in scrollview. That's effect to your display data not fit in screen. Try to remove flex all of them and run it without flex style first.

3

if you can add some space to end of scrollview , you will probably be able to see all content

 export default () => (
      <ScrollView>
        <View style={{flex: 1,paddingBottom: 300}}>
             // Page content here
        </View>    
      </ScrollView>
    );
1
  • Man, that's amaising and easy solution! Helps me a lot. Thanx!
    – jE Droid
    Commented Jun 2, 2022 at 14:46
1

This should fix problem:

export default () => (
  <View style={{flex: 1}}>
    <ScrollView }>
         // Page content 
    </ScrollView >    
  </View>
);
0

The 'flex: 1' is causing the issue, because ScrollView is used whenever the content overflows, so obviously you shouldn't be specifying it's width. Try this instead-

export default () => (
  <ScrollView>
    <View style={{flex: 1}}>
         // Page content here
    </View>    
  </ScrollView>
);
0

The ScrollView component inherit the View height. You can try this

<View style={{flex: 1, height: 100}}>
    <ScrollView style={{flex: 1}}>
         // My page content here
    </ScrollView>    
</View>

It's late, but maybe it's still helpful.

0

Well, my problem was that I was using percentage on height for each View, it seems that scrollview doesn't works in that way

For example: height :30% won't work height 300 will do

0

The ScrollView gets it's height (Flex) from the view that wrapps it , you might want to wrap it between (<> </>)

0

Gonna thow my 2 pents in here.

I had this issue with a ScollList that was part of a child component.

The child component was being consumed by a parent component.

The parent component was imported and displayed in a Screen.

Screen top View styles: must include flex:1

Parent Component top View style: must include flex:1

Child component that contains ScrollList: requires only cosmetic styles no flex.

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Mar 3, 2023 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.