react-native-circular-menu
A Ripple menu effect for your react native application
Example
How to install
yarn add react-native-circular-menu
How to use
...
import CircularMenu from 'react-native-circular-menu';
const App = () => {
const [show, setState] = useState(false);
const renderItems = () => [<Text style={{color: 'green'}}>Menu Item</Text>];
const renderCloseBtn = () => (
<TouchableOpacity
onPress={() => {
setState(!show);
}}>
<Text>Close Menu</Text>
</TouchableOpacity>
);
return (
<View>
<StatusBar hidden />
<Text onPress={() => setState(!show)}>Open Menu</Text>
<CircularMenu
items={renderItems()}
closeBtn={renderCloseBtn()}
show={show}
position={'center'}
contentStyle={{backgroundColor: 'transparent'}}
closeDelay={250}
openDelay={0}
/>
</View>
);
Props
Name | Description | Required |
---|---|---|
show | Set true to show and false to hide |
yes |
color | Change color of ripple effect | no |
size | Change the scale size of circle (default : 20) | no |
items | Menu items (array) | yes |
position | Change position of animation circle (default : topLeft ) |
no |
closeBtn | Receives a component for close button | yes |
openDelay | Change delay before the menu opens (default : 250) | no |
closeDelay | Change delay before the menu closes (default : 350) | no |
contentStyle | Style object for the child container | no |
Positions
Circular Menu supports 7 positions, topLeft
, topCenter
, topRight
, center
, bottomLeft
, bottomCenter
, bottomRight
.
TODO
- Test in iPhone
- Test in Android
- Add animations