Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoaphantn7604/react-native-curved-bottom-bar
A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
https://github.com/hoaphantn7604/react-native-curved-bottom-bar
bottom components curved elements react-native tab-bar tabbar
Last synced: 2 days ago
JSON representation
A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
- Host: GitHub
- URL: https://github.com/hoaphantn7604/react-native-curved-bottom-bar
- Owner: hoaphantn7604
- License: mit
- Created: 2021-06-22T09:37:35.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-25T15:33:41.000Z (9 months ago)
- Last Synced: 2024-04-26T06:21:14.997Z (8 months ago)
- Topics: bottom, components, curved, elements, react-native, tab-bar, tabbar
- Language: TypeScript
- Homepage:
- Size: 2.22 MB
- Stars: 438
- Watchers: 7
- Forks: 94
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-curved-bottom-bar
A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
Implemented using [react-native-svg](https://github.com/react-native-svg/react-native-svg) and [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator).
```js
If you love this library, give us a star, you will be a ray of sunshine in our lives :)
```
### Free React Native Boilerplate
[React Native Template](https://github.com/hoaphantn7604/react-native-template-components) with a beautiful UI.
## Getting started
```js
npm install react-native-curved-bottom-bar --save
```
or
```js
yarn add react-native-curved-bottom-bar
```
Now we need to install [react-native-svg](https://github.com/react-native-svg/react-native-svg) and [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator).
## Demo
[
](https://youtu.be/FIuhT2QYie8)
### CurvedBottomBar.Navigator
| Props | Params | isRequire | Description |
|--------------------|-------------------------------------------------------| --------- |-------------------------------------------------------------------|
| type | 'DOWN' or 'UP' | Yes | Type of the center tab item, downward curve or upward curve |
| circlePosition | 'CENTER' or 'LEFT' or 'RIGHT' | No | Position of circle button |
| initialRouteName | String | Yes | The name of the route to render on first load of the navigator |
| tabBar | ({ routeName, selectedTab, navigate }) => JSX.Element | Yes | Function that returns a React element to display as the tab bar |
| renderCircle | ({ routeName, selectedTab, navigate }) => JSX.Element | Yes | Function that returns a React element to display as the center tab item |
| circleWidth | Number | No | Customize width of the center tab item. Minimum is 50px and Maximum is 60px
| style | ViewStyle | No | Styling for container view |
| shadowStyle | ViewStyle | No | Styling for shadow view. |
| width | Number | No | Customize width for container view |
| height | Number | No | Customize height for container view, Minimum is 50px and Maximum is 90px |
| borderTopLeftRight | Boolean | No | Border radius top left and top right of container view |
| borderColor | String | No | Border color |
| borderWidth | Number | No | Border width |
| bgColor | String | No | Background color of container view |
### CurvedBottomBar.Screen
| Props | Params | isRequire | Description |
| ------------------ | ----------------------------- | --------- | ----------------------------------------------------------------------------------------- |
| name | String | Yes | Name of the route to jump to |
| position | 'LEFT' or 'RIGHT' or 'CIRCLE' | Yes | Set position of tabbar icon to the left or right of the circle button. Use type "CIRCLE" only when you want the circle button is a tabview |
| component | (props) => JSX.Element | Yes | Screen params to merge into the destination route |
### API
| Function | Params | Description |
| ------------------ | ----------------------------- | ----------------------------------------------------------------------------------------- |
| setVisible | Boolean | Used to hide/show the tab bar. Ex: ref.current.setVisible(false) |
### Use in Expo
```js
import React from 'react';
import {
Alert,
Animated,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import { CurvedBottomBarExpo } from 'react-native-curved-bottom-bar';
import Ionicons from '@expo/vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native';
const Screen1 = () => {
return ;
};
const Screen2 = () => {
return ;
};
export default function App() {
const _renderIcon = (routeName, selectedTab) => {
let icon = '';
switch (routeName) {
case 'title1':
icon = 'ios-home-outline';
break;
case 'title2':
icon = 'settings-outline';
break;
}
return (
);
};
const renderTabBar = ({ routeName, selectedTab, navigate }) => {
return (
navigate(routeName)}
style={styles.tabbarItem}
>
{_renderIcon(routeName, selectedTab)}
);
};
return (
(
Alert.alert('Click Action')}
>
)}
tabBar={renderTabBar}
>
}
/>
}
position="RIGHT"
/>
);
}
export const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
shawdow: {
shadowColor: '#DDDDDD',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 1,
shadowRadius: 5,
},
button: {
flex: 1,
justifyContent: 'center',
},
bottomBar: {},
btnCircleUp: {
width: 60,
height: 60,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#E8E8E8',
bottom: 30,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 1,
},
imgCircle: {
width: 30,
height: 30,
tintColor: 'gray',
},
tabbarItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
img: {
width: 30,
height: 30,
},
screen1: {
flex: 1,
backgroundColor: '#BFEFFF',
},
screen2: {
flex: 1,
backgroundColor: '#FFEBCD',
},
});
```
### Use in RN CLI
```js
import React from 'react';
import {
Alert,
Animated,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native';
const Screen1 = () => {
return ;
};
const Screen2 = () => {
return ;
};
export default function App() {
const _renderIcon = (routeName, selectedTab) => {
let icon = '';
switch (routeName) {
case 'title1':
icon = 'ios-home-outline';
break;
case 'title2':
icon = 'settings-outline';
break;
}
return (
);
};
const renderTabBar = ({ routeName, selectedTab, navigate }) => {
return (
navigate(routeName)}
style={styles.tabbarItem}
>
{_renderIcon(routeName, selectedTab)}
);
};
return (
(
Alert.alert('Click Action')}
>
)}
tabBar={renderTabBar}
>
}
/>
}
position="RIGHT"
/>
);
}
export const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
shawdow: {
shadowColor: '#DDDDDD',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 1,
shadowRadius: 5,
},
button: {
flex: 1,
justifyContent: 'center',
},
bottomBar: {},
btnCircleUp: {
width: 60,
height: 60,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#E8E8E8',
bottom: 18,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 1,
},
imgCircle: {
width: 30,
height: 30,
tintColor: 'gray',
},
tabbarItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
img: {
width: 30,
height: 30,
},
screen1: {
flex: 1,
backgroundColor: '#BFEFFF',
},
screen2: {
flex: 1,
backgroundColor: '#FFEBCD',
},
});
```
[
](https://github.com/hoaphantn7604)