-
-
Save notgiorgi/49506333b9f0f1c0283eb6b62f450231 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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