React Native UI App - React Navigation Bottom Tabs

RNUIAPP - RNBottomTabs.jsx

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// npm i @react-navigation/bottom-tabs react-native-elements
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Icon } from 'react-native-elements';

function TabA() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Tab A</Text>
    </View>
  );
}
function TabB() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Tab B</Text>
    </View>
  );
}
function TabC() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Tab C</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function ReactNavigationBottomTabs() {
  return (
    <Tab.Navigator
      tabBarOptions={
        {
          // Default Color is blue you can change it by following props
          // activeTintColor: '#ff4757',
          // inactiveTintColor: '#ff6b81',
          // Default Background Color is white you can change it by following props
          // activeBackgroundColor: '#ced6e0',
          // inactiveBackgroundColor: '#ced6e0',
        }
      }
    >
      <Tab.Screen
        name='Tab A'
        component={TabA}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name='home' color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name='Tab B'
        component={TabB}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name='message' color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name='Tab C'
        component={TabC}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Icon name='person' color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 40,
    fontWeight: 'bold',
  },
});

Good

What is NavigationContainer from @react-navigation/native

@Xusrav01 The NavigationContainer is responsible for managing your app state and linking your top-level navigator to the app environment (Basically, it provides a way for your app to transition between screens and manage navigation history). It takes care of platform-specific integration and provides various functionalities. Please check the reactnative.org docs for more info.

Great Job oo
But I will like to know if you have videos tutorials, I'm really enjoying your tutorials.

Thanks @Petasco for your kind words, I don't have any video tutorials/content as of now.

Okay 👍 Seriously I'm a beginner to React Native. I want to be an App Developer. How can I reach out to for help Incase I encountered an error I can't solved ?

…

On Wed, Aug 31, 2022, 3:02 PM Akul Srivastava ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Thanks @Petasco <https://github.com/Petasco> for your kind words, I don't have any video tutorials/content as of now. — Reply to this email directly, view it on GitHub <https://gist.github.com/691d4d4f7d79bfbea2dc1cda383ef19e#gistcomment-4285815>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYN6SZAT7QUEBAHDVH5GIX3V35XZNANCNFSM4VPGTVCA> . You are receiving this because you were mentioned.Message ID: <akulsr0/RNUIAPP - ***@***.***>

@Petasco Ask on stackoverflow and share that link with me on - https://akulsrivastava.com/contact

Okay 👍

…

On Wed, Aug 31, 2022, 3:42 PM Akul Srivastava ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @Petasco <https://github.com/Petasco> Ask on stackoverflow and share that link with me on - https://akulsrivastava.com/contact — Reply to this email directly, view it on GitHub <https://gist.github.com/691d4d4f7d79bfbea2dc1cda383ef19e#gistcomment-4285859>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYN6SZCIJVATJSZHS6KQC7DV354OPANCNFSM4VPGTVCA> . You are receiving this because you were mentioned.Message ID: <akulsr0/RNUIAPP - ***@***.***>