React Native ScrollView

This Article Part of React Native Tutorial Series want to start from scrach follow below link

https://infinitbility.github.io/react-native/table-of-contents

Ever have the situation where you sometimes had content that was shorter than the screen size and didn’t require scrolling but occasionally had content taller than the screen size, thus necessitating scroll to allow the user to see all the content.

React native scrollview provide feature to create scrolllable content on both direction ( vertically and horizontally ).

React Native ScrollView example.

App.js


import React, { Component } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
class App extends Component {
  state = {
    products: [
      { product: "Rice", id: 1 },
      { product: "Sweets", id: 2 },
      { product: "Fruits", id: 3 },
      { product: "Animals", id: 4 },
      { product: "humans", id: 5 },
      { product: "sport", id: 6 },
      { product: "kitchen", id: 7 },
      { product: "childrens", id: 8 },
      { product: "men", id: 9 },
      { product: "old people", id: 10 },
      { product: "shafty", id: 11 },
      { product: "transport", id: 12 }
    ]
  };
  render() {
    return (
      <View>
        <ScrollView>
          {this.state.products.map((item, index) => (
            <View key={item.id} style={styles.item}>
              <Text>{item.product}</Text>
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  item: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "left",
    padding: 20,
    margin: 2,
    borderColor: "pink",
    borderWidth: 3,
    backgroundColor: "yellow"
  }
});
export default App;

Scroll horizontally

react native scrollview provide horizontal props. When true, the scroll view’s children are arranged horizontally in a row instead of vertically in a column. The default value is false.

Use like below example

...
    <ScrollView
        horizontal={true}
    >
        {this.state.products.map((item, index) => (
        <View key={item.id} style={styles.item}>
            <Text>{item.product}</Text>
        </View>
        ))}
    </ScrollView>
...

Common Q & A

Common Q & A section explain commonly question ask on google.

How do you get the scroll position in react native?

react native scrollview provide onScroll props to get scrolled position of screen.

just like below example


<ScrollView
  onScroll={event =>
      this.setState({horizontalScroll:event.nativeEvent.contentOffset.x, VerticalScroll:event.nativeEvent.contentOffset.y})
  }
>
// Your list data
</ScrollView>

React native Scroll programmatically

infinitbility already published Tutorial related to Scroll programmatically. please check out the below link.

React native ScrollView scroll to position

Thanks For reading…

React Native ScrollView

App.js

Scroll horizontally

Common Q & A

How do you get the scroll position in react native?

React native Scroll programmatically

More From React Native Tutorial

Basics

Advances

Error & Issue Solution

App.js#

Scroll horizontally#

Common Q & A#

How do you get the scroll position in react native?#

React native Scroll programmatically#

More From React Native Tutorial#

Basics#

Advances#

Error & Issue Solution#

App.js

Scroll horizontally

Common Q & A

How do you get the scroll position in react native?

React native Scroll programmatically

More From React Native Tutorial

Basics

Advances

Error & Issue Solution