title: React Native: Create an overlay-screen with TextInput
body: <p>I want to make an overlay screen that seems transparent and still shows the content behind it. I have positioned the TextInput at the bottom but I'm unable to make the screen. Image is below for a better idea</p>
  
  <p>I am using <code>react-navigation</code> for <code>header area</code>.</p>
  
  <blockquote>
    <p>This is my code to make TextInput at the bottom.</p>
  </blockquote>
  
  <pre><code>const CreateTodoScreen = props =&gt; {
      const [title, setTitle] = useState('');
      return (
          &lt;KeyboardAvoidingView style={{ flex: 1 }}
                                behavior="padding"
                                keyboardVerticalOffset={100}&gt;
  
              &lt;View style={{flex:1,width: '100%', justifyContent: 'flex-end'}}&gt;
                  &lt;View&gt;
                  &lt;TextInput
  
                      value={title}
                      onChangeText={text =&gt; setTitle(text)}
                      autoFocus={true}
                      placeholder={"e.g. call Alex"}
                      style={{borderBottomWidth: 1, borderBottomColor: 'black'}}
                  /&gt;
  
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/KeyboardAvoidingView&gt;
      )
  };
  </code></pre>
  
  <p>Any help would be great.</p>
  
  <p><a href="https://i.stack.imgur.com/v6pF5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v6pF5.jpg" alt="enter image description here"></a></p>