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?
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?
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
Great! Sorry, I hadn’t had time to look at this yet. I’m glad you sorted it out.