Problems with Picker on IOS, the view is not what I expect with React Native

I'm very new to React Native, I'm using the '@react-native-picker/picker' library; to make a measure selector picker for a cooking app, for example you must select the person between kilograms, grams, etc.

I implemented it but on IOS it appears below the text, but on Android it comes out perfect, and I have seen that on iPhones the selects appear below the screen, I would love to do it that way, can you help me explain how to do it I share code and an image of what I'm wearing

Thank you

enter image description here

Code

import { Button, Image, StyleSheet, Text, TextInput, View } from 'react-native';
import React, { useRef, useState } from 'react';

import Menu from './src/components/menu';
import {Picker} from '@react-native-picker/picker';
import { StatusBar } from 'expo-status-bar';

export default function App() {

  //useState

  const [product, setProduct] = useState('');
  const [quantity, setQuantity] = useState(0);
  const [measure, setMeasure] = useState('Seleccione una medida');

  const pickerRef = useRef();

function open() {
  pickerRef.current.focus();
}

function close() {
  pickerRef.current.blur();
}
  return (
    <View style={styles.container}>
      
      <Menu />
      
      <View style={styles.textNomList}>     
        <Text style={styles.textNom}>Lista del 06/09/2022 Supermercado</Text> 
      </View>
      
      <View style={styles.textContainerTitle}>
        <Text style={styles.textTitle}>Lista de Supermercado </Text>
      </View>

      <View style={styles.TextInputContainer}>
        <TextInput style={styles.TextInput} 
        placeholder="Nombre del producto"
        backgroundColor= '#ffffff' />  
            <TextInput style={styles.TextInput} 
        placeholder="Cantidad"         
        backgroundColor= '#ffffff' />  
         <Text style={styles.textPicker}> {measure} </Text>
        <Picker 
         selectedValue = { measure } 
         onValueChange = { (itemValue, itemIndex) =>
          setMeasure(itemValue) }>
          <Picker.Item label = " "  value = " " />
          <Picker.Item label = "Unidad" value = "Unidad" />
          <Picker.Item label = "Kg" value = "Kg" />
          </Picker>
         
      </View>

      <StatusBar style="auto" />

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#6E04BF',
    color: '#fff',     
  }, 

  textNomList: {
    marginLeft: 20,
    alignItems: 'baseline',
  },

  textNom: {
    color: '#fff',
    fontSize: 10,
    fontWeight: 'bold',    
  },

  textContainerTitle: {
    marginTop: 10,
    marginLeft: 20,
    alignItems: 'center',
  },

  textTitle: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },

  TextInputContainer: {
    marginTop: 40,
    marginHorizontal: 20,
  },

  TextInput: {
    height: 33,
    color: '#6E04BF',
    backgroundColor: '#fff',
    fontSize: 15,
    selectionColor: '#fff',
    placeholderTextColor: '#6E04BF',
    marginBottom: 15,
  },

  textPicker: {
  color:'#fff',
  },  
  
  itemPicker: {
    color: '#fff',
  },
  
});