KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #ai-agents #dsh-plugin #codex #developer-tools #claude-code #windows #desktop-app #typescript #rust #ai-agent #cli

react-native-ui

★ 123 Open GitHub ↗

No description available.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![React-Native](https://img.shields.io/badge/React%20Native-333.svg?style=for-the-badge&logo=react&labelColor=4630eb&logoWidth=30&logoColor=fff)](https://reactnative.dev/) [![supports iOS and Android](https://img.shields.io/badge/Getting%20Started-4630EB.svg?style=for-the-badge&labelColor=000)](https://reactnative.dev/docs/getting-started) [![Subscribe To The Channel](https://img.shields.io/badge/Subscribe-red.svg?style=for-the-badge&logo=youtube&labelColor=red&logoWidth=20&logoColor=fff)](https://www.youtube.com/channel/UCC6L3eilEVJhhqiAdepWcng)

# React-Native
_____________________________________________________________________
```sh
install drawer dependency
yarn add @react-navigation/drawer
or
npm i @react-navigation/drawer
```
# Animated Custom Drawer Navigation v6

Link: https://youtu.be/FATLP5SkGxE

### Demo
<img width="600" height="600" src="/gif/drawer1.png">

### Like, Share and subscribe and stay tuned for more such type of videos...
_____________________________________________________________________
# Floating Action Button (FAB)

Tutorial: https://youtu.be/FATLP5SkGxE

### react-native-reanimated-2
```
installation and configuration for android/ios
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
```
### Demo
<img src="/gif/FAB-demo.gif" width="250" height="500"/>

_____________________________________________________________________
### React-Navigation
https://reactnavigation.org/docs/getting-started

### react-native-animatable
https://github.com/oblador/react-native-animatable

Tutorial:
* Tab1 link: https://youtu.be/XiutL0uLICg
* Tab2 link: https://youtu.be/spA7Rf9Ud_4
* Tab3 link: https://youtu.be/Y7apwk6hQOY

### Demo
<img src="/gif/anim-Tab.gif" width="250" height="500"/>

### For Tab4:
* https://reactnavigation.org/docs/material-bottom-tab-navigator
```
npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons
```
<img src="gif/tab4.jpg" width="250" height="120"/>

### For Tab5:
* https://reactnavigation.org/docs/material-top-tab-navigator
```
npm install @react-navigation/material-top-tabs react-native-tab-view
npm install react-native-pager-view
```
for expo
```
expo install react-native-pager-view
```

<picture>
  <source width="250" height="140" media="(prefers-color-scheme: dark)" srcset="https://github.com/vishalpwr/react-native-ui/blob/master/gif/tab5.jpg">
  <img src="https://github.com/vishalpwr/react-native-ui/blob/master/gif/tab5.jpg">
</picture>
______________________________________________________________________________________________

clone the app and run.
```
npm install or yarn
```
start react native server
```
npm start or react-native start
```
run app into virtual device using
```
react-native run-android 
or
react-native run-ios
```

react-native-ui

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README