Client Login

Dev & Tech Notes

San Diego | Los Angeles | Big Bear | USA
Terms & Conditions     ©2005-2024 TJohns.co

Articles in this Category

Top Left Text cha

Web & App Development

React Native documentation and code examples that replace non-working or poorly written documentation and code provided on the official development sites.  They often update their components and do not update their docs... typical especially of Expo components and core.

Details
Category: React Native
Hits: 529
Install components for tabs
npm install @react-navigation/native @react-navigation/bottom-tabs

Other dependencies (some may not be necessary)
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

App.js

import 'react-native-gesture-handler'
import { StatusBar } from 'expo-status-bar'
import React, {useEffect, useState} from 'react'
import {StyleSheet, SafeAreaView, Switch} from 'react-native'
//import MainStackNavigator from './navigation/MainStackNavigator'
import BottomTabNavigator from './navigation/BottomTabNavigator'
//import DrawerNavigator from './navigation/DrawerNavigator'

const App = () => {
    const [navType, setNavType] = useState(false)
    return (
        <SafeAreaView style={styles.appContainer}>
            <BottomTabNavigator />
            {/* <DrawerNavigator /> */}
            <StatusBar backgroundColor="#0000ff" />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
    },
    switchStyle: {
        flex: 1,
    }
})

export default App

BottomTabNavigator.js

import * as React from 'react'
import {Platform, Button} from 'react-native'

import {NavigationContainer} from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'

import Ionicons from 'react-native-vector-icons/Ionicons'

import HomeScreen from '../screens/HomeScreen'
import ProfileScreen from '../screens/ProfileScreen'
import SettingsScreen from '../screens/SettingsScreen'

const Tab = createBottomTabNavigator()

function BottomTabNavigator() {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen
                    name="Home"
                    component={HomeScreen}
                    options={{
                        title: 'Home Screen',
                        tabBarIcon: ({focused, color, size}) => {
                            focused ? color = '#333' : color = '#0000ff'
                            return <Ionicons name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'} size={30} color={color} />
                        }
                    }}
                />
                <Tab.Screen
                    name="Profile"
                    component={ProfileScreen}
                    options={{
                        title: 'Profile Screen',
                        tabBarIcon: ({focused, color, size}) => {
                            focused ? color = '#333' : color = '#0000ff'
                            return <Ionicons name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'} size={30} color={color} />
                        },
                        tabBarBadge: 3
                    }}
                />
                <Tab.Screen
                    name="Settings"
                    component={SettingsScreen}
                    options={{
                        title: 'Settings Screen',
                        tabBarIcon: ({focused, color, size}) => {
                            focused ? color = '#333' : color = '#0000ff'
                            return <Ionicons name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} size={30} color={color} />
                        }
                    }}
                />
            </Tab.Navigator>
        </NavigationContainer>
    )
}

export default BottomTabNavigator
Comment (0) Hits: 529

Details
Category: React Native
Hits: 545
Install react-navigation locally:

npm install @react-navigation/native

Install dependencies (some of these may be unnecessary, depending on the project)

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

App.js
import 'react-native-gesture-handler'
import { StatusBar } from 'expo-status-bar'
import React from 'react'
import {StyleSheet, SafeAreaView} from 'react-native'
import MainStackNavigator from './navigation/MainStackNavigator'

const App = () => {
    return (
        <SafeAreaView style={styles.appContainer}>
            <MainStackNavigator />
            <StatusBar backgroundColor="#0000ff" />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
    }
})

export default App

MainStackNavigator.js

import * as React from 'react'
import {Platform} from 'react-native'

import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'

import HomeScreen from '../screens/HomeScreen'
import ProfileScreen from '../screens/ProfileScreen'
import SettingsScreen from '../screens/SettingsScreen'

const Stack = createStackNavigator()

function MainStackNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName='Home'
                screenOptions={{
                    gestureEnabled: true,
                    headerStyle: {
                        backgroundColor: '#aaa'
                    },
                    headerTitleStyle: {
                        fontWeight: 'bold'
                    },
                    headerTintColor: '#ffd700',
                    headerBackTitleVisible: false,
                    mode: (Platform.OS === 'ios') ? 'modal' : 'card'
                }}
                headerMode='float'>

                <Stack.Screen
                    name='Home'
                    component={HomeScreen}
                    options={{title: 'Home Screen'}}
                />
                <Stack.Screen
                    name='Profile'
                    component={ProfileScreen}
                    options={{title: 'Profile Screen'}}
                />
                <Stack.Screen
                    name='Settings'
                    component={SettingsScreen}
                    options={{title: 'Settings'}}
                />
        </Stack.Navigator>
    </NavigationContainer>
    )
}

export default MainStackNavigator
Comment (0) Hits: 545

Dev Notes

X