Example

2.0.0-alpha.24.js

import React from "react";
import { Text, TouchableOpacity, ScrollView, View } from "react-native";
import { createAppContainer, Themed } from "react-navigation";
import {
  createStackNavigator,
  NavigationStackProp
} from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { Ionicons } from "@expo/vector-icons";
import { useSafeArea } from "react-native-safe-area-context";

interface ScreenProps {
  title: string;
  buttons?: Button[];
  navigation: NavigationStackProp;
}

interface Button {
  linkTo: string;
  params: { [k: string]: any };
  title: string;
}

function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={{
          marginVertical: 16,
          backgroundColor: "#5cb6f2",
          padding: 16,
          borderRadius: 8
        }}
      >
        <Text style={{ fontSize: 16, color: "#faf8fb", fontWeight: "bold" }}>
          {title}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

function Screen({ title, buttons, navigation }: ScreenProps) {
  const insets = useSafeArea();

  return (
    <>
      <View style={{ height: 80, backgroundColor: "#ff0000" }} />
      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          alignItems: "center",
          justifyContent: "center",
          paddingTop: insets.top
        }}
      >
        <Text style={{ fontSize: 24, fontWeight: "bold" }}>{title}</Text>

        {buttons
          ? buttons.map((button: Button, index: number) => (
              <React.Fragment key={`${button.linkTo}--${index}`}>
                <Button
                  onPress={() =>
                    navigation.navigate(button.linkTo, { ...button.params })
                  }
                  title={button.title}
                />
              </React.Fragment>
            ))
          : null}

        <Themed.StatusBar />
      </ScrollView>
    </>
  );
}

const HomeTab = createStackNavigator({
  HomeScreen: {
    navigationOptions: {
      title: "Home"
    },
    screen: ({ navigation }) => (
      <Screen
        navigation={navigation}
        title="Home screen"
        buttons={[
          {
            linkTo: "DetailsScreen",
            params: { name: "Dan" },
            title: "Open details screen"
          },
          {
            linkTo: "Modal",
            params: null,
            title: "Open modal"
          }
        ]}
      />
    )
  },
  DetailsScreen: {
    navigationOptions: {
      title: "Details"
    },
    screen: ({ navigation }) => (
      <Screen
        navigation={navigation}
        title={`Details screen for ${navigation.state.params!.name}`}
      />
    )
  }
});

const SettingsTab = createStackNavigator({
  SettingsScreen: {
    navigationOptions: {
      title: "Settings"
    },
    screen: ({ navigation }) => (
      <Screen
        navigation={navigation}
        title="Settings screen"
        buttons={[
          {
            linkTo: "ProfileSettingsScreen",
            params: { name: "Dan" },
            title: "Open profile settings screen"
          }
        ]}
      />
    )
  },
  ProfileSettingsScreen: {
    navigationOptions: {
      title: "Profile"
    },
    screen: ({ navigation }) => (
      <Screen
        navigation={navigation}
        title="Profile screen"
        buttons={[
          {
            linkTo: "DetailsScreen",
            params: { name: "Dan" },
            title: "Open details screen"
          },
          {
            linkTo: "Modal",
            params: null,
            title: "Open modal"
          }
        ]}
      />
    )
  }
});

const TabStack = createBottomTabNavigator({
  HomeTab: {
    navigationOptions: {
      tabBarIcon: ({
        tintColor,
        focused
      }: {
        tintColor: string;
        focused: boolean;
      }) => (
        <Ionicons
          name={focused ? "ios-home" : "ios-home"}
          size={26}
          style={{ color: tintColor }}
        />
      ),
      tabBarLabel: "Home"
    },
    screen: HomeTab
  },
  SettingsTab: {
    navigationOptions: {
      tabBarIcon: ({
        tintColor,
        focused
      }: {
        tintColor: string;
        focused: boolean;
      }) => (
        <Ionicons
          name={focused ? "ios-settings" : "ios-settings"}
          size={26}
          style={{ color: tintColor }}
        />
      ),
      tabBarLabel: "Settings"
    },
    screen: SettingsTab
  }
});

const ModalStack = createStackNavigator(
  {
    Modal: {
      navigationOptions: {
        title: "Modal"
      },
      screen: ({ navigation }) => (
        <Screen
          navigation={navigation}
          title="I am modal"
          buttons={[
            {
              linkTo: "HomeScreen",
              params: null,
              title: "Open home screen"
            },
            {
              linkTo: "DetailsScreen",
              params: { name: "Dan" },
              title: "Open details screen"
            }
          ]}
        />
      )
    }
  },
  {
    headerMode: "screen"
  }
);

const Root = createStackNavigator(
  {
    Main: TabStack,
    Modal: ModalStack
  },
  {
    headerMode: "none",
    mode: "modal"
  }
);

export default createAppContainer(Root);