How to custom Image and text bar header?

[koiosml]

How are you, Nhacsam?

I have to create animation header like this. https://cdn.dribbble.com/users/194567/screenshots/1716385/movie_animation_phone2.gif

I have installed react-native-image-header-scroll-view npm package. This is my code:

render() {
    return (
            <HeaderImageScrollView
                maxHeight={200}
                minHeight={HEADER_MIN_HEIGHT}
                minOverlayOpacity={0}
                maxOverlayOpacity={0}
                bounces={false}
                headerImage={require("../../../assets/drawer-cover.png")}
                renderForeground={() => (
                    <View style={{ height: 150, justifyContent: "center", alignItems: "center" }} >
                        <TouchableOpacity onPress={() => console.log("tap!!")}>
                            <Text style={{ backgroundColor: "transparent" }}>Tap Me!</Text>
                        </TouchableOpacity>
                    </View>
                )}
                >
                <View style={{ height: 1000 }}>
                    <TriggeringView onHide={() => console.log("text hidden")}>
                        <Text>Scroll Me!</Text>
                    </TriggeringView>
                    <Text>Teenage Mutant Ninja Tutles(2014)</Text>
                </View>

            </HeaderImageScrollView>

    );
}

Is it possible to implement my animation by using your component? If yes, could you please tell me how can I write code to get same animation of my thought? I am looking forward to hearing good news from you :)

Thanks

[jmkitavi]

@Xumochuan yes it is possible to create the animation in question with the Library. Just follow the docs and few available examples and you should be able to get it working in no time.

[Nhacsam]

Thanks @sirjmkitavi for your answer. @Xumochuan did you succeed ?