title: How to slide down a View in react native
body: <p>Hi I am new to react native 
   I have mapview and FlatList in my screen like shown in the below image.</p>
  
  <p><a href="https://i.stack.imgur.com/SoyQC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SoyQC.png" alt="enter image description here"></a></p>
  
  <p>Now I want Mapview to be expanded when i click on it , like the below image </p>
  
  <p><a href="https://i.stack.imgur.com/F9JV8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F9JV8.png" alt="enter image description here"></a></p>
  
  <p>Here is my code </p>
  
  <pre><code>import React, { Component } from 'react';
  import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
  import { View, StyleSheet, Text, TouchableOpacity, Animated, Image } from 'react-native';
  import { Actions } from 'react-native-router-flux';
  import DoctorsList from './DoctorsList';
  import colors from '../styles/colors';
  
  var isHidden = true;
  export default class FindDoctorMaps extends Component {
      constructor(props) {
          super(props);
          this.state = {
              bounceValue: new Animated.Value(500),  //This is the initial position of the subview
              buttonText: 'LIST VIEW',
              printText: false,
              markers: [{
                  title: 'hello',
                  coordinates: {
                      latitude: 17.452,
                      longitude: 78.3721
                  },
              },
              {
                  title: 'hi',
                  coordinates: {
                      latitude: 17.458,
                      longitude: 78.3731
                  },
              },
              {
                  title: 'gyp',
                  coordinates: {
                      latitude: 17.468,
                      longitude: 78.3631
                  },
              },
              {
                  title: 'nig',
                  coordinates: {
                      latitude: 17.568,
                      longitude: 78.3831
                  },
              },
              {
                  title: 'Yoy',
                  coordinates: {
                      latitude: 17.588,
                      longitude: 78.4831
                  },
              }]
          };
      }
  
      render() {
          return (
              &lt;View style={{ flex: 1, backgroundColor: 'white' }} &gt;
  
                  &lt;MapView
                      provider={PROVIDER_GOOGLE}
                      region={{
                          latitude: 17.452,
                          longitude: 78.3721,
                          latitudeDelta: 0.015,
                          longitudeDelta: 0.0121,
                      }}
                      style={styles.map}
                      showsUserLocation
                      followUserLocation
                      showsMyLocationButton
                      showsCompass
                      zoomEnabled
  
                  &gt;
  
                      {this.state.markers.map(marker =&gt; (
                          &lt;MapView.Marker
                              coordinate={marker.coordinates}
                              title={marker.title}
                              onPress={this.onMarkerPress}
                          /&gt;
                      ))}
                  &lt;/MapView&gt;
  
                  &lt;TouchableOpacity style={styles.filterContainer} onPress={Actions.morefilters}&gt;
                      &lt;View style={styles.filterStyle}&gt;
                          &lt;Image style={{ margin: 5 }} source={require('../assets/filters_icon.png')} /&gt;
                          &lt;Text style={{ fontSize: 14, color: colors.darkBlue, fontWeight: 'bold', }}&gt; Filters&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/TouchableOpacity&gt;
  
                  &lt;View&gt;
                      &lt;TouchableOpacity &gt;
                          &lt;DoctorsList /&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
  
              &lt;/View&gt;
          );
      }
  }
  const styles = StyleSheet.create({
      map: {
          height: 200,
      },
      textViewStyle: {
          fontSize: 14,
          color: '#00539d',
          fontWeight: 'bold',
          margin: 20
      },
      subView: {
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: '#FFFFFF',
          height: 500,
      },
      filterContainer: {
          top: '20%',
          right: 0,
          alignSelf: 'flex-end',
          position: 'absolute'
      },
      filterStyle: {
          flexDirection: 'row',
          backgroundColor: colors.white,
          borderRadius: 8,
          height: 30,
          width: '60%',
          alignItems: 'center',
          justifyContent: 'center'
      }
  });
  </code></pre>
  
  <p>Can any one please help me how to expand Mapview by clicking on it.</p>
  
  <p>or else please share some useful links so that i would be helpful for me</p>