title: toggle view when clicked on TextInput in react native
body: <p>I have a <code>TextInput</code>, in that I have a view which ,makes the text come in between of the top border of <code>TextInput</code> as shown in image below.</p>
  <p><a href="https://i.stack.imgur.com/o2ned.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o2ned.png" alt="enter image description here" /></a></p>
  <p>Below is my code:</p>
  <pre><code>import React from &quot;react&quot;;
  import { View, Text, StyleSheet, TextInput } from &quot;react-native&quot;;
  
  const AddAddressScreen = () =&gt; {
      return (
          &lt;View style={styles.TextInputcontainer}&gt;
              &lt;View style={styles.TextInputlabelContainer}&gt; // this should toggle when clicked in and out of TextInput
                  &lt;Text style={styles.labelText}&gt;Search&lt;/Text&gt;
              &lt;/View&gt;
              &lt;TextInput style={styles.textSearchInput} selectionColor={&quot;black&quot;} placeholder=&quot;Search&quot; /&gt;
          &lt;/View&gt;
      );
  }
  const styles = StyleSheet.create({
      TextInputcontainer: {
          height: 50, width: 200, marginTop: 50,
      },
      TextInputlabelContainer: {
          position: 'absolute',
          backgroundColor: '#fff',
          top: -10.5, left: 20, zIndex: 1,
      },
      labelText: {
          color: &quot;black&quot;,
      },
      textSearchInput: {
          flex: 1,
          borderWidth: 1, borderColor: &quot;#9E9E9E&quot;,
          color: &quot;#9E9E9E&quot;
      },
  });
  export default AddAddressScreen;
  </code></pre>
  <p>There is view with <code>styles.TextInputlabelContainer</code>, I have also written comment at that place.
  I want that <code>view</code> to only come when user clicks on the <code>TextInput</code>. I am still in the learning phase of react native so I am not able to think on how to do this.</p>