React Native iOS 11 Style Large Title with Support For Search Component & Menu Buttons

README.md

This gist is based on the amazing library react-native-header-scroll-view ( https://github.com/jonsamp/react-native-header-scroll-view )

What I did was extend the base of that library to make it fit the needs of my own project. Which was:

• Adding TypeScript Support
• Adding the option for a search component
• Animation the search component shrink/grow on scroll
• Adding header buttons
• Work with React Navigation

The code has yet to be tested so use at your own risk.

The only two dependcies are

• react-native-iphone-x-helper
• react-native-typography

Which could be easily swapped out.

The code has been quite modified but all credits do go to the original author in terms of figuring out the main logic. There are a couple issues with it right now but it works pretty good (and close to the original)

I might turn this into a proper library in the future but for now I think this gist is sufficent :)

Fade.tsx

import React, { Component } from 'react'
import { Animated, StyleProp, ViewStyle } from 'react-native'

export type FadeDirection = 'up' | 'down'

interface FadeProps {
  visible?: boolean
  style?: StyleProp<ViewStyle>
  children: React.ReactNode
  direction?: FadeDirection
}

interface FadeState {
  visible?: boolean
}

export class Fade extends Component<FadeProps, FadeState> {
  static defaultProps = {
    direction: 'up',
    visible: true,
  }

  private visibility: Animated.Value = new Animated.Value(0)

  constructor(props: FadeProps) {
    super(props)
    this.state = {
      visible: props.visible || true,
    }
  }

  componentWillReceiveProps({ visible }: FadeProps) {
    Animated.timing(this.visibility, {
      toValue: visible ? 1 : 0,
      duration: 200,
    }).start(() => !visible && this.setState({ visible }))

    if (visible) this.setState({ visible })
  }

  render(): JSX.Element {
    // prettier-ignore
    const {
      style,
      children,
      direction = 'down',
      ...rest
    } = this.props
    const { visible } = this.state

    const directions = {
      up: [5, 0],
      down: [-5, 0],
    }

    const test = this.visibility.interpolate({
      inputRange: [0, 1],
      outputRange: directions[direction] || [0, 0],
    })

    const containerStyle = {
      opacity: this.visibility.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      }),
      transform: [
        {
          translateY: test,
        },
      ],
    }

    const combinedStyle = [containerStyle, style]
    return (
      <Animated.View style={visible ? combinedStyle : containerStyle} {...rest}>
        {visible ? children : null}
      </Animated.View>
    )
  }
}

LargeTitleScrollView.tsx

