janicduplessis/react-native-scrollable-header

Question; Is there a way to only show the title when you have scrolled to top?

cmacdonnacha opened this issue · 1 comments

Hey! Great article! I was wondering if you know of a way to only show the title when you have scrolled near the top?

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,
  },