Created
March 4, 2018 19:23
-
-
Save andigu/1f55755f226cefb3105defc0c39af88c 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 { Animated, Dimensions, Image, StyleSheet, View } from 'react-native' | |
| import MapView from 'react-native-maps' | |
| import LinearGradient from 'react-native-linear-gradient' | |
| import { Body, Card, CardItem, Header, Left, Text, Thumbnail, Title } from 'native-base' | |
| import ContentComponent from './ContentComponent' | |
| const {height: screenHeight, width: screenWidth} = Dimensions.get('window') | |
| export default class MyApp extends Component { | |
| scroll = new Animated.Value(0) | |
| headerY = Animated.multiply(Animated.diffClamp(this.scroll, 0, 56), -1) | |
| render () { | |
| const region = { | |
| latitude: 37.78825, | |
| longitude: -122.4324, | |
| latitudeDelta: 0.015, | |
| longitudeDelta: 0.0121, | |
| } | |
| return <View style={StyleSheet.absoluteFill}> | |
| <Animated.ScrollView scrollEventThrottle={5} | |
| showsVerticalScrollIndicator={false} | |
| style={{zIndex: 0}} | |
| onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.scroll}}}], {useNativeDriver: true})}> | |
| <Animated.View style={{ | |
| height: screenHeight * 0.8, | |
| width: '100%', | |
| transform: [{translateY: Animated.multiply(this.scroll, 0.5)}] | |
| }}> | |
| <MapView style={StyleSheet.absoluteFill} | |
| region={region}> | |
| <MapView.Marker title="Location" coordinate={region}/> | |
| </MapView> | |
| </Animated.View> | |
| <View style={{position: 'absolute', height: screenHeight * 0.8, width: '100%'}}> | |
| <LinearGradient | |
| colors={['rgba(245,245,245,0.0)', 'rgba(245,245,245,0.35)', 'rgba(245,245,245,1)']} | |
| locations={[0, 0.7, 1]} | |
| style={StyleSheet.absoluteFill}/> | |
| </View> | |
| <View style={{ | |
| transform: [{translateY: -100}], | |
| width: screenWidth, | |
| paddingHorizontal: 30, | |
| paddingVertical: 20, | |
| backgroundColor: 'transparent' | |
| }}> | |
| <View style={{...StyleSheet.absoluteFillObject, top: 100, backgroundColor: 'rgb(245,245,245)'}}/> | |
| <ContentComponent/> | |
| </View> | |
| </Animated.ScrollView> | |
| <Animated.View style={{ | |
| width: "100%", | |
| position: "absolute", | |
| transform: [{ | |
| translateY: this.headerY | |
| }], | |
| flex: 1, | |
| backgroundColor: 'transparent' | |
| }}> | |
| <Header androidStatusBarColor={'#81c784'} style={{backgroundColor:'#98e59b'}} backgroundColor={'#98e59b'}> | |
| <Body> | |
| <Title style={{color: 'white'}}> | |
| McDonalds | |
| </Title> | |
| </Body> | |
| </Header> | |
| </Animated.View> | |
| </View> | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment