React native: How to generate space from top in scrollview

Question

it might be silly question to ask but trust me I am new to React Native. Actually, I am working on project where I am using Scroll view, it working fine but I did not achieve my goal what I want when app is start I want to skip top area of an app and scroll to down by default ( for example marginTop:20px .

For example I have header in app when app is start I want to skip header area and want to scroll down to search bar . From top I want to give space of 20px . Could someone please help me how it would be possible Thanks

Answer 1

If you want to give styling to ScrollView then you should use contentContainerStyle . Like

<ScrollView contentContainerStyle={{marginTop: 20}}>
     <Text>Hello World</Text>
  </ScrollView>

for more about ScrollView check the docs Here

And if you want header you can use native base header which is very useful check this.

Answer 2

Check below example. which I created using ScrollView .

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {

  setScrollToEnd=()=>{
      this.scroll.scrollTo({ y: 100, animated: true })
  }

  render() {
    return (

        <ScrollView contentContainerStyle={styles.container}
          ref={ref => (this.scroll = ref)}
          onContentSizeChange={this.setScrollToEnd}>
          <Text style={styles.textStyle}>Top of the page</Text>
          <Text style={styles.textStyle}>Top of the page</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>end of the page</Text>
          <Text style={styles.textStyle}>end of the page</Text>
        </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width:'100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    padding: 70,
  },
});