[SOLVED] Index.tsx file isn't rendering in expo route

Index.tsx file isn't rendering in expo route

I can't seem to get the index.tsx file to render in the (location) directory. The _layout.tsx component renders with the header but nothing else.

I have checked the sitemap and index.tsx is recognised, so not sure why it won't render?

here is my app structure

app/
├── (location)/
|   ├── _layout.tsx
|   ├── index.tsx
├── (stores)/
|   ├── _layout.tsx
|   ├── index.tsx
├── _layout.tsx
├── index.tsx
├── searchStores.tsx

from searchStores.tsx you can navigate to (location) with:

router.push(`/(location)`);

Here is my _layout.tsx component:

import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

const Header = ({
  title,
  onBackPress,
}: {
  title: string,
  onBackPress: () => void,
}) => {
  return (
    <View style={styles.header}>
      <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
        <Ionicons name="arrow-back" size={30} color="black" />
      </TouchableOpacity>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

export default function Layout() {
  const router = useRouter();
  const handleBackPress = () => {
    router.navigate("/searchStores");
  };

  return <Header title="Location" onBackPress={handleBackPress} />;
}

const styles = StyleSheet.create({
  header: {
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
    backgroundColor: "#f8f8f8",
  },
  backButton: {
    marginRight: 50,
    marginLeft: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
});

Here is the index.tsx file i am trying to render:

import { View, Text } from "react-native";

const Index = () => {
  return (
    <View>
      <Text>test screen</Text>
    </View>
  );
};

export default Index;

Solution

You are only rendering the Header in your layout file.

Consider using <Slot /> or <Stack /> to render the actual page:

import { Slot } from 'expo-router';

export default function HomeLayout() {
  return <Slot />;
}