Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set contentInset and contentOffset in React Native's ScrollView

I am trying to make my content start 100 px from the top in React Native. I have tried with

const OFFSET = 100
const ScrollViewTest = (props) => (
  <ScrollView
    contentInset={{ top: OFFSET }}
    contentOffset={{ y: OFFSET }}
  >
    <Text>Test</Text>
  </ScrollView>
)

But when I render the screen, it starts from 0 px, but if I scroll a little, it will scroll to 100px from the top and stay there.

So it seems React Native doen't trigger the contentOffset and contentInset properties on initialization.

How can I fix this? I have also tried setting automaticallyAdjustContentInsets={false} with no changes.

Also, it seems these properties are for iOS only. Are there any similar properties for Android?

like image 313
Jamgreen Avatar asked Sep 25 '17 20:09

Jamgreen


People also ask

What is ScrollView component in React Native?

React Native ScrollView Component Last Updated : 30 Jun, 2021 The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it. It provides the scroll functionality in both directions- vertical and horizontal (Default: vertical).

Does react native trigger contentoffset and contentinset properties on initialization?

But when I render the screen, it starts from 0 px, but if I scroll a little, it will scroll to 100px from the top and stay there. So it seems React Native doen't trigger the contentOffset and contentInset properties on initialization.

What is the default value of contentsize in UIScrollView?

The default value is 0 for top, bottom, right, and left. contentSize is the size of the content within the UIScrollView and how long it can be within scrollView. Sometimes this is dynamic like pagination or static like a contact list. This might be changing at runtime as well. This can be set programmatically as well.

What is the default value of scroll event in Salesforce?

The default value is 0, which results in the scroll event being sent only once each time the view is scrolled. The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the contentInset.


1 Answers

You should use the contentContainerStyle1 property with a marginTop on your ScrollView.

By using this property it will apply the container wrapping your children (which I believe is what you want in this case) and with the additional benefit of working on both iOS and Android.

I.e.

const OFFSET = 100
const ScrollViewTest = (props) => (
  <ScrollView
    contentContainerStyle={{ marginTop: OFFSET }}
  >
    <Text>Test</Text>
  </ScrollView>
)
like image 144
Peter Theill Avatar answered Sep 20 '22 09:09

Peter Theill