react native scroll

<ScrollView>

<ScrollView horizontal>

<ScrollView pagingEnabled>

ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items than can fit on the screen, you should use a FlatList instead.

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
    return (
      <ScrollView pagingEnabled>
        <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Text style={{ fontSize: 96 }}>If you like</Text>
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Text style={{ fontSize: 96 }}>Scrolling down</Text>
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Text style={{ fontSize: 96 }}>What's the best</Text>
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Text style={{ fontSize: 96 }}>Framework around?</Text>
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Image source={{ uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64 }} />
        <Text style={{ fontSize: 80 }}>React Native</Text>
      </ScrollView>
    );
  }
}

---------------------------------------

FlatList works well for long lists of data, where the number of items might change over time. FlatList only renders elements that are currently showing on the screen, not all the elements at once.

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            { key: 'Devin' },
            { key: 'Dan' },
            { key: 'Dominic' },
            { key: 'Jackson' },
            { key: 'James' },
            { key: 'Joel' },
            { key: 'John' },
            { key: 'Jillian' },
            { key: 'Jimmy' },
            { key: 'Julie' },
            { key: 'Alice' },
            { key: 'Don' },
            { key: 'Frank' },
            { key: 'Gorge' },
            { key: 'Harry' },
            { key: 'Kim' },
            { key: 'Lucy' },
            { key: 'Mary' },
            { key: 'Nancy' },
            { key: 'Obama' },
          ]}
          renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

----------------------------------------

import React, { Component } from 'react';

import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {

  render() {

    return (

      <View style={styles.container}>

        <SectionList

          sections={[

            { title: 'D', data: ['Devin', 'Dan', 'Dominic'] },

            { title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie'] },

            { title: 'V', data: ['Victor', 'Vince', 'Vincent', 'Vladimir', 'Vermon', 'Vito', 'Vinson'] },

          ]}

          renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}

          renderSectionHeader={({ section }) => <Text style={styles.sectionHeader}>{section.title}</Text>}

          keyExtractor={(item, index) => index}

        />

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    paddingTop: 22

  },

  sectionHeader: {

    paddingTop: 2,

    paddingLeft: 10,

    paddingRight: 10,

    paddingBottom: 2,

    fontSize: 14,

    fontWeight: 'bold',

    backgroundColor: 'rgba(247,247,247,1.0)',

  },

  item: {

    padding: 10,

    fontSize: 18,

    height: 44,

  },

})