stack.screen not working. contents inside stack.screen is not showing on the expo

Question

ScreenHeaderBtn in the <Stack.Screen> is not showing in expo. Only the contents under the View is showing in expo. I have imported stack. Is there something that needs to be installed or imported to use <Stack.Screen>?

import { useState } from 'react';
import { View , ScrollView, Text, SafeAreaView, Button }  from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { Stack, useRouter } from 'expo-router';
import { COLORS, FONT, SIZES, images, icons } from '../constants';
import { Nearbyjobs, Popularjobs, Welcome, ScreenHeaderBtn } from '../components'
import { setStatusBarBackgroundColor } from 'expo-status-bar';
import { isConfigured } from 'react-native-reanimated/lib/reanimated2/core';
import 'react-native-gesture-handler';

const Home = () => {
  const router = useRouter();

  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: COLORS.lightWhite
      }}
    >
      <Stack.Screen
        options={{
          headerStyle: { backgroundColor:COLORS.red },
          headerShadowVisible: false,
          headerLeft: () => (
            <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
          ), 
          headerRight: () => (
            <ScreenHeaderBtn iconUrl={icons.profile} dimension="100%" />    
          ), 
          headerTitle: ""
        }} 
      /> 
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={{ flex: 1, padding: SIZES.medium }}>
          <Welcome />
          <Popularjobs />
          <Nearbyjobs />
        </View>
      </ScrollView> 
    </SafeAreaView>
  )
}

export default Home;

score 2 · Answer 1 · edited May 05 '23 at 05:46

import { IconButton } from "react-native-paper";

      <Stack.Screen
          name="Home"
          options={{
            headerShadowVisible: false,
            headerStyle: { backgroundColor: "red" },
            headerLeft: (props) => (
              <IconButton {...props} icon="home" />
            ),
            headerRight: (props) => (
              <IconButton {...props} icon="logout" onPress={LogoutAlert} />
            ),
            headerTitle: "Home",
          }}
          component={HomeScreen}
        />

view output

there might be issue in your custom ScreenHeaderBtn component, that you are using instead try the above code I provided

else provide your ScreenHeaderBtn component code so I can debug the issue in that

stack.screen not working. contents inside stack.screen is not showing on the expo

1 Answers1