Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blank Screen when scroll over last view #2

Open
fireantlabs opened this issue May 3, 2018 · 1 comment
Open

Blank Screen when scroll over last view #2

fireantlabs opened this issue May 3, 2018 · 1 comment

Comments

@fireantlabs
Copy link

I have a issues with only ios devices: When i scroll down to last view and continue scroll, it will show white screen like this video
https://drive.google.com/file/d/1oeezoBpSy_EgLwYLK2FxQXeGZT87kdge/view
Do you have any solution to fix this problem.
Something like: Show alert ( Cannot load more ... )

@fireantlabs fireantlabs changed the title Blank Screen when sroll over last view Blank Screen when scroll over last view May 4, 2018
@gy-chen
Copy link
Owner

gy-chen commented May 8, 2018

In iOS, ScrollView from react-native support vertical pagination. If want to support vertical pagination in both Android and iOS, can use Platform to determine which OS is running. See below:

import React from 'react';
import { Platform, StyleSheet, Text, View, Dimensions, ScrollView } from 'react-native';
import VerticalViewPager from 'react-native-vertical-view-pager';
 
const { width, height } = Dimensions.get('window');
 
export default class App extends React.Component {
    render() {
        const ViewPager = Platform.OS === 'ios' ? ScrollView : VerticalViewPager;
      
        return (
            <ViewPager
                showsVerticalScrollIndicator={false}
                pagingEnabled>
                <View style={[styles.page_container, {backgroundColor: 'pink'}]}>
                    <Text>Page1: Open up App.js to start working on your app!</Text>
                </View>
                <View style={[styles.page_container, {backgroundColor: 'olive'}]}>
                    <Text>Page2: Changes you make will automatically reload.</Text>
                </View>
                <View style={[styles.page_container, {backgroundColor: 'lightblue'}]}>
                    <Text>Page3: Shake your phone to open the developer menu.</Text>
                </View>
            </ViewPager>
        );
    }
}
 
const styles = StyleSheet.create({
    page_container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width,
        height
    }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants