Gathering detailed insights and metrics for expo-custom-navigation
Installations
npm install expo-custom-navigationDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
14.16.1
NPM Version
6.14.12
Score
26.5
Supply Chain
55
Quality
62.3
Maintenance
50
Vulnerability
91.3
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (99.14%)
JavaScript (0.86%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Nikhil1602
Download Statistics
Total Downloads
467
Last Day
1
Last Week
3
Last Month
25
Last Year
101
GitHub Statistics
9 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Sep 18, 2022
Maintainers
1
Package Meta Information
Latest Version
1.0.2
Package Id
expo-custom-navigation@1.0.2
Unpacked Size
42.88 kB
Size
8.26 kB
File Count
26
NPM Version
6.14.12
Node Version
14.16.1
Total Downloads
Cumulative downloads
Total Downloads
467
Last Day
0%
1
Compared to previous day
Last Week
-25%
3
Compared to previous week
Last Month
400%
25
Compared to previous month
Last Year
-2.9%
101
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
21
@expo/vector-icons@react-navigation/bottom-tabs@react-navigation/drawer@react-navigation/material-bottom-tabs@react-navigation/material-top-tabs@react-navigation/native@react-navigation/native-stack@react-navigation/stackexpoexpo-status-barreactreact-domreact-nativereact-native-gesture-handlerreact-native-paperreact-native-reanimatedreact-native-safe-area-contextreact-native-screensreact-native-tab-viewreact-native-webreact-native-pager-view
Dev Dependencies
4
expo-custom-navigation
Build custom navigation for expo based projects.
Available navigation:
- Drawer
- BottomTabs
- TopTabs
- Stack
- useNavigation() - hook
Installation
Install the package,
1 npm install expo-custom-navigation
Guide
Import any navigation component to your file. Update your
babel.config.js with below code:
1 module.exports = function (api) { 2 ... 3 return { 4 ... 5 plugins: ["react-native-reanimated/plugin"], 6 }; 7 };
When you import any of above component, use ctrl + space to list all the available props.
Note: This shortcut works in vscode editor.
Limitations:
- May not support animation effects.
- May gets crashed while nesting the navigation.
- Pass the prop
isNestedwhich accepts boolean to avoid errors. - Based on
@react-navigationpackage.
Common Props in every Component:
isNested: booleannavigationRef: ref ofuseNavigation - hookheaderStyle: style for headershowHeader: booleanshowText: booleancolor: stringtextAlign:left,center, andrightbackgroundColor: string,height: number | string,- Text related styles i.e., fontSize, fontFamily etc.
items: array of objects containing below data.name: string (mandatory)screen: JSX Element (mandatory)icon:({focused, color, size}) => <View></View>showDefaultHeader: booleancounterBadge: number (works only inbottom-tabsortop-tabs)badge:(() => <View></View>)(only for top-tabs)showLabel: boolean (only for top-tabs)showIcon: boolean (only for top-tabs)
Drawer
Props:
style: style for Drawerposition:leftorrightheader: used to create custom headerheader={() => <View></View>}type:back,front,permanent, orslideitemStyle: style for tabs/buttonsactiveColor: string,activeBgColor: string,BgColor: string,color: string,- View related styles, i.e., width, height, border etc.
children: children for drawer.
BottomTabs
Props:
headerstyleitemStylelabelPosition:below-icon,beside-iconshowLabel: booleanlabelStyle: TextStyleiconStyle: TextStylebadgeStyle: TextStylehideOnKeyboard: boolean
TopTabs
Props:
customTabs:(() => <View></View>)lazy: booleanswipeEnabled: boolean,activeColor: string,inactiveColor: string,contentStyle: ViewStyle,itemStyle: ViewStyle,labelStyle: ViewStyle,style: ViewStyle,pressColor: string,pressOpacity: number,indicatorStyle: ViewStyle,iconStyle: ViewStyle,scrollEnabled: boolean,bounce: boolean,position:bottomortop,orientation:horizontalorvertical,
Stack
Props:
presentation:card,modalortransparentModal,header:((props: StackHeaderProps) => React.ReactNode),mode:floatorscreen,gestureDirection:horizontal,vertical,horizontal-invertedorvertical-inverted,gestureEnabled: boolean
useNavigation()
1 import { Drawer, useNavigation } from 'expo-custom-navigation'; 2 import { Pressable, Text } from 'react-native'; 3 import { Home, About, Contact } from './screen'; 4 5 const App = () => { 6 7 const { ref, navigate } = useNavigation(); 8 9 const items = [ 10 { 11 id: 1, 12 name: 'Home', 13 screen: Home, 14 }, 15 { 16 id: 2, 17 name: 'Contact', 18 screen: Contact, 19 }, 20 { 21 id: 3, 22 name: 'About', 23 screen: About, 24 }, 25 ]; 26 27 return ( 28 <Drawer items={items} navigationRef={ref} isNested={false}> 29 <Pressable onPress={() => navigate('Home')}> 30 <Text>Home</Text> 31 </Pressable> 32 <Pressable onPress={() => navigate('About')}> 33 <Text>About</Text> 34 </Pressable> 35 <Pressable onPress={() => navigate('Contact')}> 36 <Text>Contact</Text> 37 </Pressable> 38 </Drawer> 39 ) 40 }
Developers are most welcome to contribute in this project :)
First of all, clone the project to your local machine
1 $ git clone https://github.com/Nikhil1602/expo-custom-navigation.git
Run, the below commands:
1 cd expo-custom-navigation 2 npm install 3 npm start
Author
No vulnerabilities found.
No security vulnerabilities found.