Como puede ver en la imagen a continuación, tengo que dar un margen superior para "no" ocultar mi mitad del contenido debajo del encabezado de navegación, ¿no se supone que el encabezado es un "área segura" para el contenido a continuación? para estar seguro, proporcioné SafeAreaView pero aún así mi contenido se encuentra debajo del encabezado y, lamentablemente, tengo que dar un valor máximo de margen codificado para evitar ocultarlo.

La imagen de arriba es cuando comento marginTop .

La imagen de arriba es cuando agrego marginTop: 70

Código:

NotificationScreen.tsx :

 import { View, SafeAreaView, Text, StatusBar, } from 'react-native'; import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'; import OrderItem from '../../components/OrderItem'; const NotificationScreen = () => { const [orders, setOrders] = useState([]); useEffect(() => { // calling API... }, []); return ( <SafeAreaView style={styles.container}> <StatusBar backgroundColor="transparent" translucent /> <Text style={{color: 'lightgray', fontSize: 18}}>My Orders: </Text> <Animated.FlatList data={orders} entering={FadeIn} leaving={FadeOut} contentContainerStyle={{ alignItems: 'center', }} keyExtractor={(_: any, index) => 'key' + index} renderItem={({item}) => <OrderItem key={item.id} data={item} />} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { marginTop: 70, // if I remove this, the content goes under the header as shown in image. flex: 1, padding: 10, backgroundColor: COLORS.primary, }, }); export default NotificationScreen;

Una consulta más, por qué mi artículo de pedido no FlatList OrderItem ver imagen, el cuadro gris no está tomando el ancho completo...), proporcioné width: 100% a mi contenedor de artículo de OrderItem :

OrderItem.tsx :

 const OrderItem = ({data}) => { return ( <View style={styles.container}> <View style={styles.textBlock}> <Text style={styles.label}>Strategy: </Text> <Text style={styles.info}>{data.strategyTitle}</Text> </View> // ... same views as shown in image </View> ); }; const styles = StyleSheet.create({ container: { width: '100%', paddingVertical: 10, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'space-between', backgroundColor: COLORS.lightGray, borderRadius: 10, }, textBlock: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, label: { color: 'grey', fontSize: 16, }, info: { color: 'white', fontSize: 16, }, }); export default OrderItem;