CODEWITHSUNDEEP
react-native
Liam Bell
Liam Bell

Reputation: 55

Assign style to View wrapper of props.children

I have a component that renders its props.children inside a ScrollView.

const MyParent = ({ children }) => {
  return (
    <ScrollView style={{ height: 1000 }}>
      {children}
    </ScrollView>
  )
}

However it seems that when the component is rendered, the children are wrapped inside a View component. For example, in my code I have:

return (
  <MyParent>
    <MyChild/>
    <MyChild/>
  </MyParent>
)

But when I run the app and inspect the components, a View has been inserted:

<MyParent>
  <ScrollView>
    <View>
      <MyChild/>
      <MyChild/>
    </View>
  </ScrollView>
</MyParent>

I want to position the children elements relative to the parent (specifically, I want the final child item to appear at the bottom of the ScrollView).

I am struggling with this as I don't know how to make the View fill the ScrollView. Applying flexGrow: 1 to the View would get the behaviour I want, but I don't know if it's possible to apply a style to the View. Is there a way I can do this?

Hope that makes sense & thanks in advance

Upvotes: 1

Views: 238

Answers (1)

Kai
Kai

Reputation: 2599

ScrollView automatically inserts this view. You'll want to pass your styles to the contentContainerStyle prop of the ScrollView:

These styles will be applied to the scroll view content container which wraps all of the child views.

Upvotes: 2

Related Questions