How to use @react-navigation/bottom-tabs - 9 common examples

return (
    
  );
}

function SettingsScreen() {
  return (
    
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
       ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!

* Learn more about createBottomTabNavigator:
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */

// import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';

import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import TabOneScreen from '../screens/TabOneScreen';
import TabTwoScreen from '../screens/TabTwoScreen';
import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';

const BottomTab = createBottomTabNavigator();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    
       ,
        }}
      />

/**
 * Learn more about createBottomTabNavigator:
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */

// import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'
import * as React from 'react'

import Colors from '../constants/Colors'
import useColorScheme from '../hooks/useColorScheme'
import TabOneScreen from '../screens/TabOneScreen'
import TabTwoScreen from '../screens/TabTwoScreen'
import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types'
const BottomTab = createBottomTabNavigator()

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme()
  return (
    
       (
            
          )
        }}

import React from 'react';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { enableScreens } from 'react-native-screens';

import Main from './src/scenes/Main';
import RNDefault from './src/scenes/RNDefault';

enableScreens();

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const App = () => (
  
    
      
        {() => (
          
            
          
        )}
      

      
        {() => (

const getTabBarIcon = (name: string) => ({
  color,
  size,
}: {
  color: string;
  size: number;
}) => ;

type BottomTabParams = {
  Article: undefined;
  Albums: undefined;
  Contacts: undefined;
  Chat: undefined;
};

const BottomTabs = createBottomTabNavigator();

export default function BottomTabsScreen() {
  return (
     ,
      }}
    >
      
        {props => }

return (
    
  );
}

function SettingsScreen() {
  return (
    
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
       ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === 'Home') {
              return (

import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

function Demo() {
  return (
    
      
      
    
  );
}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
      
        
          
            {() => (
               null}>
                
                
              
            )}

paddingTop: insets.top,
        paddingBottom: insets.bottom,

        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      
      
    
  );
}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
      
        
          
            {() => (
               null}
              >
                
                
              
            )}

import { NavigationNativeContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

function Demo() {
  return (
    
  );
}
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
      
        
          {() => (
             null}
            >
              
              
            
          )}