{"id":18285920,"url":"https://github.com/exodusmovement/haraka","last_synced_at":"2025-04-08T03:21:03.295Z","repository":{"id":22317473,"uuid":"95923990","full_name":"ExodusMovement/haraka","owner":"ExodusMovement","description":"Stateful animations in React Native.","archived":false,"fork":false,"pushed_at":"2024-09-26T21:51:24.000Z","size":32624,"stargazers_count":76,"open_issues_count":1,"forks_count":9,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-03-28T15:05:58.495Z","etag":null,"topics":["animated","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ExodusMovement.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2017-06-30T21:06:02.000Z","updated_at":"2024-11-04T17:28:55.000Z","dependencies_parsed_at":"2024-10-27T11:47:05.146Z","dependency_job_id":"622dd2a9-fc9d-4e65-99a6-14ac94f445d3","html_url":"https://github.com/ExodusMovement/haraka","commit_stats":{"total_commits":116,"total_committers":5,"mean_commits":23.2,"dds":0.3793103448275862,"last_synced_commit":"6073ecc61539cbecc3abf84107f0b2909898888f"},"previous_names":["sonaye/react-native-behavior"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExodusMovement%2Fharaka","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExodusMovement%2Fharaka/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExodusMovement%2Fharaka/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ExodusMovement%2Fharaka/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ExodusMovement","download_url":"https://codeload.github.com/ExodusMovement/haraka/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767397,"owners_count":20992585,"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":["animated","react-native"],"created_at":"2024-11-05T13:18:10.867Z","updated_at":"2025-04-08T03:21:03.274Z","avatar_url":"https://github.com/ExodusMovement.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Haraka\n\n[![npm version](https://badge.fury.io/js/%40exodus%2Fharaka.svg)](https://badge.fury.io/js/%40exodus%2Fharaka)\n\n\u003cimg src=\"haraka.svg\" width=\"128\"\u003e\n\nYou define the behavior states of the component, and then animate between them.\n\n\u003cimg src=\"examples/demos/demo1.gif\" width=\"400\"\u003e\n\n## Usage\n\n```js\nimport Behavior from '@exodus/haraka'\n\nbox = React.createRef()\n\n\u003cBehavior\n  ref={this.box}\n  state={[\n    { opacity: 1 }, // state 0, or just `{}` since the default opacity is 1\n    { opacity: 0.5 }, // state 1\n    { rotate: '45deg' } // state 2\n    { translateX: 10, translateY: 10 } // state 3\n    { scale: 1.1 } // state 4\n  ]}\n/\u003e\n\n// ..\n\nthis.box.current.goTo(1) // animates the opacity of the box from 1 to 0.5\nthis.box.current.goTo(2) // rotates the faded box 45 degrees\nthis.box.current.goTo(3) // move the tilted faded box right and down by 10 points\nthis.box.current.goTo(4) // scale the shifted tilted faded box by a factor of 1.1\n\nthis.box.current.goTo([1, 2, 3, 4]) // plays a sequence of behavior states\n\n// or use the declarative API instead of `goTo()`\n\u003cBehavior currentState={0} /\u003e\n\u003cBehavior currentState={1} /\u003e\n```\n\n## Install\n\n```bash\nyarn add @exodus/haraka\n```\n\n## Definition\n\n```js\ntype DefaultConfig = { // goTo() default configuration\n  type?: 'spring' | 'timing', // default = 'spring', `Animated.spring()` or `Animated.timing()`\n  onComplete?: func, // to be executed once animation is completed, inside `.start()`\n  delay?: number, // used to delay the start of the animation (ms)\n  ref?: bool, // this will return the animation reference instead of playing it immediately\n  unmount? bool, // unmount after animation ends\n  // can be useful for animating multiple behaviors with `Animated.sequence()` and `Animated.parallel()`\n  // `onStart` and `onComplete `are ignored when `ref` is enabled\n  ...AnimatedSpringOptions, // excluding toValue, useNativeDriver (see React Native docs), spring type\n  ...AnimatedTimingOptions, // excluding toValue, useNativeDriver (see React Native docs), timing type\n}\n\ntype State = {\n  opacity?: number, // [0, 1], default = 1\n  rotate?: string, // e.g. '45deg', default = '0deg'\n  scale?: number, // default = 1\n  translateX?: number, // default = 0\n  translateY?: number, // default = 0\n  config?: DefaultConfig, // you can pass custom state config here\n}\n\ntype StyleProp = {\n  prop: string,\n  default: string | number | null,\n  transform: bool,\n}\n\ntype Behavior = {\n  freeze?: bool, // default = false, set to true to turn off animation completely\n  config?: DefaultConfig,\n  clearStyleProps?: bool, // removes all default style props on mount and utilizes whatever in `styleProps` only\n  disabled?: bool, // allows disabling the behavior interactivity through pointerEvents = none\n  state?: State[], // default value is [{}, {}], [{}] can be used for a static behavior\n  nativeDriver?: AnimatedValue, // default = new Animated.Value(0), you can use a custom native driver\n  children?: any, // behavior component can enclose other components or enclose another behavior(s)\n  clamp?: bool, // default = false, prevent animations from exceeding their ranges\n  keys?: number[], // can be used with custom drivers to define custom state keys/indices\n  currentState?: number, // default = 0, use to declaratively toggle animation\n  initialState?: number, // default = 0\n  skipProps?: string[], // default = [], allows filtering passed props from being included in styles\n  skipStyleProps?: string[], // default = [], allows dropping unused style props\n  style?: object, // style of the behavior view, default = {}, AnimatedViewStyle (see React Native docs)\n  styleProps?: StyleProp[], // default = [], allows adding any type of style props manually\n  unmounted?: bool, // default = false, start behavior in the unmounted state\n  // animation presets (they populate `state` prop which will be ignored):\n  faded?: bool, // default = false, see below for available presets\n  // layout presets (they populate `style` prop):\n  absolute?: bool, // default = false, see below for available presets\n  centered?: bool, // default = false\n  fixed?: bool, // default = false\n  full?: bool, // default = false\n  landing?: bool, // default = false\n}\n\n// animation presets\nconst presets = {\n  faded: [{ opacity: 0 }, { opacity: 1 }],\n}\n\n// layout presets, you can use multiple, along with `style` prop, they have a higher priority over it\nconst layoutPresets = {\n  absolute: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 },\n  centered: { alignSelf: 'center' },\n  fixed: { position: 'absolute' },\n  full: { flex: 1 },\n  landing: { alignItems: 'center', flex: 1, justifyContent: 'center' },\n}\n\n// methods\n// animate to a specific behavior state\nbehavior.goTo(index: number | number[], config?: DefaultConfig = {})\n\nbehavior.unmount() // useful for removing components that are hidden after animation\nbehavior.mount(state: ?number) // useful for animations that start in a hidden state\n// use along with `unmounted` prop and `mount()`\n\nbehavior.key // to retrieve current state key\n\nbehavior.setNativeProps({} : Props) // gives you the ability to change props without having to re-render\n```\n\n## Examples\n\nAvailable [here](/examples).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexodusmovement%2Fharaka","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexodusmovement%2Fharaka","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexodusmovement%2Fharaka/lists"}