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