An easy and simple to use React Native component to render large to very large lists of swipable performant pages with intelligent scroll/swipe detection to cushion rough guestures. Supporting both iOS and Android. Check out the docs.

• Supports smart or minimal rendering for very large lists or small.
• Recommended and best used for large lists or used with other touch guestures.
• Initial index can be placed anywhere. Supporting both Android and iOS.
• Supports two ways of rendering contents. Render using function and data or render React.Element children.
• Intelligent scrolling detection to cushion rough swipe guestures.
• Supports both iOS and Android.

:link: Quick Links

• Documentation
• Mobile Kit Marketplace
• React Native Development How To Dos
• Chat

:gem: Install

Type in the following to the command line to install the module.

$ npm install --save react-native-smart-page

or

$ yarn add react-native-smart-page

:tada: Usage Example One

Add an import to the top of the file. At minimal, place array data into the data prop and render the pages using the renderItem prop.

If you like react-native-smart-page, please be sure to give it a star at GitHub. Thanks.

import SmartPage from "react-native-smart-page";
import { View, Image } from "react-native";

//...
render() {
    return (
        <SmartPage
            data={[
                { uri: "https://luehangs.site/pic-chat-app-images/pexels-photo-853168.jpeg" },
                { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg" },
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                { uri: "https://luehangs.site/pic-chat-app-images/photo-755745.jpeg" },
                { uri: "https://luehangs.site/pic-chat-app-images/photo-799443.jpeg" }
            ]}
            renderItem={({ item, index }) => {
                return (
                    <View key={index} style={{flex: 1, backgroundColor: "#000"}}>
                        <Image
                            source={{ uri: item.uri }}
                            style={{flex: 1}}
                            resizeMode="contain"
                        />
                    </View>
                );
            }}
        />
    );
}
//...

:tada: Usage Example Two

Add an import to the top of the file. At minimal, wrap any view in the <SmartPage></SmartPage>.

If you like react-native-smart-page, please be sure to give it a star at GitHub. Thanks.

import SmartPage from "react-native-smart-page";
import { View, Image, Text } from "react-native";

//...
render() {
    return (
        <SmartPage>
            <View style={{flex: 1, backgroundColor: "#000"}}>
                <Image
                    source={{ uri: "https://luehangs.site/pic-chat-app-images/pexels-photo-853168.jpeg" }}
                    style={{flex: 1}}
                    resizeMode="contain"
                />
            </View>
            <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
                <Text style={{color: "#fff", fontSize: 25, fontWeight: "bold"}}>
                    Any kind of View
                </Text>
            </View>
            <View style={{flex: 1, backgroundColor: "#000"}}>
                <Image
                    source={{ uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" }}
                    style={{flex: 1}}
                    resizeMode="contain"
                />
            </View>
        </SmartPage>
    );
}
//...

:book: Full Documentation

Learn more about the installation and how to use this package in the updated documentation page.

:santa: Author

Free and made possible along with costly maintenance and updates by Lue Hang (the author).

:clap: Contribute

Pull requests are welcomed.

:tophat: Contributors

Contributors will be posted here.

:baby: Beginners

Not sure where to start, or a beginner? Take a look at the issues page.

:page_facing_up: License

MIT © Lue Hang, as found in the LICENSE file.