maps.js

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

const AMSTERDAM = {
  latitude: 52.3702,
  longitude: 4.8952,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
}
const OFFSET = 450

class Maps extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <MapView style={{flex: 1}} initialRegion={AMSTERDAM}/>
        <Drawer />
      </View>
    )
  }
}

class Drawer extends Component {

  constructor(props) {
    super(props)
    this.state = {
      expanded: false,
    }
  }

  handleEndDrag = (e) => {
    const targetY = e.nativeEvent.targetContentOffset.y
    if (targetY < OFFSET) {
      const snap = targetY < OFFSET / 3 ? 0 : OFFSET
      this.refs["Scroll"].scrollTo({ y: snap })
    }
  }

  handleBeginDrag = (e) => {
    this.setState({ expanded: true })
  }

  handleAnimationEnd = (e) => {
    const scrollY = e.nativeEvent.contentOffset.y
    this.setState({ expanded: scrollY > 0 })
  }

  render() {
    return (
      <View style={[styles.container, { overflow: this.state.expanded ? 'visible' : 'hidden' }]}>
        <ScrollView 
          style={styles.full} 
          stickyHeaderIndices={[1]} 
          showsVerticalScrollIndicator={false} 
          contentInset={{bottom: -255}}
          ref="Scroll"
          onScrollEndDrag={this.handleEndDrag}
          onScrollBeginDrag={this.handleBeginDrag}
          onMomentumScrollEnd={this.handleAnimationEnd}
        >
          <View style={styles.placeholder} />
          <View style={styles.header}>
            <View style={styles.handle} />
            <Text style={styles.headerText}>Sticky header (pull here)</Text>
          </View>
          <Row icon="event-seat" text="Go watch a movie" color="#3949ab"/>
          <Row icon="euro-symbol" text="Find some ca$$h" color="#00695c"/>
          <Row icon="rowing" text="Random guy with a paddle" color="#827717"/>
          <Row icon="radio" text="Very old radio" color="#6d4c41"/>
          <Row icon="airplanemode-active" text="Fly away" color="#424242"/>
          <Row icon="usb" text="Buy some USBs" color="#546e7a"/>
          <Row icon="explore" text="Maybe use internet explorer" color="#e53935"/>
          <Row icon="watch" text="Charge your watch..." color="#ff8f00"/>
          <Row icon="wb-sunny" text="Good weather!" color="#1b5e20"/>
          <Row icon="local-hospital" text="Need help?" color="#ad1457"/>
          <Row icon="restaurant" text="Some fancy restaurant" color="#6a1b9a"/>
          <Row icon="directions-bike" text="Get on a bike" color="#c0ca33"/>
          <View style={styles.white}/>
        </ScrollView>
      </View>
    )
  }
}

const Row = ({icon, text, color}) => (
  <View style={styles.row}>
    <View style={[styles.rowIconContainer, {backgroundColor: color}]}>
      <Icon name={icon} size={20} color="white" />
    </View>
    <Text style={styles.rowText}>{text}</Text>
  </View>
)

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 40 + OFFSET,
    bottom: 0,
  },
  full: {
    marginTop: -OFFSET,
    flex: 1,
  },
  header: {
    backgroundColor: 'white',
    height: 62,
    borderTopWidth: 1 / PixelRatio.get(),
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: '#8C99A5',
    alignItems: 'center',
  },
  handle: {
    width: 40,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#8C99A5',
    margin: 4,
  },
  placeholder: {
    height: OFFSET,
  },
  headerText: {
    flex: 1,
    fontSize: 22,
  },
  row: {
    height: 60,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: '#8C99A5',
  },
  rowIconContainer: {
    margin: 10,
    width: 30,
    height: 30,
    borderRadius: 15,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  rowText: {
    fontSize: 18,
  },
  white: {
    height: 255,
    backgroundColor: 'white',
  },
})

export default Maps