title: Input text label on border in react native
body: <p>I want to create an input box like this:</p>
  <p><a href="https://i.stack.imgur.com/6HySm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6HySm.png" alt="enter image description here" /></a></p>
  <p>But I designed it like this, and I don't know how to add the label on the input border</p>
  <p><a href="https://i.stack.imgur.com/jmoPd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jmoPd.jpg" alt="enter image description here" /></a></p>
  <p>My Code is:</p>
  <pre><code>&lt;InputBox label=&quot;Email&quot; icon={true} keyboardType=&quot;email-address&quot; defaultValue={emailId} onChangeText={text =&gt; setEmailId(text)} /&gt;
  </code></pre>
  <p>Input Component:</p>
  <pre><code>    import React from 'react';
  import {View, StyleSheet, TextInput, Text} from 'react-native';
  import {COLORS} from '../constants/colors';
  import {FONT_FAMILY} from '../constants/font-family';
  
  export default function InputBox(props) {
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={{flex: 1}}&gt;
          &lt;Text style={styles.label}&gt;{props.label}&lt;/Text&gt;
          &lt;TextInput
            placeholder={props.placeholder}
            placeholderTextColor=&quot;#9F9F9F&quot;
            style={styles.input}
            keyboardType={props.keyboardType}
            secureTextEntry={false}
            defaultValue={props.defaultValue}
            onChangeText={props.onChangeText}
            editable={props.editable}
          /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 20,
      paddingTop: 7.5,
      paddingHorizontal: 12.5,
      paddingBottom: 2.5,
      borderRadius: 5,
      borderWidth: 0.75,
      borderColor: COLORS.WHITE,
    },
    input: {
      fontFamily: FONT_FAMILY.primaryMedium,
      fontSize: 14,
      height: 37,
      color: COLORS.WHITE,
    },
    label: {
      fontFamily: FONT_FAMILY.primary,
      marginLeft: 5,
      color: COLORS.WHITE,
      fontSize: 12,
      //  marginTop: -30,
    },
  });
  </code></pre>
  <p>By using react-native-paper, when I add transparent background color it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/ZAsjN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZAsjN.jpg" alt="enter image description here" /></a></p>