`scrollToIndex` seems not to work

[bobmulder]

Again a poorly commented and motivated issue, but I'm trying to do my best within my expensive, little hours ;)

So, I migrated to your new version (1.x), and had to get feeling with the new changes of the naming changes of the props, and the Pager.

However the option scrollToIndex seems not to work. I tried different things:

Implementation 1

Using scrollToIndex as a prop:

        ...
        return (
            <ParallaxSwiper 
                ref="parallax"
                speed={0.75}
                dividerWidth={6}
                dividerColor="white"
                animatedValue={this.animated}
                scrollToIndex={1}
            >
                ...
            </ParallaxSwiper>
        );

Implementation 2

Rendering the ParallaxSwiper is still the same as above, but mark the ref prop.

Adding to my component:

    componentDidMount() {
        this.refs.parallax.scrollToIndex(1);
    }

Both implementations are not working. Is this a bug or am I doing something wrong? Your help is really appreciated!

[zachgibson]

@bobmulder Hey sorry for the confusion, scrollToIndex is a number and should be state. Not sure if having it as state is good or bad but for now it works.

[bobmulder]

Can you please drop me a code example?

[zachgibson]

Setup your initial state:

state = { indexToScrollTo = 0 }

Then pass that state to scrollToIndex prop:

<ParallaxSwiper scrollToIndex={this.state.indexToScrollTo}>
...
</ParallaxSwiper>

Now just set this.state.indexToScrollTo to the index you want to scroll to.

[bobmulder]

Thank you for the example! I've implemented it, but unfortunately no success... At this moment I get the following view:

The part of the image you see is part of the first one (index 0) while I wanted to scroll to index 1...

My code still looks like:

<ParallaxSwiper 
                ref="parallax"
                speed={0.75}
                dividerWidth={6}
                dividerColor="black"
                backgroundColor="black"
                animatedValue={this.animated}
                scrollToIndex={this.state.parallaxIndex}
                showsHorizontalScrollIndicator={true}
            >
                ...
            </ParallaxSwiper>

Hint; changing the speed value made the black gap bigger/smaller...

Thanks again or your help and time!

[zachgibson]

Hmm, not sure why you’re having this issue without seeing the rest of the code. Can you paste your entire file and what device/version your testing on?

[bobmulder]

Versions: react-native-cli: 2.0.1 react-native: 0.49.3 testing on: Android 6

Code (removed some useless code):

class TimelineContentScreen extends Component {

    constructor(props) {
        super(props)

        this.state = {
            foreground: true,
            scrollIndex: 1
        }

        this.animated = new Animated.Value(0);        
    }

    componentDidMount() {
    }

    getIndex() {
        const {items, id} = this.props
        let res = 0;
        items.forEach((item, key) => {
            if(item.id === id) {
                res = key
            }
        })
        return res
    }

    renderBackgroundItem(item) {
        return (
            <Image style={styles.image} source={item.source_url} />            
        )
    }

    renderForegroundItem(item) {
        return (
                <Animatable.View style={styles.container}>
                    <View style={styles.headSection}></View>

                    <Animatable.View ref={(ref) => {this._contextSection = ref}} style={styles.contextSection}>
                        {_contextIcon}
                        {_contextTitle}
                    </Animatable.View>

                </Animatable.View>
        )
    }

    renderItem(item) {
        const background = this.renderBackgroundItem(item) 
        const foreground = this.renderForegroundItem(item)

        return (
            <ParallaxSwiperPage 
                key={item.id}
                BackgroundComponent={background}
                ForegroundComponent={foreground}
            />
        )
    }

    renderItems(items) {
        if (items.length > 0) {
            return items.map((item, index) => this.renderItem(item));
        }
    }

    render() {
        const {navigation, items, id} = this.props;
        const index = this.getIndex();

        return (
            <ParallaxSwiper 
                ref="parallax"
                speed={0.75}
                dividerWidth={6}
                dividerColor="black"
                backgroundColor="black"
                animatedValue={this.animated}
                scrollToIndex={this.state.scrollIndex}
                showsHorizontalScrollIndicator={true}
            >
                {this.renderItems.bind(this, items)()}
            </ParallaxSwiper>
        );
    }
}

[zachgibson]

@bobmulder I think your index issue will be resolved with #10, but for now this should do the trick:

componentDidMount() {
  this.setState({ scrollIndex: 1 });
}

[bobmulder]

Unfortunately the issue isn't solved updating and using #10. Still getting the same screen as I posted above (when the index is not 0).

I will restructure my code first, and try to post a clean example...

[bobmulder]

No progress so far. I discovered that changing the speed attribute changes the black box as I showed above... Any idea how this is possible?

[zachgibson]

What Android device are you using? Also post all of your code, as I will copy, paste, and run it to try and debug this.

[zachgibson]

Fixed in v1.1.4.