• Stars
    star
    132
  • Rank 274,205 (Top 6 %)
  • Language
    JavaScript
  • Created over 7 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Ripple menu effect for your react native application

react-native-circular-menu

A Ripple menu effect for your react native application

npm version NPM downloads Package Quality Donate

Example

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

of coooourse PR are welcome :)