Gain insights into building applications with React Native Expo. Learn essential development concepts to create career opportunities and enhance your skills using familiar web technologies.

final.tar.gz

React Native

firstapp

components

states

style

flex

sound

camera

forms

forms_bonus

forms_bonus-solution

navigation

stack_challenge_solution

drawer_navigation

effect

storage

todo

React Native-test

You’ll learn to build applications using React Native Expo. It’s an amazing technology for web developers to learn building apps using technologies they would already be familiar with. It would be an amazing opportunity for companies to train their developers on this instead of hiring new app developers. 

This course contains a complete package with the most commonly used concepts in application development. It would create a foundation for you to explore this technology further.

Taking this course would open doors to many opportunities out there to progress further in your career as application developer.

Building Applications with React Native

In this lesson, we’ll create a **Tab Navigator**. The basic structure of a tab navigator is the same as a stack navigator, but with a few differences.

node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
package-lock.json

# macOS
.DS_Store


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from './component/Home';
import Profile from './component/Profile';
import Feed from './component/Feed';

export default function App() {

  const Tab = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{tabBarIconStyle:{display:'none'},tabBarLabelPosition:"beside-icon"}}  >
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Profile" component={Profile} />
        <Tab.Screen name="Feed" component={Feed} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};


React

Dart

GoJS React

Typescript React

Vue.js

> **Note:** Once the server starts, click the URL next to “Your app can be found at:” to view the output.

# Code explanation
Let's go through the different components.

## The `App.js` file

- **Lines 4–5:** We use the `createBottomTabNavigator` function to create a `TabNavigator`. We import the `createBottomTabNavigator` function and `NavigationContainer`.

- **Lines 7–9:** We create three pages, `Home`, `Profile`, and `Feed`, which will be our screens in the `components` folder. We need to import them into this file.

- **Line 13:** We execute the `createBottomTabNavigator` function and store the result in the `Tab` variable, which contains the `Navigator` and `Screen` properties.

- **Lines 16–22:** We create the `Tab.Screen` components and wrap them with the `TabNavigator` component. Next, we wrap the navigator with the `NavigationContainer` component. 

  The `screenOptions` are used to customize the look of the tab bar. We do not have an icon to place on the tabs, so, we set the `tabBarIconStyle` property to `display:none`. We set the `tabBarLabelPosition` property to `beside-icon`.

The screens themselves do not need to contain any navigation since that is handled in the tab bars. We could add navigation if we want to use the `navigation` object.

> **Tip:** You can read more about the `TabNavigator` function in the [official documentation](https://reactnavigation.org/docs/tab-based-navigation).



Interact with the code editor to learn about the Tab Navigator.

Welcome to the Course

Let's Get Started With React Native

Creating Our First Application

Handling Forms

Assessment on the Basics of React Native

Navigating Between Screens

The useEffect Hook

Assessment on Navigating the Components and their Lifecycle

AsyncStorage

The Todo List Application

To-do List Assessment

Connecting To External API's

Assessment on APIs

State Management

Firebase

Password Manager

Final Quiz

Conclusion

The Tab Navigator