Question 186153 in React native Question posted in
The official React Native documentation can be found here.

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

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;
Tags:

2

Answers


  1. 0 
    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

    Login or Signup to reply.
  2. 0

    First, I sincerely apologize for writing here something that is not an answer but a comment. I am new to Stackoverflow and currently, I don’t have enough reputation to be able to comment.

    so I just wanted to ask if @drew-reese or @xiduzo or anybody has a solution for this. I am having the same issue where Stack.Screen is not working or displaying itself. Is this a bug in the expo router (which is likely not) or what am I missing here?

    Screenshot of the code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search