index.js

const defaultNavigationOptions = {
  headerStyle: { backgroundColor: '#239abb', borderBottomWidth: 0 },
  headerTintColor: '#fff',
  headerBackTitle: null,
};

class BadgeNotification extends PureComponent {
  render() {
    return (
      <Badge
        value="10"
        status="error"
        containerStyle={{position: 'absolute', top: -2, right: -17}}
      />
    );
  }
}

const TabBarIcon = ({ iconFocused, iconUnfocused, displayBadge }) => ({
  tabBarIcon: ({
    tintColor,
    focused,
  }) => (
    <View>
      <Ionicons
        name={focused ? iconFocused : iconUnfocused}
        size={25}
        style={{ color: tintColor }}
      />
      {displayBadge ? <BadgeNotification /> : null}
    </View>
  ),
});


const _ = component => component;

const SharedScreens = {
  SingleSelectScreen: _(SingleSelectScreen),
  MultiSelectScreen: _(MultiSelectScreen),
  LegalInformation: _(LegalInformation),
  UserProfile: _(UserProfile),
  PostList: _(PostList),
  ListSubscribers: _(ListSubscribers),
};

const PostStack = createStackNavigator(
  {
    AddPost: _(AddPost),
    EditPost: _(EditPost),
    Comments: _(Comments),
    SearchPosts: _(SearchPosts),
    Wall: _(Wall),
    UserProfileSetting: _(UserProfileSetting),
    UserDetails: _(UserDetails),
    UserProfile: _(UserProfile),
    ListSubscribers: _(ListSubscribers),
    SearchPostsNotFound: _(SearchPostsNotFound),
    LikeResult: _(LikeResult),
    CommentPost: _(CommentPost),
    ImageFullscreen: _(ImageFullscreen),
    UserPublication: _(UserPublication),
    ...SharedScreens,
  },
  {
    defaultNavigationOptions,
    navigationOptions: {
      ...TabBarIcon({ iconFocused: 'ios-home', iconUnfocused: 'ios-home' }),
    },
    initialRouteName: 'Wall',
  },
);

const SettingsStack = createStackNavigator(
  {
    DownloadRequestCompleted: _(DownloadRequestCompleted),
    Purchase: _(Purchase),
    EditProfile: _(EditProfile),
    BlockedAccount: _(BlockedAccount),
    SearchUsersNotFound: _(SearchUsersNotFound),
    UserProfileSetting: _(UserProfileSetting),
    DownloadRequest: _(DownloadRequest),
    NotificationSettings: _(NotificationSettings),
    PDFView: _(PDFView),
    ...SharedScreens,
  },
  {
    defaultNavigationOptions,
    navigationOptions: {
      ...TabBarIcon({ iconFocused: 'ios-contact', iconUnfocused: 'ios-contact' }),
    },
    initialRouteName: 'UserProfile',
  },
);

const ChatStack = createStackNavigator(
  {
    ComposeMessageRequest: _(ComposeMessageRequest),
    PendingRequest: _(PendingRequest),
    ChatList: _(ChatList),
    Chat: _(Chat),
    AcceptedChat: _(AcceptedChat),
    ...SharedScreens,
  },
  {
    defaultNavigationOptions,
    navigationOptions: {
      ...TabBarIcon({ iconFocused: 'ios-text', iconUnfocused: 'ios-text', displayBadge: true }),
    },
    initialRouteName: 'ChatList',
  },
);

const NotificationsStack = createStackNavigator(
  {
    NotificationList: _(NotificationList),
    EmptyNotification: _(EmptyNotification),
    Wall: _(Wall),
    CommentPost: _(CommentPost),
    ...SharedScreens,
  },
  {
    defaultNavigationOptions,
    navigationOptions: {
      ...TabBarIcon({
        iconFocused: 'ios-notifications',
        iconUnfocused: 'ios-notifications-outline',
        displayBadge: true,
      }),
    },
    initialRouteName: 'NotificationList',
  },
);

const SearchStack = createStackNavigator(
  {
    SearchUsers: _(SearchUsers),
    SearchUsersResult: _(SearchUsersResult),
    UserDetails: _(UserDetails),
    UserProfile: _(UserProfile),
    DownloadRequest: _(DownloadRequest),
    NotificationSettings: _(NotificationSettings),
    PDFView: _(PDFView),
    ...SharedScreens,
  },
  {
    defaultNavigationOptions,
    navigationOptions: {
      ...TabBarIcon({ iconFocused: 'ios-search', iconUnfocused: 'ios-search' }),
    },
    initialRouteName: 'SearchUsers',
  },
);

const AppStack = createBottomTabNavigator(
  {
    Post: PostStack,
    ChatList: ChatStack,
    Search: SearchStack,
    Notifications: NotificationsStack,
    Settings: SettingsStack,
  },
  {
    order: ['Post', 'ChatList', 'Search', 'Notifications', 'Settings'],
    tabBarOptions: {
      activeTintColor: '#239abb',
      showLabel: false,
      inactiveTintColor: 'black',
    },
    initialRouteName: 'Post',
  },
);

const AuthStack = createStackNavigator(
  {
    Welcome: _(Welcome),
    SignIn: _(SignIn),
    SignUp: _(SignUp),
    RequestPasswordReset: _(RequestPasswordReset),
    PrivacyAndTermsOfUse: _(PrivacyAndTermsOfUse),
    LegalInformation: _(LegalInformation),
    PDFView: _(PDFView),
    ...SharedScreens,
  },
  {
    initialRouteName: 'SignIn',
    defaultNavigationOptions,
  },
);

const SwitchNavigator = createSwitchNavigator(
  {
    AuthLoading: _(AuthLoading),
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  },
);

export default createAppContainer(SwitchNavigator);