title: How to open half modal in react native?
body: <p>I am creating a react native app and I used a react-native modal component to open a modal and I am able to open a full modal with the following code. I have mentioned my code samples below. Now I wanted to open a half modal. </p>
  
  <p><strong>This is what I tried.</strong></p>
  
  <pre><code>import React from 'react';
  import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    TextInput,
    Image,
    Modal,
  } from 'react-native';
  
  export default class Test extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        modalVisible: false,
      };
    }
    setModalVisible(visible) {
      this.setState({modalVisible: visible});
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.header}&gt;
            &lt;Text style={styles.headerText}&gt;Test Half Modal&lt;/Text&gt;
            &lt;TouchableOpacity
              style={styles.addButton}
              onPress={() =&gt; {
                this.setModalVisible(true);
              }}&gt;
              &lt;Text style={styles.addButtonText}&gt;Open&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
  
          &lt;Modal
            animationType="slide"
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() =&gt; {
              // this.closeButtonFunction()
            }}&gt;
            &lt;View style={styles.footer}&gt;
              &lt;Text style={styles.headerText}&gt;This is Half Modal&lt;/Text&gt;
            &lt;/View&gt;
            &lt;TouchableOpacity
              style={styles.addButton}
              onPress={() =&gt; {
                this.setModalVisible(!this.state.modalVisible);
              }}&gt;
              &lt;Text style={styles.addButtonText}&gt;Close&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/Modal&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#98B3B7',
      justifyContent: 'center',
    },
    header: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    headerText: {
      color: 'black',
      fontSize: 18,
      padding: 26,
    },
    noteHeader: {
      backgroundColor: '#42f5aa',
      alignItems: 'center',
      justifyContent: 'center',
      borderTopLeftRadius: 50,
      borderTopRightRadius: 50,
    },
    footer: {
      flex: 1,
      backgroundColor: '#ddd',
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 10,
    },
    textInput: {
      alignSelf: 'stretch',
      color: 'black',
      padding: 20,
      backgroundColor: '#ddd',
      borderTopWidth: 2,
      borderTopColor: '#ddd',
    },
    },
    addButton: {
      position: 'absolute',
      zIndex: 11,
      right: 20,
      bottom: 90,
      backgroundColor: '#98B3B7',
      width: 70,
      height: 70,
      borderRadius: 35,
      alignItems: 'center',
      justifyContent: 'center',
      elevation: 8,
    },
    addButtonText: {
      color: '#fff',
      fontSize: 18,
    },
  });
  </code></pre>
  
  <p>Using the above code I am able to open a full modal. How can I open half modal using some styles or something else? </p>