onScrollEnd not trigged on android

[farahty]

hi

thanks for this component , it looks nice and easy i notice that the onScrollEnd event not trigged always on android but it wrks fine in ios

Regards

[n4kz]

Thanks for reporting and sorry for delayed reply. I've tested on recent RN version and can confirm that at least in vertical mode onScrollEnd is not called as expected. I'll try to fix this for next release.

[n4kz]

Updated example to RN 0.48.4 and tested on Android API 25 and 26, and could not reproduce missing callback. Please provide more info and code sample if possible.

[farahty]

below my code :

import React, { Component } from 'react';
import { View, Animated, Text, TouchableOpacity, Platform } from 'react-native';
import { Pages } from 'react-native-pages';
import { Icon } from '../../components';
import styles, { navigatorStyle } from '../../Styles';
import IntorPages from '../../IntroPages.json';

const Page = ({ page, progress }) => {
    const opacity = progress.interpolate({
        inputRange: [-1, 0, 1],
        outputRange: [0, 1, 0]
    });
    const rotate = progress.interpolate({
        inputRange: [-1, 0, 1],
        outputRange: ['30deg', '0deg', '-30deg'],
    });
    const scale = progress.interpolate({
        inputRange: [-1, 0, 1],
        outputRange: [0.3, 1, 0.3],
    });

    return (
        <View style={[styles.container, styles.center]}>
            <Animated.View 
                style={[
                    styles.center, 
                    { 
                        opacity, 
                        transform: [{ rotate }, { scale }] 
                    }
                ]}
            >
                <Icon name={page.icon} color='white' size={150} />
                <Text 
                    style={{ 
                        fontSize: 40, 
                        color: 'white',
                        fontWeight: 'bold' 
                    }} 
                >{ page.title }</Text>
                <Text 
                    style={{ 
                        fontSize: 18, 
                        color: 'white', 
                        textAlign: 'center',
                        marginHorizontal: 50,
                        marginVertical: 20
                    }} 
                >{ page.body }</Text>
            </Animated.View>
        </View>
    );
};

export class AppIntro extends Component {
    static navigatorStyle = navigatorStyle.landing;
    state={ index: 0 }
    onScrollEnd(index) {
        this.setState({ index });
    }
    renderControles() {
        if (this.state.index + 1 === IntorPages.pages.length) {
            return (
            <Animated.View style={styles.introControllsContainer} >
                <TouchableOpacity 
                    style={styles.introButton}
                    onPress={() => {
                        this.pager.scrollToPage(this.state.index - 1);
                    }}
                >
                    <Text style={{ color: 'white', fontSize: 14 }}>Back</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                    style={styles.introButton}
                    onPress={() => {
                        this.props.navigator.resetTo({ screen: 'city360.login' });
                    }}
                >
                <Text style={{ color: 'white', fontSize: 14 }}>Start</Text>
            </TouchableOpacity>
            </Animated.View>
            );
        }
        return (
            <Animated.View style={styles.introControllsContainer} >
                <TouchableOpacity 
                    style={styles.introButton}
                    onPress={() => {
                        this.props.navigator.resetTo({ screen: 'city360.login' });
                    }}
                >
                    <Text style={{ color: 'white', fontSize: 14 }}>Skip</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                    style={styles.introButton}
                    onPress={() => {
                        this.pager.scrollToPage(this.state.index + 1);
                    }}
                >
                <Text style={{ color: 'white', fontSize: 14 }}>Next</Text>
            </TouchableOpacity>
            </Animated.View>
        );
    }
    render() {
        return (
            <View style={[styles.container]}>
                <Pages 
                    onScrollEnd={this.onScrollEnd.bind(this)} 
                    ref={ref => { this.pager = ref; }} 
                >
                    {
                        IntorPages.pages.map((page, index) => <Page key={index} page={page} />)
                    }
                </Pages>
                <View style={{ height: 40 }}>
                    {this.renderControles()}
                </View>
            </View>
        );
    }
}

react-native libraries "react": "16.0.0-alpha.12", "react-native": "0.47.2",

[farahty]

sorry for late response appropriated interests

[JaydenR]

I am getting this issue, only on index 3, when scrolling manually or using scrollToPage on Android Nexus 6 emulator. It seems to be a rounding or precision error.

In Pages/Index.js this statement equates to false and the block is not entered: ` if (1 === this.scrollState && !(offset % base)) {

  this.onScrollEnd();

  this.scrollState = -1;
}`

For some reason, the base is 411.4285583496094 and the offset is 1234.2857666015626, when it should be (I think) 1234.2856750488282 for index 3.

Not sure if this helps but I thought I'd let you know what I had found anyway.

[n4kz]

Thanks for detailed info, it helped me a lot. Looks like weird numbers are coming from explicit conversion to float in RN code. I've fixed comparison in 0.5.6 release.

[JaydenR]

I can confirm that this fixed the issue for me.

You're welcome, thank you very much for your prompt fix and response!

[deehuey]

Thanks ! ! !! ! Fixed at 0.5.6!