A React Native app that contains Drawer, Stack, Bottom and Top Navigators

3 years ago

source link: https://reactnativeexample.com/a-react-native-app-that-contains-drawer-stack-bottom-and-top-navigators/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

⚛️React Native Navigations

This project was created with React Native CLI and TypeScript template.

Description

This project is a new practical item of my mobile app series that made with some React Navigations and:

react native v0.65.1
stack-navigator – (to make transitions between screens)
react-navigation/bottom-tabs – (simple tab bar on the bottom to switch screens)
react-navigation/material-bottom-tabs – (simple tab bar on the bottom to switch screens for Android)
react-navigation/drawer – (common left drawer navigation)
react-native-reanimated-2.3.0-alpha.3 – (to make transitions between screens)
react-native-elements – (UI Toolkit for RN apps)
react-native-vector-icons – (UI buttons and logos)
Of course, I used things like components, custom drawer navigator and context API to manage changes in the app.

Available Scripts

The project has only been tested on Android

In the project directory, you can run special commands like these:

To install dependencies

`$ npm install` | `$ yarn install`

To start the development server and run app on simulator or device

`$ npx react-native run-android`

`$ npx react-native run-ios`

Feel free to fork this repo and add your own twist.

More about me

👋 You can visit my webpage here: Paul’s website.

GitHub

View Github

Recommend

heartbeat.fritz.ai 5 years ago
Cache

Nesting Tab and Stack Navigators in React Native and Expo Apps

Photo by

www.youtube.com 4 years ago
Cache

Creating a Bottom Drawer in Xamarin.Forms

Creating a Bottom Drawer in Xamarin.Forms721 views•Jan 19, 2021590ShareSave

proandroiddev.com 3 years ago
Cache

Bottom Navigation and Navigation Drawer Using Scaffold from Jetpack Compose

Bottom Navigation and Navigation Drawer Using Scaffold from Jetpack ComposeScaffold is a composable component that makes designing some of the basic UI extremely easy. It follows material design principle and pro...

reactnativeexample.com 3 years ago
Cache

React Native Navigation Drawer Extension

react-native-navigation-drawer-extension React Native Navigation by Wix does not offer an in-built solution for displaying a drawer on iOS. Their current side-menu has limited functionality on both iOS and Android. This is a drawer s...

reactnativeexample.com 3 years ago
Cache

Drawer API built on top of wix react native navigation for iOS and Android

reactnativeexample.com 3 years ago
Cache

A react native slidable drawer package

Drawer A react native slidable drawer package Nov 01, 2021...

reactnativeexample.com 3 years ago
Cache

React Native slidable drawer designed using react native's Animated and PanRespo...

React Native Slidable Drawer Panel React Native slidable drawer designed using react native's Animated and PanResponder APIs. Purely Typescript. Installation Install package by running: npm i react-nati...

reactnativeexample.com 2 years ago
Cache

React Native Two Drawer Navigator

Drawer React Native Two Drawer Navigator Jul 04, 2022 1 min read

reactnativeexample.com 2 years ago
Cache

A lightweight and highly performant bottom drawer for react native

React Native Animated Bottom Drawer A lightweight and highly performant bottom drawer for react native Features Extremely lightweight (~15kb) and highly performant Support for snapping (multi level bottom dr...

reactnativeexample.com 2 years ago
Cache

React Native project with routes template using native stack, bottom tabs drawer...

Routes Template This repository contains a native stack, drawer and bottom tabs that can be used as a starting point for your own project. The stack navigator is set up with some initial screens and the drawer and bottom tabs are pre-conf...