2

I'm trying to make the ScrollView child the same size, as the scrollView itself. The code is pretty straightforward:

  <View style={{ flex: 1 }}>
    <ScrollView style={[{ flex: 1, backgroundColor: 'green' }]}>
      <View style={{ flex: 1, backgroundColor: 'red' }}>
      </View>
    </ScrollView>
  </View>

The issue is that locally on the simulator I'm getting the green screen (child view is not even presented in the elements inspector).

On the facebook tutorials the result is different:

enter image description here

Why it works differently?

Vladyslav Zavalykhatko
  • 15,202
  • 8
  • 65
  • 100

2 Answers2

4

The difference you're experiencing is actually a discrepancy between React Native Web, which the official React Native documentation uses in its examples, and React Native.

Given the fact that React Native Web does not directly rely on React Native as a dependency, this inconsistency is most likely due to a different implementation of the <ScrollView> component and how the styling prop is handled and/or propagated.

In general, I wouldn't take for granted the examples provided in the official docs if they also have a device to show the results, because most likely those examples are tailored to work on React Native Web which may or may not (like in this case) behave like React Native.

Details

React Native's <ScrollView> actually wraps the child views into a <ScrollContentContainerViewClass>, and for this reason there needs to be a differentiation between the styling that goes to the scroll view itself (usual style prop) and the styling for this wrapper (the contentContainerStyle mentioned in @yangguang1029's answer:

// in render function of ScrollView class.
const contentContainer = (
  <ScrollContentContainerViewClass
    style={contentContainerStyle}> // styling for inner container view.
    {children}
  </ScrollContentContainerViewClass>
);

// other operations...

return (
  <ScrollViewClass {...props} ref={this._setScrollViewRef}> // here the "style" prop is propagated.
    {contentContainer}
  </ScrollViewClass>
);

Source: React Native ScrollView source on GitHub

Matei Radu
  • 2,038
  • 3
  • 28
  • 45
  • 1
    Yeah, I think you are right. anyway seems like a small documentation issue – Vladyslav Zavalykhatko Oct 10 '18 at 10:02
  • 1
    Indeed, but it's a bit tricky for the examples: writing the correct RN example would show the users an incorrect result in the RNW "device", confusing equally as much as you where. – Matei Radu Oct 10 '18 at 10:06
  • 1
    Thanks! This answer and comments helped me a lot, and lead me to adopt Platform specific styles approach, injecting in some cases different styles in web and native with `...Platform.select()`. – KeitelDOG Apr 29 '22 at 00:07
0

Add contentContainerStyle={{flexGrow: 1}} prop to ScrollView and its children's flex:1 would work. So you don't need to calculate it manually

from the post: Scrollview and child with flex: 1

yangguang1029
  • 1,813
  • 14
  • 16