Animated Twitter LaunchScreen

AnimatedGate.tsx

import * as  React from 'react'
import { Animated, Easing, StatusBar, MaskedViewIOS, View, ViewStyle } from 'react-native'
import icons from '../../icons'
import lightTheme from '../../config/theme'

interface Props {
  bootstraped: boolean
}

const AnimatedGate: React.FunctionComponent<Props> = (props) => {
  const [animation, setAnimation] = React.useState<Animated.Value>(new Animated.Value(0))

  React.useEffect(() => {
    StatusBar.setHidden(true)
  }, [])

  React.useEffect(() => {
    if (props.bootstraped) {
      setTimeout(() => beginAnimation(), 1200)
    }
  }, [props.bootstraped])

  const beginAnimation = () => {
    const duration = 1000
    setTimeout(() => StatusBar.setHidden(false, 'fade'), 0.6 * duration)
    Animated.timing(animation, {
      toValue: 100,
      duration,
      easing: Easing.bezier(0.42, 0, 0.42, 1),
    }).start()
  }

  const opacity = animation.interpolate({
    inputRange: [0, 30, 70],
    outputRange: [0, 0, 1],
    extrapolate: 'clamp',
  })

  const MainApp = (
    <View style={styles.mainContainer}>
      <Animated.View
        style={{
          flex: 1,
          opacity,
          transform: [
            {
              scale: animation.interpolate({
                inputRange: [0, 50, 100],
                outputRange: [1.05, 1.05, 1],
              }),
            },
          ],
        }}
      >
        {props.children}
      </Animated.View>
    </View>
  )

  const MaskElement = (
    <View style={styles.maskElementContainer}>
      <Animated.Image
        source={icons.twitter}
        style={[
          styles.logo,
          {
            transform: [
              {
                scale: animation.interpolate({
                  inputRange: [0, 30, 100],
                  outputRange: [1, 0.8, 40],
                  extrapolate: 'clamp',
                }),
              },
            ],
          },
        ]}
      />
    </View>
  )

  return (
    <View style={styles.gateContainer}>
      <MaskedViewIOS style={styles.maskedView} maskElement={MaskElement}>
        {MainApp}
      </MaskedViewIOS>
    </View>
  )
}

const styles = {
  gateContainer: {
    flex: 1,
    backgroundColor: lightTheme.secondary,
  } as ViewStyle,
  mainContainer: {
    flex: 1,
    backgroundColor: lightTheme.primary,
  } as ViewStyle,
  maskedView: {
    flex: 1,
  } as ViewStyle,
  maskElementContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  } as ViewStyle,
  logo: {
    width: 120,
    height: 120,
  } as ViewStyle,
}

export default AnimatedGate

icons.ts

export default {
  twitter: require('./twitter.png'),
}

theme.ts

const lightTheme = {
  primary: '#FFF',
  secondary: 'rgb(26, 151, 240)',
  black: '#14171A',
  lightGrey: 'rgb(226, 233, 238)',
  darkGrey: '#657786',
}

export default lightTheme