{"id":18369798,"url":"https://github.com/cawfree/react-native-circuits","last_synced_at":"2026-04-29T14:04:36.970Z","repository":{"id":57336074,"uuid":"320489844","full_name":"cawfree/react-native-circuits","owner":"cawfree","description":"Real programmers use wires.","archived":false,"fork":false,"pushed_at":"2020-12-13T22:31:27.000Z","size":458,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T09:00:02.939Z","etag":null,"topics":["circuit","layout","react-native","schematic","wire"],"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/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-11T06:41:35.000Z","updated_at":"2024-07-25T21:30:58.000Z","dependencies_parsed_at":"2022-09-11T05:41:15.649Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-circuits","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-circuits","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-circuits/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-circuits/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-circuits/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-circuits/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281425,"owners_count":21077423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["circuit","layout","react-native","schematic","wire"],"created_at":"2024-11-05T23:32:08.497Z","updated_at":"2026-04-29T14:04:31.937Z","avatar_url":"https://github.com/cawfree.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-circuits\nEasily layout any component as a schematic using [**FlexBox**](https://reactnative.dev/docs/flexbox) in React Native.\n\nSupports Android, iOS, Web and Expo.\n\n## 🚀 Getting Started\n\nUsing [**Yarn**](https://yarnpkg.com):\n\n```sh\nyarn add react-native-svg\nyarn add react-native-circuits\n```\n\n## ✍️ Example\n\nTo get started out, let's look at drawing a simple wire.\n\n```typescript\nimport React from 'react';\nimport {StyleSheet} from 'react-native';\nimport Circuit, {useRenderBezier, Junction, useWire} from 'react-native-circuits';\n\nconst styles = StyleSheet.create({\n  flex: {flex: 1},\n});\n\nexport default function App(): JSX.Element {\n  // Define a way of drawing a wire.\n  const renderBlackBezier = useRenderBezier({stroke: \"black\", strokeWidth: \"0.5\"});\n  // Define a wire instance and tell it how to be drawn.\n  const a = useWire(renderBlackBezier);\n  // Below, we use two Junctions (places where a wire can be connected), spread\n  // them far apart and connect them together.\n  return (\n    \u003cCircuit style={StyleSheet.absoluteFill}\u003e\n      {/* Use a Junction to connect wires. Here, we connect bottom-to-top. */}\n      {/* This would effectively draw a line down the screen. Boring, huh! */}\n      \u003cJunction Bottom={[a]} /\u003e\n      \u003cView style={styles.flex} /\u003e\n      \u003cJunction Top={[a]} /\u003e\n    \u003c/Circuit\u003e\n  );\n};\n```\n\nNotice that when we declare the `Top`, `Bottom` (or `Left` and `Right`) of a `Junction`, we are permitted to define an array of wires, which allows you to connect multiple wires together.\n\nCheck out the complete example [**here**](./example/App.tsx).\n\n## 🦄 Types\n\n```typescript\nimport type {ViewStyle} from 'react-native';\nimport type {PathProps} from 'react-native-svg';\n\nimport {WireDirection} from './enums';\n\nexport type Point = [x: number, y: number];\n\nexport type ReactChildren = JSX.Element | readonly JSX.Element[];\n\nexport type MaybeStyle = ViewStyle | readonly ViewStyle[] | undefined;\n\nexport type AggregatePoint = {\n  readonly wireDirection: WireDirection;\n  readonly point: Point;\n  readonly wireId: string;\n};\n\nexport type AggregateLayout = {\n  readonly x: number;\n  readonly y: number;\n  readonly width: number;\n  readonly height: number;\n  readonly pageX: number;\n  readonly pageY: number;\n};\n\nexport type RenderWire = (points: readonly AggregatePoint[]) =\u003e JSX.Element;\n\nexport type useRenderWireResult = {\n  readonly renderWire: RenderWire;\n  readonly pathProps: PathProps;\n};\n\nexport type Wire = useRenderWireResult \u0026 {\n  readonly wireId: string;\n};\n\nexport type CircuitContextValue = {\n  readonly onTerminalMoved: (\n    terminalId: string,\n    wire: Wire,\n    wireDirection: WireDirection,\n    point: Point,\n  ) =\u003e void;\n  readonly onTerminalsDestroyed: (terminalId: readonly string[]) =\u003e void;\n};\n\nexport type ActiveComponentProps = {\n  readonly style: MaybeStyle;\n  readonly children?: ReactChildren;\n  readonly onMeasureBounds: (\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    pageX: number,\n    pageY: number\n  ) =\u003e void;\n};\n\nexport type Terminal = {\n  readonly wire: Wire;\n  readonly style: MaybeStyle;\n  readonly wireDirection: WireDirection;\n};\n\nexport type ModuleProps = {\n  readonly style: MaybeStyle;\n  readonly terminals?: readonly Terminal[];\n  readonly children?: ReactChildren;\n};\n\nexport type CircuitProviderProps = {\n  readonly style?: MaybeStyle;\n  readonly children: ReactChildren;\n};\n\nexport type PointsBuffer = {\n  // @ts-ignore\n  readonly renderWire: RenderWire;\n  readonly [terminalId: string]: AggregatePoint;\n};\n\nexport type WireBuffer = {\n  readonly [wireId: string]: PointsBuffer;\n};\n\nexport type SvgRenderMethod = (\n  layout: AggregateLayout\n) =\u003e ReactChildren;\n\nexport type FitSvgProps = {\n  readonly style?: MaybeStyle;\n  readonly children?: ReactChildren;\n  readonly render?: SvgRenderMethod;\n};\n\nexport type JunctionProps = {\n  readonly style?: MaybeStyle;\n  readonly children?: ReactChildren;\n  readonly Top?: readonly Wire[];\n  readonly Left?: readonly Wire[];\n  readonly Bottom?: readonly Wire[];\n  readonly Right?: readonly Wire[];\n};\n\n```\n\n## ✌️ License\n[**MIT**](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-circuits","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-circuits","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-circuits/lists"}