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

How to custom Image and text bar header? #64

Open
koiosml opened this issue May 8, 2019 · 2 comments
Open

How to custom Image and text bar header? #64

koiosml opened this issue May 8, 2019 · 2 comments

Comments

@koiosml
Copy link

koiosml commented May 8, 2019

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
Copy link

@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
Copy link
Contributor

Nhacsam commented Sep 27, 2019

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

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

3 participants