twitter.js

import React, { Component } from 'react'
import { View, Image, StyleSheet, ScrollView, Text, Animated, StatusBar } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'

const IMG_SRC = { uri: "https://pulsations.files.wordpress.com/2010/05/randomdog.jpg" }
const IMG_HEIGHT = 200
const NAVBAR_HEIGHT = 64

class Twitter extends Component {
  constructor(props) {
    super(props)
    const yOffset = new Animated.Value(0)

    const translateY = yOffset.interpolate({
      inputRange: [-2, 0, IMG_HEIGHT - NAVBAR_HEIGHT, IMG_HEIGHT],
      outputRange: [-1, 0, 0, NAVBAR_HEIGHT],
    })

    const scale = yOffset.interpolate({
      inputRange: [-IMG_HEIGHT, 0, 1],
      outputRange: [2, 1, 1],
    })

    this.animatedHeaderStyles = {
      transform: [
        { translateY },
        { scale },
      ]
    }
    this.onScrollHandler = Animated.event(
      [{ nativeEvent: { contentOffset: { y: yOffset } } }],
      // { useNativeDriver: true }
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" />
        <Animated.ScrollView style={styles.content} onScroll={this.onScrollHandler} scrollEventThrottle={1}>
          <View style={styles.placeholder} />
          <Text style={styles.title}>RandomDog</Text>
          <Icon name="settings" size={25} color="black" style={styles.settingsButton} />
          <Text style={styles.info}>This is a profile of some random photo</Text>
          <Text>{IPSUM}</Text>
          <Animated.Image style={[styles.header, this.animatedHeaderStyles]} source={IMG_SRC} />
        </Animated.ScrollView>
        <Icon name="arrow-back" size={30} color="white" style={styles.backButton} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  placeholder: {
    height: IMG_HEIGHT,
  },
  content: {
    paddingHorizontal: 10,
    paddingVertical: 20,
  },
  title: {
    fontSize: 18,
    marginBottom: 10,
    fontWeight: 'bold',
  },
  info: {
    fontSize: 16,
  },
  header: {
    position: 'absolute',
    top: -20,
    right: -10,
    left: -10,
    height: IMG_HEIGHT,
  },
  backButton: {
    position: 'absolute',
    top: 25,
    left: 10,
    backgroundColor: 'transparent',
  },
  settingsButton: {
    position: 'absolute',
    right: 10,
    top: IMG_HEIGHT,
  },
})

const IPSUM = `
Gochujang blue bottle tbh chambray, coloring book beard schlitz raclette. Post-ironic slow-carb neutra ugh everyday carry. Deep v pinterest lo-fi, synth distillery unicorn plaid normcore sartorial schlitz copper mug. You probably haven't heard of them VHS austin lo-fi meggings, offal banjo flannel. Meditation fixie tumblr, occupy knausgaard tousled migas semiotics vape bespoke artisan drinking vinegar DIY. Neutra wolf slow-carb helvetica hell of. Enamel pin twee small batch authentic, offal pour-over distillery health goth echo park poutine bitters la croix.

Prism microdosing semiotics, fingerstache kickstarter iPhone skateboard echo park pop-up irony tote bag vexillologist. DIY chambray pickled, neutra actually keytar kickstarter try-hard beard sriracha. Chicharrones keffiyeh man braid squid tumeric. Letterpress keytar cliche offal pop-up, activated charcoal retro portland. Subway tile chartreuse neutra, beard paleo gluten-free photo booth snackwave small batch health goth seitan organic fanny pack. Tilde glossier heirloom, unicorn succulents deep v blog. Hammock bushwick locavore fixie fashion axe iceland, sartorial meh wayfarers glossier authentic street art butcher kickstarter la croix.

Franzen iceland cronut, direct trade PBR&B photo booth master cleanse DIY 90's actually literally. PBR&B viral health goth, franzen kale chips DIY hell of. Trust fund meggings asymmetrical shabby chic raclette gluten-free lo-fi, gastropub next level cold-pressed aesthetic chia swag. Four dollar toast 90's godard, kombucha man braid beard gluten-free mlkshk williamsburg seitan wayfarers. Synth scenester slow-carb, bicycle rights pitchfork yr seitan craft beer literally irony 8-bit. Woke normcore food truck tofu, tousled offal kogi messenger bag meh typewriter chillwave hoodie migas pitchfork. Squid jianbing cold-pressed helvetica, roof party kitsch gastropub kickstarter tofu seitan gochujang hashtag mixtape ramps.
`

export default Twitter