Simple React Native Component To Create Full Screen Scroll View – pagescrollview


Category: React React Others | July 9, 2021
Author:SrBrahma
Official Page:Go to website
Last Update:July 9, 2021
License:MIT

react native page scroll view

Description:

pagescrollview is a very simple component for React Native which will help in filling all the available area and to make working scrolling functionality.

How to use it?

1. First, install the component with npm or yarn.

#npm
npm install pagescrollview

#yarn
yarn add pagescrollview

2. Import the required components.

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

3. React Native code.

const items = 20;

export default () => {
  return (
    <PageScrollView backgroundColor='#ebf3f3' 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>
  );
}

4. Add some styles to the scroll view.

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