styles.js

import React from 'react';
import { StyleSheet, View, Text, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
});

const customTemplate = (locals) => {
  const templateStyles = {
    container: {
      height: 72,
      paddingVertical: 16,
      justifyContent: 'center',
    },
    label: {
      fontSize: 12,
      paddingBottom: 8,
    },
    textInput: {
      padding: 0,
      margin: 0,
      fontSize: 16,
      color: '#555',
    },
    inputContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      borderBottomWidth: 1,
      borderColor: '#CCC',
      paddingBottom: 8,
    },
    icon: {
      paddingHorizontal: 5,
    },
    input: {
      flex: 1,
    },
  };

  return (
    <View style={templateStyles.container}>
      <Text style={templateStyles.label}>{locals.label}</Text>
      <View style={templateStyles.inputContainer}>
        <View style={templateStyles.icon}>
          <Icon name={'directions-car'} size={24} color={'grey'} />
        </View>
        <View style={templateStyles.input}>
          <TextInput
            style={templateStyles.textInput}
            autoCorrect={false}
            underlineColorAndroid="rgba(0, 0, 0, 0)"
          />
        </View>
      </View>
    </View>
  );
};

export { customTemplate };

export default styles;