Function MyScreen

example/src/navigation-examples/multi-nested-examples.tsx:54–130

({
  colorClassName = "bg-white",
  children,
}: {
  colorClassName?: string;
  children?: React.ReactNode;
})

}

function MyScreen({
  colorClassName = "bg-white",
  children,
}: {
  colorClassName?: string;
  children?: React.ReactNode;
}) {
  return (
    <View className={"flex-1" + " " + colorClassName}>
      {children || (
        <View className="flex-1 gap-4">
          <TouchableOpacity
            onPress={() =>
              navigation.stack.push(
                <Stack.Screen>
                  <MyScreen />
                </Stack.Screen>
              )
            }
          >
            <Text className="font-medium text-lg">Push Screen</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() =>
              navigation.stack.push(
                <Stack.Screen
                  stackPresentation="modal"
                  stackAnimation="slide_from_bottom"
                  gestureEnabled={true}
                >
                  <Stack.Navigator rootScreen={<MyScreen />} />
                </Stack.Screen>
              )
            }
          >
            <Text className="font-medium text-lg">Push Modal</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() =>
              navigation.stack.push(
                <Stack.Screen>
                  <MyTabs />
                </Stack.Screen>
              )
            }
          >
            <Text className="font-medium text-lg">Push Tabs</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => {
              navigation.stack.pop();
            }}
          >
            <Text className="font-medium text-lg">Pop</Text>
          </TouchableOpacity>