react-native-circular-layout

A flexible React Native component that arranges its children in a circular or elliptical layout. It supports touch gesture rotation, animations, and includes a variety of extra features.

Table of Contents

• Installation
• Dependencies
• Examples
• Props

Installation

With npm:

npm install @iordanissap/react-native-circular-layout

With yarn:

yarn add @iordanissap/react-native-circular-layout

IMPORTANT: This library uses react-native-gesture-handler. To ensure proper functionality, you need to wrap your app's root component with GestureHandlerRootView.

Dependencies

{
    "react": "18.2.0",
    "react-native": "0.74.3",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1"
}

Examples

Minimal example

import { SafeAreaView, View } from 'react-native';
import CircularView from 'react-native-circular-layout';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function Example() {

    const colors = ['#D2691E', '#FFA500', '#FF69B4', '#FFB6C1', '#8B4513'];
    return (
        <View style={{flex:1, backgroundColor:'white'}}>
            <GestureHandlerRootView>
                <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
                    <CircularView
                        radiusX={120}
                        radiusY={120}
                        snappingEnabled={true}
                    >
                        {colors.map((color, index) => (
                            <View key={index} style={{ width: 60, height: 60,
                                  backgroundColor: color, borderRadius:20 }} />
                        ))}
                    </CircularView>
                </SafeAreaView>
            </GestureHandlerRootView>
        </View >
    );
}

More examples

Props

| Prop Name | Type | Default | Description | |------------------------|-------------------------------------------------|-------------------|-----------------------------------------------------------------------------------------------------| | children(required) | React.ReactNode | - | The children to be displayed in the circular layout | | radiusX(required) | number | SharedValue<number> | - | The radius of the ellipse in the x direction. Can be a number or a shared value | | radiusY(required) | number | SharedValue<number> | - | The radius of the ellipse in the y direction. Can be a number or a shared value | | centralComponent | React.ReactNode | null | The central component to be displayed in the center of the circle/ellipse | | index | number | 0 | The index of the child that is currently snapped to the top | | snappingEnabled | boolean | true | Whether the view should snap to the nearest child | | onSnap | (index: number) => void | - | Called when the view snaps to a child. Called when the animation ends. | | onSnapStart | (index: number) => void | - | Called when the snapping animation starts | | snapAngle | SnapAngle | number | SnapAngle.Top (-Math.PI / 2) | The angle in radians at which the view should snap to the nearest child | | gesturesEnabled | boolean | true | Whether the user can pan the view / rotate using touch | | onGestureStart | () => void | - | Called when the user starts a gesture | | onGestureEnd | () => void | - | Called when the user ends a gesture | | rotateCentralComponent| boolean | false | Whether the central component should rotate with the rest of the components | | childContainerStyle | any | - | The style of the container for the children | | snapDuration | number | 600ms | The duration of the snapping animation in ms | | animationConfig | DecayConfig | - | The configuration for the decay animation. Note: deceleration values below 0.9 will cause the animation to stop almost immediately |