react-native-pageable-scrollview

Example one

Example two

Installation

npm install --save react-native-pageable-scrollview

Usage example

See Example/App.js for a more detailed example. See the Wiki usage tips.

import PageableScrollView from 'react-native-pageable-scrollview';

<View style={[styles.main]}>
    <PageableScrollView style={[styles.scroll]} contentStyle={[styles.page]} containerPadding={0}>
        <View style={[styles.content]}><Text style={[styles.normal]}>The first page</Text></View>
        <View style={[styles.content]}><Text style={[styles.normal]}>The second page</Text></View>
        <View style={[styles.content]}><Text style={[styles.normal]}>The third page</Text></View>
        <View style={[styles.content]}><Text style={[styles.normal]}>The fourth page</Text></View>
        <View style={[styles.content]}><Text style={[styles.normal]}>The fifth page</Text></View>
    </PageableScrollView>
</View>

const styles = StyleSheet.create({
    main: {
        flexDirection: 'row',
        width: '100%',
        height: '100%',
        alignItems: 'center'

    },
    scroll: {
        flex: 1,
        backgroundColor: '#F2F2F2',
        height: 360
    },
    page: {

    },
    content: {
        flex: 1,
        marginHorizontal: 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#18A0F0'

    },
    normal: {
        color: '#FFF'
    }
});