Fullscreen ScrollView For React Native

Description:

A really simple React Native / Expo ScrollView component that fills all the available area and have a working scrolling.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add pagescrollview
# NPM
$ npm i pagescrollview --save

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { PageScrollView } from 'pagescrollview'

2. Basic usage.

const items = 30;
export default () => {
  return (
    <PageScrollView backgroundColor='#fafafa' viewStyle={styles.viewStyle}>
      {[...Array(items)].map((_,i) => {
        const backgroundColor = `hsl(${Math.floor((360/items)*i)}, 90%, 62%)`
        return (<View key={i} style={[styles.itemView, { backgroundColor }]}>
          <Text style={styles.itemText}>{`${i+1}/${items}`}</Text>
        </View>)
      })}
    </PageScrollView>
  );
}

3. Style the list view.

const styles = StyleSheet.create({
  viewStyle: {
    padding: 10,
  },
  itemView: {
    width: '100%',
    margin: 5,
    padding: 40,
  },
  itemText: {
    textAlign: 'center',
    fontSize: 20,
    fontWeight: 'bold'
  }
});

Preview: