import React, { PropTypes } from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import ElevatedView from 'react-native-elevated-view';
import colors from 'kolors';

const MapViewFloatingCard = props => (
  <TouchableOpacity onPress={props.onPress}>
    <ElevatedView style={styles.infoBox} elevation={4}>
      <Text style={styles.infoBoxText}>
        {props.label}
      </Text>
    </ElevatedView>
  </TouchableOpacity>
);

MapViewFloatingCard.propTypes = {
  onPress: PropTypes.func,
  label: PropTypes.string,
};

const styles = StyleSheet.create({
  infoBox: {
    backgroundColor: colors.black,
    paddingVertical: 8,
    paddingHorizontal: 16,
    marginTop: 64,
    borderRadius: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  infoBoxText: {
    fontFamily: 'open-sans',
    fontSize: 16,
    color: 'white',
  },
});

export default MapViewFloatingCard;

@@ -70,20 +70,8 @@
 city
-, StyleSheet
  %7D f
@@ -90,16 +90,63 @@
 ative';%0A
+import styled from 'styled-components/native';%0A
 import E
@@ -251,387 +251,150 @@
 Card
- = props =%3E (%0A  %3CTouchableOpacity onPress=%7Bprops.onPress%7D%3E%0A    %3CElevatedView style=%7Bstyles.infoBox%7D elevation=%7B4%7D%3E%0A      %3CText style=%7Bstyles.infoBoxText%7D%3E%0A        %7Bprops.label%7D%0A      %3C/Text%3E%0A    %3C/ElevatedView%3E%0A  %3C/TouchableOpacity%3E%0A);%0A%0AMapViewFloatingCard.propTypes = %7B%0A  onPress: PropTypes.func,%0A  label: PropTypes.string,%0A%7D;%0A%0Aconst styles = S
+Text = styled.Text%60%0A  font-family: open-sans;%0A  font-size: 16;%0A  color: white;%0A%60;%0A%0Aconst MapViewFloatingCardContainer = s
 tyle
-Sheet.create(%7B%0A  infoBox: %7B%0A  
+d(ElevatedView)%60%0A
   ba
@@ -405,15 +405,18 @@
 ound
-C
+-c
 olor: 
+$%7B
 colo
@@ -423,20 +423,19 @@
 rs.black
-,%0A  
+%7D;%0A
   paddin
@@ -435,17 +435,18 @@
  padding
-V
+-v
 ertical:
@@ -447,20 +447,18 @@
 tical: 8
-,%0A  
+;%0A
   paddin
@@ -462,9 +462,10 @@
 ding
-H
+-h
 oriz
@@ -477,20 +477,18 @@
 : 16
-,%0A  
+;%0A
   margin
 Top:
@@ -487,36 +487,36 @@
 rgin
-T
+-t
 op: 64
-,%0A 
+;%0A
   
- 
 border
-R
+-r
 adius: 4
 ,%0A  
@@ -511,20 +511,18 @@
 adius: 4
-,%0A  
+;%0A
   justif
@@ -526,17 +526,18 @@
 tify
-C
+-c
 ontent: 
 'cen
@@ -536,140 +536,414 @@
 nt: 
-'
 center
-',%0A  
+;%0A
   align
-I
+-i
 tems: 
-'
 center
-',%0A  %7D,%0A  infoBoxText: %7B%0A    fontFamily: 'open-sans',%0A    fontSize: 16,%0A    color: 'white',%0A  %7D
+;%0A%60;%0A%0Aconst MapViewFloatingCard = props =%3E (%0A  %3CTouchableOpacity onPress=%7Bprops.onPress%7D%3E%0A    %3CMapViewFloatingCardContainer elevation=%7B4%7D%3E%0A      %3CMapViewFloatingCardText%3E%0A        %7Bprops.label%7D%0A      %3C/MapViewFloatingCardText%3E%0A    %3C/MapViewFloatingCardContainer%3E%0A  %3C/TouchableOpacity%3E%0A);%0A%0AMapViewFloatingCard.propTypes = %7B%0A  onPress: PropTypes.func,%0A  label: PropTypes.string
 ,%0A%7D
-)
 ;%0A%0Ae

change MVFC's styles -> styled-component