How to use the @react-navigation/bottom-tabs.createBottomTabNavigator function in @react-navigation/bottom-tabs

To help you get started, we’ve selected a few @react-navigation/bottom-tabs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github react-navigation / react-navigation.github.io / examples / next / tab-based-navigation-icons.js View on Github external
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!
github shakacode / react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh / app / javascript / bundles / expo-with-react-navigation / navigation / BottomTabNavigator.tsx View on Github external
* 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 (
    
       ,
        }}
      />
github shakacode / react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh / app / javascript / bundles / expo-with-react-helmet-and-react-navigation / navigation / BottomTabNavigator.tsx View on Github external
/**
 * 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 (
    
       (
            
          )
        }}
github dsznajder / ReactNativeTemplate / App.tsx View on Github external
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 = () => (
  
    
      
        {() => (
          
            
          
        )}
      

      
        {() => (
github react-navigation / navigation-ex / example / src / Screens / BottomTabs.tsx View on Github external
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 => }
github react-navigation / react-navigation.github.io / examples / next / tab-based-navigation-badges.js View on Github external
return (
    
  );
}

function SettingsScreen() {
  return (
    
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
       ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === 'Home') {
              return (
github react-navigation / react-navigation.github.io / examples / next / safe-area-example.js View on Github external
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}>
                
                
              
            )}
github react-navigation / react-navigation.github.io / website / static / examples / next / use-safe-area.js View on Github external
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}
              >
                
                
              
            )}
github react-navigation / react-navigation.github.io / examples / next / hidden-components.js View on Github external
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}
            >
              
              
            
          )}

@react-navigation/bottom-tabs

Bottom tab navigator following iOS design guidelines

MIT
Latest version published 10 days ago

Package Health Score

98 / 100
Full package analysis

Popular @react-navigation/bottom-tabs functions