{"id":46747464,"url":"https://github.com/sonalip9/react-native-circle-layout","last_synced_at":"2026-03-09T20:08:41.795Z","repository":{"id":60139970,"uuid":"541160616","full_name":"sonalip9/react-native-circle-layout","owner":"sonalip9","description":"This package places components in a circle layout.","archived":false,"fork":false,"pushed_at":"2024-07-14T09:55:47.000Z","size":977,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-08T22:57:08.285Z","etag":null,"topics":["react","react-native","svg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonalip9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-25T12:15:31.000Z","updated_at":"2024-07-14T09:54:07.000Z","dependencies_parsed_at":"2024-06-08T15:43:28.459Z","dependency_job_id":"4d0ca849-a769-4b6a-8471-82fa1fa48b7e","html_url":"https://github.com/sonalip9/react-native-circle-layout","commit_stats":{"total_commits":93,"total_committers":1,"mean_commits":93.0,"dds":0.0,"last_synced_commit":"fad89ad17340802c28668d83d447aaa214efd546"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/sonalip9/react-native-circle-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonalip9%2Freact-native-circle-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonalip9%2Freact-native-circle-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonalip9%2Freact-native-circle-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonalip9%2Freact-native-circle-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonalip9","download_url":"https://codeload.github.com/sonalip9/react-native-circle-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonalip9%2Freact-native-circle-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30310080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T20:05:46.299Z","status":"ssl_error","status_checked_at":"2026-03-09T19:57:04.425Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-native","svg"],"created_at":"2026-03-09T20:08:41.251Z","updated_at":"2026-03-09T20:08:41.779Z","avatar_url":"https://github.com/sonalip9.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Circle Layout\n\n\u003cdiv align='center'\u003e\n\n\u003ca href='https://www.npmjs.com/package/react-native-circle-layout'\u003e\n  \u003cimg src='https://img.shields.io/npm/v/react-native-circle-layout' alt='NPM Version'\u003e\u003c/a\u003e\n\u003ca href='https://github.com/sonalip9/react-native-circle-layout/releases/latest'\u003e\n  \u003cimg src='https://img.shields.io/github/release-date/sonalip9/react-native-circle-layout' alt='Releases'\u003e\u003c/a\u003e\n\u003ca href='https://www.npmjs.com/package/react-native-circle-layout'\u003e\n  \u003cimg src='https://img.shields.io/npm/dt/react-native-circle-layout' /\u003e\u003c/a\u003e\n\u003ca href='https://github.com/sonalip9/react-native-circle-layout/blob/main/LICENSE'\u003e\n  \u003cimg src='https://img.shields.io/github/license/sonalip9/react-native-circle-layout' alt='License'\u003e\u003c/a\u003e\n\u003cbr/\u003e\n\u003ca href='https://github.com/sonalip9/react-native-circle-layout/releases'\u003e\n  \u003cimg src='https://img.shields.io/bundlephobia/minzip/react-native-circle-layout' alt='Minified zipped size'\u003e\n  \u003cimg src='https://img.shields.io/bundlephobia/min/react-native-circle-layout' alt='Minified size'\u003e\u003c/a\u003e\n\u003cbr/\u003e\n\u003ca href='https://github.com/sonalip9/react-native-circle-layout/search?l=typescript'\u003e\n  \u003cimg src='https://img.shields.io/github/languages/top/sonalip9/react-native-circle-layout' alt='Language'\u003e\u003c/a\u003e\n\u003ca href='https://github.com/sonalip9/react-native-circle-layout/commits/main'\u003e\n  \u003cimg src='https://img.shields.io/tokei/lines/github/sonalip9/react-native-circle-layout' alt='Lines of code'\u003e\u003c/a\u003e\n\u003ca href='https://github.com/sonalip9/react-native-circle-layout/graphs/commit-activity'\u003e\n  \u003cimg src='https://img.shields.io/github/commit-activity/m/sonalip9/react-native-circle-layout' alt='GitHub commit activity'\u003e\u003c/a\u003e\n\u003cbr/\u003e\n\u003ca href='https://github.com/sonalip9/react-native-circle-layout'\u003e\n  \u003cimg src='https://img.shields.io/github/stars/sonalip9/react-native-circle-layout?style=social' alt='GitHub Repo stars'\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\nEasily create any kind of a circular display of components - complete circle, semi-circle, quarter of a circle, or anything in between. Start anywhere, end anywhere. Animations? They're supported too. (Make sure you have the latest version.)\n\nDon't sit to re-invent the wheel, doing all the math, when you can use `react-native-circle-layout`.\n\nThis library does the calculations to figure out where exactly it needs to place your elements so that they will be in a circular layout. Only minimal inputs required. See [this](#props) section for all inputs, and their defaults.\n\nWhat each element is going to be is left to you - it can be an icon, a button, an image, literally anything.\n\nStar the [project](https://github.com/sonalip9/react-native-circle-layout) to show your support if you liked it!\n\nShare your project [here](https://github.com/sonalip9/react-native-circle-layout/discussions/29)!\n\n## Installation\n\n```sh\nnpm install react-native-circle-layout\n```\n\nor\n\n```sh\nyarn add react-native-circle-layout\n```\n\n## Usage\n\n```tsx\nimport { CircleLayout } from 'react-native-circle-layout';\n\nconst Example = () =\u003e {\n  const components = [];\n  for (let i = 0; i \u003c 6; i++) {\n    components.push(\n      \u003cView style={{ alignItems: 'center' }}\u003e\n        \u003cView style={styles.circleLayoutComponent} /\u003e\n        \u003cText\u003ePoint {i}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n\n  return \u003cCircleLayout components={components} radius={100} /\u003e;\n};\n```\n\n## Props\n\n### `components` **Required**\n\n_type:_ `ReactNode[]`\n\n_description:_ List of components that need to be placed on the circle.\n\n### `radius` **Required**\n\n_type:_ `number`\n\n_description:_ The radius of the circle.\n\n### `centerComponent`\n\n_type:_ `ReactNode`\n\n_description:_ The component to be shown at the center of the circle\n\n### `sweepAngle`\n\n_type:_ `number`\n\n_default value:_ `2 * Math.Pi`\n\n_description:_ The distance in radians to be covered by the circle's arc from the starting point. This value should always be in radians between `-2 * Math.PI` and `2 * Math.PI`.\n\nFor example, if the elements need to be placed in semi-circle the value will be `Math.PI`, for quarter of a circle, it will be `Math.PI / 2`.\n\n### `startAngle`\n\n_type:_ `number`\n\n_default value:_ 0\n\n_description:_ The angle at which the first component will be placed. The value needs to be in radians between `-2 * Math.PI` and `2 * Math.PI`.\n\n### `containerStyle`\n\n_type:_ `ViewStyle`\n\n_description:_ The styling to be applied to the container of the component.\n\n### `centerComponentContainerStyle`\n\n_type:_ `ViewStyle`\n\n_description:_ The styling to be applied to the container of the center component.\n\n### `animationProps`\n\n_type_: [AnimationProps](#animationprops-1)\n\n_description_: The properties to configure the entry and exit animation of the component.\n\n## Methods\n\n## Custom Types and Constants\n\n### AnimationProps\n\n```ts\nexport type AnimationProps = {\n  /**\n   * Array of animations to be performed on entry and exit of components.\n   */\n  animationConfigs: AnimationConfig[];\n  /**\n   * The type of composition animation to be performed with\n   * all the animation configs provided.\n   *\n   * For those composition which perform animation in a particular order,\n   * the order is picked by the order in the animationConfig array.\n   */\n  animationCombinationType: AnimationCombinationType;\n  /**\n   * The gap between the start of animation of 2 consecutive components.\n   * This value is in milliseconds.\n   */\n  animationGap?: number;\n};\n```\n\n### AnimationConfig\n\n```ts\nexport type AnimationConfig = {\n  /**\n   * The type of animation to be performed.\n   */\n  animationType: AnimationType;\n  /**\n   * The configuration for the animation.\n   */\n  config?: {\n    /**\n     * The duration of the animation in milliseconds.\n     * @default 500\n     */\n    duration?: number;\n    /**\n     * The delay before the animation starts in milliseconds.\n     * @default 0\n     */\n    delay?: number;\n    /**\n     * The easing function to be used for the animation.\n     * @default Easing.inOut(Easing.ease)\n     */\n    easing?: EasingFunction;\n    /**\n     * Flag to indicate if this animation creates an \"interaction\n     * handle\" on the InteractionManager.\n     * @default true.\n     */\n    isInteraction?: boolean | undefined;\n  };\n};\n```\n\n### AnimationType\n\n```ts\nexport enum AnimationType {\n  /**\n   * The component will fade in on entry and fade out on exit.\n   */\n  OPACITY = 'OPACITY',\n  /**\n   * The component will move from the center to its final position.\n   */\n  LINEAR = 'LINEAR',\n  /**\n   * The component will move along the circumference of the circle\n   * from the position of the first component to its final position.\n   */\n  CIRCULAR = 'CIRCULAR',\n}\n```\n\n### AnimationCombinationType\n\n```ts\nexport enum AnimationCombinationType {\n  /**\n   * The animations will be performed in parallel.\n   */\n  PARALLEL = 'PARALLEL',\n  /**\n   * The animations will be performed in sequence.\n   */\n  SEQUENCE = 'SEQUENCE',\n}\n```\n\n## Authors\n\n- [@sonalip9](https://www.github.com/sonalip9)\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\nYou can report bugs or request a feature [here](https://github.com/sonalip9/react-native-circle-layout/issues).\n\n## License\n\n[MIT](LICENSE)\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonalip9%2Freact-native-circle-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonalip9%2Freact-native-circle-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonalip9%2Freact-native-circle-layout/lists"}