Skip to content

Instantly share code, notes, and snippets.

@kmagiera
Created April 21, 2017 08:08
Show Gist options
  • Save kmagiera/7ed0c5a33bdce0aeec47a947b1c363ca to your computer and use it in GitHub Desktop.
Save kmagiera/7ed0c5a33bdce0aeec47a947b1c363ca to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment