Stop Scroll on specific point/Component(TabNavigator)

[Chathula]

i am using react-navigation TabNavigator inside parallax scroll view.i need to stop scroll when it comes to start(starting point) of TabNavigator component. but i can scroll other way to get image slider back.

This is how my App currently looks like.

This is what i need to achieve.

currently when i scroll it goes beyond the sticky header.

# My Component

import React, { Component } from 'react';
import { View } from 'react-native';
import ImageSlider from 'react-native-image-slider';
import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

import { MainTabNavigator } from './config/routes';
import MainHeader from './components/mainHeader';
import { STATUS_BAR_HEIGHT } from './constants';

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            position: 0,
            interval: null,
            scrollMarginTop: -100
        };
    }

    componentWillMount() {
        this.setState({ interval: setInterval(() => {
            this.setState({ position: this.state.position === 3 ? 0 : this.state.position + 1 });
        }, 2000) });
    }

    componentWillUnmount() {
        clearInterval(this.state.interval);
    }

    render() {
        return (
            <ParallaxScroll
                style={styles.mainContainer}
                renderHeader={() => <MainHeader />}
                headerHeight={50}
                isHeaderFixed
                parallaxHeight={150}
                renderParallaxBackground={() => null}
                renderParallaxForeground={() => null}
                parallaxBackgroundScrollSpeed={5}
                parallaxForegroundScrollSpeed={2.5}
            >

                <View style={[styles.imageContainer]}>
                    <ImageSlider
                        images={[
                            'http://placeimg.com/640/480/any',
                            'http://placeimg.com/640/480/any',
                            'http://placeimg.com/640/480/any',
                            'https://images.pexels.com/photos/216355/pexels-photo-216355.jpeg?w=940&h=650&auto=compress&cs=tinysrgb',
                        ]} 
                        position={this.state.position}
                        onPositionChanged={position => this.setState({ position })} 
                    />
                </View>

                <View>
                    <MainTabNavigator /> 
                </View>
            </ParallaxScroll>
        );
    }
}

const styles = {
    mainContainer: {
        flex: 1,
        marginTop: STATUS_BAR_HEIGHT,
        overflow: 'hidden'
    },
    scrollContainer: {
        flex: 1,
    },
    imageContainer: {
        zIndex: 0,
        marginTop: -100
    },
};

[z4o4z]

Hi @Chathula, I have just added the new event called onHeaderFixed. It can help you, just look on this example: https://github.com/monterosalondon/react-native-parallax-scroll/blob/master/storybook/stories/FixedChildrenExample/index.js

[Chathula]

@z4o4z, Thank you i will give a try.. for now i just put MainTabNavigator into ScrollView and put and height(calculated height depends on device height and header height). it works well for now on IOS. but for android it doesn't work well as nested scrollviews. just did a small hack. but not soo good. bit laggy. will try this method!