SafeAreaView not displaying as supposed

Please I created a second screen for an App. If I hide the header, I will push my content to the extreme top.

Pls how can I fix this?

@teegreat Can you post your code?

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {useFonts} from 'expo-font';
import AppLoading from 'expo-app-loading';
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from '@react-navigation/native';
import Home from './components/Home';
import Details from './components/Details'

const Stack = createStackNavigator();

export default function App() {
  

  return (
    <NavigationContainer headerMode="none">
      <Stack.Navigator screenOptions={{
        headerShown: false,
      }}>
        <Stack.Screen 
          name="Home" 
          component={Home}
        />
        <Stack.Screen 
          name="Details" 
          component={Details}
        />  
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Details.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View, Image, FlatList } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import {useFonts} from 'expo-font';
import AppLoading from 'expo-app-loading';
import { ScrollView } from 'react-native-gesture-handler';

import colors from '../assets/colors/colors';
import { 
    Montserrat_400Regular,
    Montserrat_500Medium,
    Montserrat_600SemiBold,
    Montserrat_700Bold,
  } from '@expo-google-fonts/montserrat'


  export default function Details ({ route }) {

    const { item } = route.params;
    console.log(item);

      return (
          <View style={StyleSheet.container}>
              {/* Header */}
              <SafeAreaView>
                  <View style={StyleSheet.headerWrapper}>
                    <View style={StyleSheet.headerLeft}>
                       
                        <Feather name="chevron-left" size={12} color={colors.textDark} />
                    </View>

                    <View style={StyleSheet.headerRight}>
                        <MaterialCommunityIcons name="star" size={12} color="#fff" />
                    </View>
                  </View>
              </SafeAreaView>
          </View>
      )
  }

  const style = new StyleSheet.create({
    container: {
          flex: 1,
      },
      headerWrapper:{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingHorizontal: 20,
          paddingTop: 20,
          
      },
      headerLeft:{
          borderColor: colors.textLight,
          borderWidth: 2,
          padding: 12,
          borderRadius: 10,
      },
      headerRight: {
          backgroundColor: colors.primary
      }
  })

Thank you

I just saw my errors. {StyleSheet.container} instead of {styles.container}.

Thank you for your concern @wodin

1 Like

Great! :slight_smile: Sorry, I hadn’t had time to look at this yet. I’m glad you sorted it out.

1 Like