WPD-MobileApp/src/app/components/forms/FormLocationPicker.js

import React from "react";
import {
    StyleSheet,
    Text,
    View,
} from "react-native";

import { MaterialIcons } from '@expo/vector-icons';
import colors from "../../config/colors";
import { TouchableOpacity } from "react-native-gesture-handler";

function FormLocationPicker (){
    return (
            <View>
                <View style={styles.location}>
                    <View style={styles.mapIcon}>
                        <MaterialIcons name="location-on" size={28} color="white" alignItems="center" alignContent="center" />
                    </View>
                    <View style={styles.adressText}>
                        <Text>{""} Endereço {"\n "}...</Text>
                    </View>
                </View>
                <Text style={{ color: colors.primary }}>Defina o local no mapa</Text>
            </View>
    );

}

const styles = StyleSheet.create({
    location: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
    },
    adressText: {
        flex: 0.78,
        backgroundColor: colors.white,
        borderRadius: 25,
        marginVertical: 10,

    },
    mapIcon: {
        backgroundColor: colors.cerulean,
        padding: 8,
        width: 20,
        alignItems: "center",
        borderRadius: 5,
        flex: 0.20,
    }
});

export default FormLocationPicker;