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

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’
}
});

The post Simple React Native Component To Create Full Screen Scroll View – pagescrollview appeared first on Lipku.com.

Flatlogic Admin Templates banner

Leave a Reply

Your email address will not be published. Required fields are marked *