/* eslint-disable no-use-before-define */
import React, { PureComponent } from 'react'
import {
  View,
  ScrollView,
  Text,
  Animated,
  Dimensions,
  StyleProp,
  TextStyle,
  ViewStyle,
  ScrollViewProps,
  NativeScrollEvent,
  NativeSyntheticEvent,
  LayoutChangeEvent,
  StyleSheet,
  TextInput,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native'
import { ifIphoneX } from 'react-native-iphone-x-helper'
import { FadeDirection, Fade } from 'components/animation/Fade'
import { iOSColors } from 'react-native-typography'

const { height } = Dimensions.get('window')
const SEARCH_BAR_HEIGHT = 40

interface HeaderScrollViewProps {
  title?: string
  titleStyle?: StyleProp<TextStyle>
  headlineStyle?: StyleProp<TextStyle>
  children?: React.ReactNode
  containerStyle?: StyleProp<ViewStyle>
  headerContainerStyle?: StyleProp<ViewStyle>
  headerComponentContainerStyle?: StyleProp<ViewStyle>
  scrollContainerStyle?: StyleProp<ViewStyle>
  fadeDirection?: FadeDirection
  scrollViewProps?: ScrollViewProps
  showSearchComponent?: boolean
  searchBarHeight?: number
}

export class HeaderScrollView extends PureComponent<HeaderScrollViewProps> {
  static defaultProps = {
    scrollViewProps: {},
    searchBarHeight: SEARCH_BAR_HEIGHT,
    showSearchComponent: true,
    ScrollComponent: ScrollView,
  }

  state = {
    headerHeight: 0,
    headerY: 0,
    largeTitleHeight: undefined,
    isHeaderScrolled: false,
    searchBarShrinking: false,
    searchBarFixed: false,
  }

  scrollAnimatedValue = new Animated.Value(0)

  componentDidMount = () => {
    const { showSearchComponent } = this.props
    if (showSearchComponent) {
      this.scrollAnimatedValue.addListener((value) => {
        const { searchBarFixed } = this.state
        const { searchBarHeight = SEARCH_BAR_HEIGHT } = this.props
        if (
          value.value < -(searchBarHeight + styles.searchContainer.marginTop)
          && !searchBarFixed
        ) {
          this.setState({
            searchBarFixed: true,
            searchBarShrinking: false,
          })
        } else if (value.value > 0 && searchBarFixed) {
          this.setState({
            searchBarFixed: false,
            searchBarShrinking: true,
          })
        }
      })
    }
  }

  onLayout = (event: LayoutChangeEvent): void => {
    this.setState({
      headerHeight: event.nativeEvent.layout.height,
      headerY: event.nativeEvent.layout.y,
    })
  }

  onLargeTitleLayout = (event: LayoutChangeEvent) => {
    const { largeTitleHeight } = this.state
    const { searchBarHeight = 40 } = this.props
    if (!largeTitleHeight) {
      this.setState({
        largeTitleHeight: event.nativeEvent.layout.height - searchBarHeight + 15,
      })
    }
  }

  handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    const { headerHeight, headerY, isHeaderScrolled: stateIsScrolled } = this.state
    const offset = event.nativeEvent.contentOffset.y
    const scrollHeaderOffset = headerHeight + headerY - 8
    const isHeaderScrolled = scrollHeaderOffset < offset

    if (!stateIsScrolled && isHeaderScrolled) {
      this.setState({
        isHeaderScrolled,
      })
    }

    if (stateIsScrolled && !isHeaderScrolled) {
      this.setState({
        isHeaderScrolled,
      })
    }
  }

  render() {
    const {
      children,
      title = '',
      titleStyle,
      containerStyle = {},
      headerContainerStyle = {},
      headerComponentContainerStyle = {},
      headlineStyle = {},
      scrollContainerStyle = {},
      fadeDirection,
      scrollViewProps = {},
      searchBarHeight = SEARCH_BAR_HEIGHT,
      showSearchComponent,
    } = this.props
    const {
      isHeaderScrolled,
      searchBarFixed,
      searchBarShrinking,
      largeTitleHeight: _largeTitleHeight,
    } = this.state

    const fontSize = titleStyle ? (titleStyle as any).fontSize : 34
    const titleStyles = {
      fontSize,
      lineHeight: fontSize * 1.2,
    }
    const estimatedLargeTitleHeight = titleStyles.lineHeight + ifIphoneX(44, 0)
    const largeTitleHeight = _largeTitleHeight || estimatedLargeTitleHeight
    const expandedLargeTitleHeight = largeTitleHeight
      + searchBarHeight
      + styles.searchContainer.marginTop

    const animatedFontSize = this.scrollAnimatedValue.interpolate({
      inputRange: [-height, 100],
      outputRange: [fontSize * 1.75, fontSize],
      extrapolate: 'clamp',
    })

    const animatedSearchScale = this.scrollAnimatedValue.interpolate({
      inputRange: [-searchBarHeight, 0],
      outputRange: [searchBarHeight, 0],
      extrapolate: 'clamp',
    })

    const animatedSearchScaleReverse = this.scrollAnimatedValue.interpolate({
      inputRange: [0, searchBarHeight],
      outputRange: [searchBarHeight, 0],
      extrapolate: 'clamp',
    })

    const animationLargeTitleHeight = this.scrollAnimatedValue.interpolate({
      inputRange: [-searchBarHeight, 0],
      outputRange: [expandedLargeTitleHeight, largeTitleHeight],
      extrapolate: 'clamp',
    })

    const animationLargeTitleHeightShrink = this.scrollAnimatedValue.interpolate({
      inputRange: [0, searchBarHeight],
      outputRange: [expandedLargeTitleHeight, largeTitleHeight],
      extrapolate: 'clamp',
    })

    const largeTitleAnimation = searchBarShrinking
      ? animationLargeTitleHeightShrink
      : animationLargeTitleHeight

    const searchFieldAnimation = searchBarShrinking
      ? animatedSearchScaleReverse
      : animatedSearchScale

    return (
      <View style={[styles.container, containerStyle]}>
        <View style={[styles.headerContainer, headerContainerStyle]}>
          <SafeAreaView style={[styles.headerComponentContainer, headerComponentContainerStyle]}>
            <View style={styles.headerComponentLeft}>
              <TouchableOpacity>
                <Text style={styles.defaultButton}>Edit</Text>
              </TouchableOpacity>
            </View>
            <Fade
              style={styles.headerComponentMain}
              visible={isHeaderScrolled}
              direction={fadeDirection}
            >
              <Text style={[styles.headline, headlineStyle]}>{title}</Text>
            </Fade>
            <View />
          </SafeAreaView>
        </View>
        <ScrollView
          onScroll={Animated.event(
            [
              {
                nativeEvent: { contentOffset: { y: this.scrollAnimatedValue } },
              },
            ],
            {
              listener: this.handleScroll,
            },
          )}
          scrollEventThrottle={8}
          contentContainerStyle={scrollContainerStyle}
          {...scrollViewProps}
        >
          <React.Fragment>
            <Animated.View
              style={[
                styles.largeHeader,
                showSearchComponent
                  ? {
                    height: searchBarFixed ? expandedLargeTitleHeight : largeTitleAnimation,
                  }
                  : {
                    paddingBottom: 15,
                  },
              ]}
              onLayout={this.onLargeTitleLayout}
            >
              <View style={styles.scroll}>
                <Animated.Text
                  style={[
                    styles.title,
                    titleStyle,
                    titleStyles,
                    {
                      fontSize: animatedFontSize,
                    },
                  ]}
                  onLayout={this.onLayout}
                >
                  {title}
                </Animated.Text>
              </View>
              {showSearchComponent ? (
                <Animated.View
                  style={[
                    styles.searchContainer,
                    { height: searchBarFixed ? searchBarHeight : searchFieldAnimation },
                  ]}
                >
                  <Fade visible={searchBarFixed}>
                    <TextInput placeholder="Search" />
                  </Fade>
                </Animated.View>
              ) : null}
            </Animated.View>
            <Animated.View style={styles.children}>{children}</Animated.View>
          </React.Fragment>
        </ScrollView>
      </View>
    )
  }
}

