Poloha Reagovat Native upozornění v dolní části obrazovky

Snažil jsem se na to, dejte mi vědět, jestli to pomůže také navržen podle obrázku. Kopírovat Vložit kód a zkuste to.

import React, { useState } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  Pressable,
  Modal,
  Dimensions,
  Button,
} from 'react-native';

const App = () => {
  const [showWarning, SetshowWarning] = useState(false);
  const onPressHandler = () => {
      SetshowWarning(true);
  }

  return (
    <View style={styles.body}>
      <Modal
        visible={showWarning}
        transparent
        onRequestClose={() =>
          SetshowWarning(false)
        }
        animationType='slide'
        hardwareAccelerated
      >
        <View style={styles.centered_view}>
          <View style={styles.warning_modal}>
            <View style={styles.warning_title}>
              <Text style={{
                color: '#000000',
                fontSize: 25,
                fontWeight:'700',
                textAlign: 'center',
              }}>Unsaved Changes</Text>
              <Text style={styles.text}>Are you sure you want to continue?</Text>
            </View>
            <Pressable
              onPress={() => SetshowWarning(false)}
              style={styles.warning_button1}
              android_ripple={{ color: '#fff' }}
            >
              <Text style={styles.textKE}>Keep Editing</Text>
            </Pressable>
            <Pressable
              onPress={() => SetshowWarning(false)}
              style={styles.warning_button}
              android_ripple={{ color: '#fff' }}
            >
              <Text style={styles.textDC}>Discard Changes</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Button onPress={() =>onPressHandler()} title="Text This"></Button>
      {/* Add Here full code */}
    </View >
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
  },
  
  centered_view: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00000099',
  },
  warning_modal: {
    width: Dimensions.get('window').width,
    height: 200,
    backgroundColor: '#eeff0f0',
    borderRadius: 20,
    top:"31%"
  },
  warning_title: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eff0f0',
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    borderBottomWidth:1,
    borderColor:'grey'
  },
  warning_body: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textKE: {
    marginTop:20,
    color: '#1485fe',
    fontSize: 20,
    margin: 5,
    textAlign: 'center',
  },
  textDC: {
    marginTop:20,
    color: 'red',
    fontSize: 20,
    margin: 5,
    textAlign: 'center',
  },
  warning_button1: {
    height:70,
    backgroundColor: '#efeff0',
    borderBottomWidth:1,
    borderColor:'grey'
  },
  warning_button: {
    height:70,
    backgroundColor: '#efeff0',
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  }
});

export default App;