I would like to develop an application in React Native, but I’m having problems with layouts. I would like to create a layout and surround my application with it to use it only once. In the past, I created a MainLayout component that I used for each screen:

MainLayout.tsx

  return (
      <SafeAreaView style={styles.body}>
        <StatusBar style="dark" hidden />
        {children}
      </SafeAreaView>
  );

But I would like to find a less repetitive way. I tried this structure, but it doesn’t work. For example, the background is not applied (it’s only applied to the StatusBar):

Folder structure:

app/
├── _layout.tsx
├── index.tsx
├── (screens)/
    ├── about/
        └── index.tsx

app/_layout.tsx

export default function RootLayout() {
  return (
    <SafeAreaView style={styles.container}>
      <Slot />
    </SafeAreaView>
  );
}

app/index.tsx

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Title</Text>
      <TouchableOpacity onPress={() => router.push("/about")}>
        <Text>Start</Text>
      </TouchableOpacity>
    </View>
  );
}