const containerHeight = ifIphoneX(88, 60)

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'transparent' },
  headerContainer: {
    height: containerHeight,
  },
  largeHeader: {
    borderBottomColor: 'rgba(0, 0, 0, 0.2)',
    borderBottomWidth: 1,
    backgroundColor: 'white',
  },
  headerComponentContainer: {
    height: containerHeight,
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingBottom: 12,
    marginLeft: 20,
    marginRight: 20,
  },
  headerComponentLeft: {
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  headerComponentMain: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerComponentRight: {
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  headline: {
    fontSize: 17,
    lineHeight: 22,
    fontWeight: '500',
    letterSpacing: 0.019,
  },
  title: {
    letterSpacing: 0.011,
    fontWeight: '700',
  },
  scroll: {
    marginLeft: 20,
    marginRight: 20,
  },
  searchContainer: {
    marginTop: 15,
    marginLeft: 20,
    marginRight: 20,
    backgroundColor: iOSColors.lightGray,
    height: SEARCH_BAR_HEIGHT,
    left: 0,
    right: 0,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'flex-start',
    paddingLeft: 15,
    paddingRight: 15,
  },
  search: {
    padding: 10,
    opacity: 0,
  },
  children: {
    flex: 1,
  },
  defaultButton: {
    color: iOSColors.blue,
  },
})

export default HeaderScrollView

Hey it’s exactly what I was looking for! How can I use it? I copy this in a file in my project and then wrap a screen with the component HeaderScrollView? What props has the component?

Also, it works with expo-web right?