{"id":18721821,"url":"https://github.com/wadhahessam/react-native-theme-switch-animation","last_synced_at":"2025-04-12T14:58:49.529Z","repository":{"id":204967708,"uuid":"713085644","full_name":"WadhahEssam/react-native-theme-switch-animation","owner":"WadhahEssam","description":"A Plug \u0026 Play Animations for Switching (Dark/Light) Themes. 🌖","archived":false,"fork":false,"pushed_at":"2024-08-16T22:05:02.000Z","size":2521,"stargazers_count":382,"open_issues_count":1,"forks_count":24,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-12T14:58:44.327Z","etag":null,"topics":["android","animation","darkmode","ios","lightmode","react-native","theme"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-theme-switch-animation","language":"Objective-C++","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/WadhahEssam.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}},"created_at":"2023-11-01T20:06:58.000Z","updated_at":"2025-04-09T13:30:04.000Z","dependencies_parsed_at":"2024-06-07T20:42:59.102Z","dependency_job_id":"56154fbd-790d-40a7-bbb5-12d1e811b2ea","html_url":"https://github.com/WadhahEssam/react-native-theme-switch-animation","commit_stats":null,"previous_names":["wadhahessam/react-native-theme-switch-animation"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WadhahEssam%2Freact-native-theme-switch-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WadhahEssam%2Freact-native-theme-switch-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WadhahEssam%2Freact-native-theme-switch-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WadhahEssam%2Freact-native-theme-switch-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WadhahEssam","download_url":"https://codeload.github.com/WadhahEssam/react-native-theme-switch-animation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586249,"owners_count":21128997,"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":["android","animation","darkmode","ios","lightmode","react-native","theme"],"created_at":"2024-11-07T13:36:59.860Z","updated_at":"2025-04-12T14:58:49.510Z","avatar_url":"https://github.com/WadhahEssam.png","language":"Objective-C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-theme-switch-animation\n\nA Plug \u0026 Play Animations for Switching (Dark/Light) themes. 🌗\n\n### 🦄 Features\n- ✅  Supports multiple animation types.\n- ✅  Blazing fast - [60/120]fps\n- ✅  Plug and Play, doesn't matter what you use for switching themes \n- ✅  Can be used for different theme colors, not necessarily for dark/light\n- ✅  Supports turbo modules for new architecture \n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/WadhahEssam/react-native-theme-switch-animation/assets/24798045/0aa19507-702e-4075-b045-303ad27b3dc0\" width=\"600\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\n```sh\nnpm install react-native-theme-switch-animation\n```\nOR\n```sh\nyarn add react-native-theme-switch-animation\n```\n\n## Link\n(if you are using expo managed project, do a prebuild - `npx expo prebuild`)\n```\nnpx pod-install\n```\n\n## For React Native Versions 0.67 and Below\n- [follow those instructions](https://github.com/WadhahEssam/react-native-theme-switch-animation/blob/main/installation-for-react-native-below-67.md)\n\n\n## Usage\n\n```js\nimport switchTheme from 'react-native-theme-switch-animation';\n\nexport default function Example() {\n  const [theme, setTheme] = React.useState('light');\n\n  return (\n    \u003cButton\n      title=\"Switch Theme\"\n      onPress={() =\u003e {\n\n        switchTheme({\n          switchThemeFunction: () =\u003e {\n            setTheme(theme === 'light' ? 'dark' : 'light'); // your switch theme function\n          },\n          animationConfig: {\n            type: 'fade',\n            duration: 900,\n          },\n        });\n\n      }}\n    /\u003e\n  );\n}\n```\n\nCircular Example\n```js\nswitchTheme({\n  switchThemeFunction: () =\u003e {\n    setTheme(theme === 'light' ? 'dark' : 'light'); // your switch theme function\n  },\n  animationConfig: {\n    type: 'circular',\n    duration: 900,\n    startingPoint: {\n      cxRatio: 0.5,\n      cyRatio: 0.5\n    }\n  },\n});\n```\n\n\n## switchTheme Function Props\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `switchThemeFunction` | `() =\u003e void` | Adds the function you use in your app to switch themes, doesn't matter if you use redux/context/zustand/mobx or any other way |\n| `animationConfig` | `AnimationConfig` | Configuration for the animation -\u003e type, duration, starting point (`default is 'fade' with 500ms duration`)  |\n\n## animationConfig options\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `type` | `fade` `circular` `inverted-circular` | Specifies animation type |\n| `duration` | `number` | Specifies duration in milliseconds |\n| `startingPoint` | `StartingPointConfig` | Configuration for the `circular` animation, where does the animation start in the screen |\n| `captureType` | `layer` or `hierarchy` | (iOS only) `layer` is the default and suitable for most cases, `hierarchy` is more complex and can cause flickering in (inverted-circular) animation, but it solves issue where some elements are not visible while animation is happening |\n\n## startingPoint options\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `cx` | `number` | Specifies starting x point for `circular` and `inverted-circular` animation (should not exceed your screen width) |\n| `cy` | `number` | Specifies starting y point for `circular` and `inverted-circular` animation (should not exceed your screen height) |\n| `cxRatio` | `number` | Specifies starting percentage of x point for `circular` and `inverted-circular` animation (should be number between -1 and 1) |\n| `cyRatio` | `number` | Specifies starting percentage of y point for `circular` and `inverted-circular` animation (should be number between -1 and 1) |\n\n## Start Circular Animation from/to specific Button\nIf you would like the circular animation to start from/to a button/view on your ui automatically, you can do the following\n\n```js\nimport switchTheme from 'react-native-theme-switch-animation';\n\n\u003cTouchableOpacity\n  onPress={(e) =\u003e {\n    e.currentTarget.measure((x1, y1, width, height, px, py) =\u003e {\n      switchTheme({\n        switchThemeFunction: () =\u003e {\n          setTheme(theme === 'light' ? 'dark' : 'light');\n        },\n        animationConfig: {\n          type: 'circular',\n          duration: 900,\n          startingPoint: {\n            cy: py + height / 2,\n            cx: px + width / 2,\n          }\n        },\n      });\n    });\n  }}\n/\u003e\n```\n\n## Trouble shooting\n### [iOS] Artifact for some components with border\n\nhttps://github.com/WadhahEssam/react-native-theme-switch-animation/assets/24798045/8ad14c41-8757-4c21-b7e7-bf47b23e7f8b\n\nthis can be solved by adding a borderRadius of any value more than 1.2 for the component\n```js\n\u003cView\n  style={{\n    borderWidth: 1,\n    borderColor: theme === 'light' ? 'black' : 'white',\n    borderRadius: 1.2, // -\u003e Add This\n    padding: 20,\n    marginBottom: 20,\n  }}\n\u003e\n  \u003cText\n    style={{\n      color: theme === 'light' ? 'black' : 'white',\n    }}\n  \u003e\n    test\n  \u003c/Text\u003e\n\u003c/View\u003e\n```\n\n\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadhahessam%2Freact-native-theme-switch-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwadhahessam%2Freact-native-theme-switch-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadhahessam%2Freact-native-theme-switch-animation/lists"}