En mi aplicación tengo una pantalla que normalmente se ve así

pero cuando compilo para la producción, el envoltorio del título se empuja hacia abajo unos pocos píxeles, lo que da como resultado un formato extraño:

Realmente no entiendo por qué la aplicación se ve diferente cuando se compila para el lanzamiento y cuando la desarrollo. También lo probé en varios dispositivos, pero tengo el mismo error en todos ellos.

 import React, { useState, useEffect } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import { BarCodeScanner } from 'expo-barcode-scanner'; import BottomBar from './component/BottomBar'; export default function ScanScreen({ navigation }) { const [hasPermission, setHasPermission] = useState(null); useEffect(() => { (async () => { const { status } = await BarCodeScanner.requestPermissionsAsync(); setHasPermission(status === 'granted'); })(); }, []); const handleBarCodeScanned = ({ type, data }) => { navigation.navigate("Shelf", { shelfID: data.toString() }) }; if (hasPermission === null) { return <Text>Requesting for camera permission</Text>; } if (hasPermission === false) { return <Text>No access to camera</Text>; } return ( <View style={styles.container}> <View style={styles.contentContainer}> <View style={styles.titleWrapper}> <Text style={styles.text}> Shelf Scanner </Text> </View> <View style={{flex: 1}}> <BarCodeScanner onBarCodeScanned={handleBarCodeScanned} style={StyleSheet.absoluteFillObject} /> </View> </View> <BottomBar navigation={navigation} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', flexDirection: 'row', }, titleWrapper: { width: '100%', top: 30, height: 50, alignSelf: 'center', alignItems: 'center', backgroundColor: '#A2F5AA', }, text: { fontSize: 15, justifyContent: 'center', fontWeight: 'bold', flex: 1, marginTop: 10, }, contentContainer: { flex: 1 }, });