Question; Is there a way to only show the title when you have scrolled to top?
cmacdonnacha opened this issue · 1 comments
cmacdonnacha commented
Hey! Great article! I was wondering if you know of a way to only show the title when you have scrolled near the top?
cmacdonnacha commented
Found a way to do this in case anyone needs it:
const titleOpacity = this.state.scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
outputRange: [0, 0.5, 1],
extrapolate: 'clamp',
});
<Animated.View
style={[
styles.titleContainer,
styles.title,
{
opacity: titleOpacity,
},
]}
>
<Text style={styles.title}>{this.props.title}</Text>
</Animated.View>
// add to styles
titleContainer: {
backgroundColor: 'transparent',
marginTop: Platform.OS === 'ios' ? 15 : 25,
height: 32,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
},
title: {
color: 'white',
fontSize: 18,
},