In this video, we expand on React Navigation with Tab Navigation in React-Native. Specifically how to use Tabs to navigate around our screens instead of using the navigator.
Prior to watching this video please see the previous video on React Navigation here or if you need a refresher check out the first video in the series “Started Using React Native For Your Mobile Applications” here.
Tab Navigation in React-Native focuses on:
- Required Dependencies
- Tabs
- IonIcons
For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo
Tab Navigation
Possibly the most common style of navigation in mobile apps is tab-base navigation. Where the application displays tabs on the bottom of the screen or on the top below the header (or even instead of a header) for navigating between screens. Before we begin we need to install some additional dependencies for npm and expo.
Installation and setup
In order to Tab Navigation we need to start by installing the native libraries into the project.
npm install @react-navigation/native
React Tab Navigation is made up of some core utilities we use to create the navigation structures in our apps. In addition, the utility @react-navigation/native also includes:
- @react-navigation/bottom-tabs
- @react-navigation/stack
- @expo/vector-icons/Ionicons
- react-native-vector-icons/Ionicons
Using the Stack Navigator With Tabs
Usually tabs don’t just display one screen; For example, on your Facebook feed, you can tap on a post and it brings you to a new screen within that tab with all of the comments. Another way to think about would be to think of this as being a separate navigation stacks within each tab, and that’s exactly how we will model it in React Navigation.
Customizing Tabs
This is similar to how you would customize a stack navigator. While there are some properties that get set when you initialize the tab navigator and others you customize per-screen in the options. One such option is using Ionicons.
Ionicons
Premium designed icons for use in web, iOS, Android, and desktop apps. Including support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.
Tab Navigation in React-Native
Additional Resources
- React is an open-source, front end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. Additionally, React can be useful as a base in the development of single-page or mobile applications.
- Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on Chrome V8 engine and executes JavaScript code outside a web browser.
- Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. In addition it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
- Android software development is the process by which applications are created for devices running the Android operating system.
- Xcode is Apple’s integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS.
Finally, this series comes from our mentoring/mastermind classes. These classes are virtual meetings that focus on how to improve our technical skills and build our businesses. After all the goals of each member vary. However, this diversity makes for great discussions and a ton of educational value every time we meet. We hope you enjoy viewing this series as much as we enjoy creating it. As always, this may not be all new to you, but we hope it helps you be a better developer.