Build custom navigation for expo based projects.
Available navigation:
- Drawer
- BottomTabs
- TopTabs
- Stack
- useNavigation() - hook
Install the package,
npm install expo-custom-navigation
Import any navigation component to your file. Update your
babel.config.js
with below code:
module.exports = function (api) {
...
return {
...
plugins: ["react-native-reanimated/plugin"],
};
};
When you import any of above component, use ctrl + space
to list all the available props.
Note: This shortcut works in vscode editor
.
- May not support animation effects.
- May gets crashed while nesting the navigation.
- Pass the prop
isNested
which accepts boolean to avoid errors. - Based on
@react-navigation
package.
-
isNested
: boolean -
navigationRef
: ref ofuseNavigation - hook
-
headerStyle
: style for header-
showHeader
: boolean -
showText
: boolean -
color
: string -
textAlign
:left
,center
, andright
-
backgroundColor
: 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
: boolean -
counterBadge
: number (works only inbottom-tabs
ortop-tabs
) -
badge
:(() => <View></View>)
(only for top-tabs) -
showLabel
: boolean (only for top-tabs) -
showIcon
: boolean (only for top-tabs)
-
-
style
: style for Drawer -
position
:left
orright
-
header
: used to create custom headerheader={() => <View></View>}
-
type
:back
,front
,permanent
, orslide
-
itemStyle
: style for tabs/buttons-
activeColor
: string, -
activeBgColor
: string, -
BgColor
: string, -
color
: string, - View related styles, i.e., width, height, border etc.
-
-
children
: children for drawer.
header
style
itemStyle
-
labelPosition
:below-icon
,beside-icon
-
showLabel
: boolean -
labelStyle
: TextStyle -
iconStyle
: TextStyle -
badgeStyle
: TextStyle -
hideOnKeyboard
: boolean
-
customTabs
:(() => <View></View>)
-
lazy
: boolean -
swipeEnabled
: 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
:bottom
ortop
, -
orientation
:horizontal
orvertical
,
-
presentation
:card
,modal
ortransparentModal
, -
header
:((props: StackHeaderProps) => React.ReactNode)
, -
mode
:float
orscreen
, -
gestureDirection
:horizontal
,vertical
,horizontal-inverted
orvertical-inverted
, -
gestureEnabled
: boolean
import { Drawer, useNavigation } from 'expo-custom-navigation';
import { Pressable, Text } from 'react-native';
import { Home, About, Contact } from './screen';
const App = () => {
const { ref, navigate } = useNavigation();
const items = [
{
id: 1,
name: 'Home',
screen: Home,
},
{
id: 2,
name: 'Contact',
screen: Contact,
},
{
id: 3,
name: 'About',
screen: About,
},
];
return (
<Drawer items={items} navigationRef={ref} isNested={false}>
<Pressable onPress={() => navigate('Home')}>
<Text>Home</Text>
</Pressable>
<Pressable onPress={() => navigate('About')}>
<Text>About</Text>
</Pressable>
<Pressable onPress={() => navigate('Contact')}>
<Text>Contact</Text>
</Pressable>
</Drawer>
)
}
Developers are most welcome to contribute in this project :)
First of all, clone the project to your local machine
$ git clone https://github.com/Nikhil1602/expo-custom-navigation.git
Run, the below commands:
cd expo-custom-navigation
npm install
npm start