orbit-kit-ui v1.0.3

Orbit Kit UI

orbit-kit-ui A modern, versatile React Native component library with smooth animations, responsive layouts, and intuitive design, perfect for building clean and futuristic mobile interfaces.

MenuRotaryOrbit Component

A customizable and animated menu component for React Native that arranges menu items in a circular or semi-circular pattern, providing options for center content, gesture handling, and opacity effects.

Check out this examples!

Example 1	Example 2	Example 3	Example 4

Features

• Circular and Semi-Circular Arrangements: Display menu items around a circular or semi-circular path.
• Animated Gestures: Rotate the menu using gestures with customizable animations.
• Center Content: Include a centered item, optionally rotating with the menu.
• Opacity Layer: Optional opacity effect with customizable properties.
• Highly Configurable: Easily configure properties like size, radius, animation, and more.

Table of Contents

1. Installation
2. Usage
3. API Reference
4. Author

Installation

To use MenuRotaryOrbit, make sure you have the following dependencies installed:

To use the library orbit-kit-ui, install it together with react-native-gesture-handler and react-native-reanimated

npm i orbit-kit-ui
# or
yarn add orbit-kit-ui

Usage

Example in TSX

import { StatusBar } from 'expo-status-bar';
import { Pressable, StyleSheet, Text } from 'react-native';
import MenuApp from './src/MenuApp';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { useState } from 'react';


export function Item(emoji: string, onPress: () => void): React.JSX.Element {
  return(
    <Pressable 
      onPress={onPress} 
      style={{
        width: 50, 
        height: 50, 
        backgroundColor: 'white', 
        borderRadius: 100,
        justifyContent: "center",
        alignItems: "center",
        borderWidth: 0.3
      }}
    >
      <Text style={{fontSize: 24}}>{emoji}</Text>
    </Pressable>
  )
}

export default function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false)

  const content: React.JSX.Element[] = [
    Item("😁", () => alert("😁")),
    Item("😒", () => alert("😒")),
    Item("😊", () => alert("😊")),
    Item("😂", () => alert("😂"))
  ]

  return (
    <GestureHandlerRootView style={styles.container}>
      <StatusBar style="auto" />
      <MenuApp
        coreContent={Item("😂", () => setIsOpen(!isOpen))}
        content={content}
        isOpenMenu={isOpen}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

API Reference

IMenuProps

Properties for configuring the MenuApp component:

Example

<MenuRotaryOrbit
  isOpenMenu={isOpen}
  content={content}
  contentStyles={{
    marginBottom: 10
  }}
  contentItemStyle={{
    backgroundColor: 'red',
  }}
  coreContent={Item("😂", () => setIsOpen(!isOpen))}
  centerContentSize={10}
  centerContainerStyle={{
    backgroundColor: 'green',
  }}
  centerRotateContent={false}
  animationEntering={BounceIn}
  animationExiting={BounceOut}
  radiusMenus={1.5}
  isOpacityMenu={true}
  opacityProps={{
    opacity: 0.9,
    color: 'black'
  }}
  isSemicircle={false}
  actionOpacity={() => setIsOpen(!isOpen)}
/>

IOpacityApp

Properties for managing opacity effects:

Example

<MenuRotaryOrbit
  opacityProps={{
    opacity: 0.6,
    color: 'black'
  }}
/>

Author

© 2024 Gilcenio Santos Vilanova Junior. All rights reserved.