{"id":28366878,"url":"https://github.com/fram-x/react-native-fluid","last_synced_at":"2025-06-13T23:40:52.994Z","repository":{"id":35917106,"uuid":"208570910","full_name":"fram-x/react-native-fluid","owner":"fram-x","description":"Declarative animations for React Native and React Native Web.","archived":false,"fork":false,"pushed_at":"2022-12-14T17:44:41.000Z","size":3772,"stargazers_count":94,"open_issues_count":38,"forks_count":6,"subscribers_count":8,"default_branch":"develop","last_synced_at":"2025-06-03T23:49:50.754Z","etag":null,"topics":["animations","navigation","react-native","transitions"],"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/fram-x.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-15T09:31:04.000Z","updated_at":"2024-07-06T20:44:28.000Z","dependencies_parsed_at":"2023-01-16T09:15:26.610Z","dependency_job_id":null,"html_url":"https://github.com/fram-x/react-native-fluid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fram-x/react-native-fluid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2Freact-native-fluid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2Freact-native-fluid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2Freact-native-fluid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2Freact-native-fluid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fram-x","download_url":"https://codeload.github.com/fram-x/react-native-fluid/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2Freact-native-fluid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259737639,"owners_count":22903843,"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":["animations","navigation","react-native","transitions"],"created_at":"2025-05-29T00:13:22.973Z","updated_at":"2025-06-13T23:40:52.982Z","avatar_url":"https://github.com/fram-x.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./ios/FluidTransitions/Images.xcassets/Logo.imageset/logo-symbol-text@3x.png\" width=\"300\"  height=\"249\" /\u003e\n\u003c/p\u003e\n\n# Documentation\n\n\u003ca href=\"https://www.npmjs.com/package/react-native-fluid-transitions\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-native-fluid-transitions.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"\u003e\u003c/a\u003e\n\nDeclarative animations for React Native and React Native Web.\n\n_NOTE: This is a pre-release and should not be used in production._\n\n## Installation\n\nInstalling react-native-fluid-transitions is simple, both in React Native Web and in React Native.\n\n**React Native Web**\n\n```\nyarn add react-native-fluid-animations\nyarn add react-native-fluid-transitions\n```\n\n**React Native**\n\n```\nyarn add react-native-reanimated\nyarn add react-native-fluid-animations\nyarn add react-native-fluid-transitions\n```\n\n\u003e Remember to run `react-native-link` or `cd ios \u0026\u0026 pod install` (depending on your version of React Native) after installing the dependencies.\n\n## Example\n\nGetting your first transitions set up is really easy:\n\n```js\nimport React, { useState } from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport Fluid from \"react-native-fluid-transitions\";\n\nconst styles = StyleSheet.create({\n  active: { width: 100, height: 100, backgroundColor: \"aqua\" },\n  inactive: { width: 50, height: 50, backgroundColor: \"gold\" },\n});\n\nconst MyComponent = () =\u003e {\n  const [active, setActive] = useState(false);\n  const toggle = () =\u003e setActive(a =\u003e !a);\n\n  return (\n    \u003cFluid.View\n      style={active ? styles.active : styles.inactive}\n      onPress={toggle}\n    /\u003e\n  );\n};\n```\n\nTry using this component in your app and tap the box. The component should automatically interpolate between the two styles - including using predefined animations that should work for the different style properties.\n\n## API\n\nAPI reference for `Fluid.*` components:\n\n- Fluid.View\n- Fluid.Image\n- Fluid.Text\n- Fluid.ScrollView\n\n### Fluid.\\*\n\n`Fluid.*` components are the basic building blocks of react-native-fluid-transitions. They all implement the same properties as their corresponding React Native components.\n\n**Properties**\n\n| Property     | Description                                                             |\n| ------------ | ----------------------------------------------------------------------- |\n| style        | Style that will generate automatic interpolations when changed          |\n| initialStyle | Initial style for component. Will be interpolated from on mount         |\n| staticStyle  | Style that will not generate interpolations (use for optimizing styles) |\n| config       | \u003ca name=\"Configuration\"\u003eConfiguration object                            |\n| states       | \u003ca name=\"States\"\u003eState / states                                         |\n| animation    | \u003ca name=\"AnimationType\"\u003eAnimation                                       |\n\n**Events**\n\n| Event            | Description                             |\n| ---------------- | --------------------------------------- |\n| onPress          | Callback when tapped                    |\n| onPressIn        | Callback for touch down                 |\n| onPressOut       | Callback for touch up                   |\n| onAnimationBegin | Called when style interpolation starts  |\n| onAnimationEnd   | Called when style interpolation is done |\n\n## Configuration and States\n\nIf you want more control over how animations are played, you can build your own animation definitions using the configuration and state and properties of a Fluid Component.\n\nA simple example illustrates how states and configuration can be used to build transitions:\n\n```js\nimport React from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport Fluid, {\n  useFluidState,\n  useFluidConfig,\n} from \"react-native-fluid-transitions\";\n\nconst styles = StyleSheet.create({\n  active: { width: 100, height: 100, backgroundColor: \"aqua\" },\n  inactive: { width: 50, height: 50, backgroundColor: \"gold\" },\n});\n\nconst MyComponent = () =\u003e {\n  const [activeState, setActiveState] = useFluidState(false);\n  const toggle = () =\u003e setActiveState(s =\u003e !s);\n\n  const config = useFluidConfig(WhenState(activeState, styles.active));\n\n  return (\n    \u003cFluid.View\n      onPress={toggle}\n      config={config}\n      states={activeState}\n      style={styles.inactive}\n    /\u003e\n  );\n};\n```\n\n#### \u003ca name=\"States\"\u003eStates\u003c/a\u003e\n\nA fluid state works as a regular React Native state, and can be created with the hook \u003ca href=\"#useFluidState\"\u003e`useFluidState`\u003c/a\u003e. It returns a state variable and a function for updating the state. This object can be passed along to the Fluid.View through the state property.\n\n```js\nconst [activeState, setActiveState] = useFluidState(false);\nconst toggle = () =\u003e setActiveState(a =\u003e !a);\n```\n\nThe example shows how to create and update a state with a simple toggle function.\n\n#### \u003ca name=\"Configuration\"\u003eConfiguration\u003c/a\u003e\n\nA configuration object consists of the following types:\n\n| Field          | Description                                                                                                                            |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| when           | Styles or interpolations that will be used when a given state is active                                                                |\n| onEnter        | Interpolation (animation) that will be played when a given state becomes active                                                        |\n| onExit         | Interpolation (animation) that will be played when a given state becomes inactive                                                      |\n| animation      | Animation definition for all items in configuration                                                                                    |\n| childAnimation | Describes how child animations should be ordered                                                                                       |\n| interpolation  | Describes interpolations that should be on at all times. Typically used for interpolations that are driven by a ScrollView or gesture. |\n\n#### \u003ca name=\"When\"\u003eWhen\u003c/a\u003e\n\nThe when configuration field can contain different types of configuration. The when configuration field is created using the `WhenState` function. This function has several different overloads:\n\n**Creates a new when configuration element that applies the provided style when the state is active:**\n\n```js\nfunction WhenState(state, style, options?)\n```\n\n**Creates a new when configuration element that applies an interpolation when the state is active:**\n\n```js\nfunction WhenState(state, interpolation, options?)\n```\n\n**Creates a new when configuration element that applies an interpolation returned by the factory function when the state is active:**\n\n```js\nfunction WhenState(\u003ca href=\"#States\"\u003estate\u003c/a\u003e, whenFactory, options?)\n```\n\n**\u003ca name=\"InterpolationType\"\u003eInterpolation\u003c/a\u003e**\n\nAn interpolation element consists of the following fields:\n\n| Field             | Description                                               | Type                                   |\n| ----------------- | --------------------------------------------------------- | -------------------------------------- |\n| styleKey/propName | Name of the property or style that should be interpolated | String                                 |\n| inputRange        | Array with input range values                             | number[]                               |\n| outputRange       | Array with output range values                            | number[] or string[]                   |\n| extrapolate       | Extrapolation                                             | 'clamp', 'extend', 'identity'          |\n| extrapolateLeft   | Left extrapolation                                        | 'clamp', 'extend', 'identity'          |\n| extrapolateRight  | Right extrapolation                                       | 'clamp', 'extend', 'identity'          |\n| animation         | Animation type for interpolation                          | \u003ca href=\"#AnimationType\"\u003eAnimationType |\n\n\u003e Note that the styleKey uses dot-notation, so to build an interpolation for the scale transform you would write \"transform.scale\".\n\n**\u003ca name=\"Options\"\u003eOptions\u003c/a\u003e**\n\nThe object element has a set of optional fields that can be set:\n\n| Field   | Description                                            | Type               |\n| ------- | ------------------------------------------------------ | ------------------ |\n| onBegin | Callback on animation start                            | Function           |\n| onEnd   | Callback on animation end                              | Function           |\n| loop    | Number of times to loop animation                      | number or Infinity |\n| flip    | Number of times to flip animation                      | number or Infinity |\n| yoyo    | Number of times to play the animation with yoyo effect | number or Infinity |\n\n**\u003ca name=\"AnimationType\"\u003eAnimation\u003c/a\u003e**\n\nAn animation type is a description of the animation function to run a given animation and can be of two types, `spring` or `timing`. An animation type consists of the following fields:\n\n**Timing Animation**\n\n| Field    | Description                                         | Type              |\n| -------- | --------------------------------------------------- | ----------------- |\n| type     | Type of animation                                   | 'timing'          |\n| duration | Duration in number of milliseconds                  | number            |\n| delay    | Delay before starting the animation in milliseconds | number (optional) |\n| easing   | Curve to apply to the animation                     | Easing (optional) |\n\n**Spring Animation**\n\n| Field     | Description                       | Type     |\n| --------- | --------------------------------- | -------- |\n| type      | Type of animation                 | 'spring' |\n| mass      | Mass of the spring animation      | number   |\n| stiffness | Stiffness of the spring animation | number   |\n| damping   | Damping of the spring animation   | number   |\n\n### onEnter / onExit\n\nIf you want an interpolation to run when a state change occurs, you can add `OnEnter` or `OnExit` configuration elements to your Fluid.View. The onEnter / onExit element can be created with the `OnEnterState` / `OnExitState` functions:\n\n**Creates a new onEnter / onExit element describing the interpolation that should be run when the state changes to / from active.**\n\n```js\nfunction (state, interpolation, options?)\n```\n\nWhere the parameters \u003ca href=\"#States\"\u003estate\u003c/a\u003e, \u003ca href=\"#InterpolationType\"\u003einterpolation\u003c/a\u003e and \u003ca href=\"#Options\"\u003eoptions\u003c/a\u003e shares the same types as the `When` element.\n\nThis example will add an interpolation that changes the backgroundColor of the View from pink to gold when the myState changes to an active state:\n\n```js\nconst config = useFluidConfig(\n  OnEnterState(myState, {\n    styleKey: \"backgroundColor\",\n    inputRange: [0, 1],\n    outputRange: [\"pink\", \"gold\"],\n  }),\n);\n```\n\n## \u003ca name=\"Coordination\"\u003eChild Animation\u003c/a\u003e\n\nWhen animations are played in the context of a parent `Fluid.View`, you can control how these animations should be played by changing the child configuration. There are three different types of child configuration available:\n\n```js\nSequential();\n```\n\n```js\nParalell();\n```\n\n```js\nStaggered(staggerMs? | staggerFunction?, direction)\n```\n\n## Value Interpolations\n\nOne of the more advanced techniques when building animations and transitions in React Native is when you need your interpolation to depend on a gesture value or a scrolliew position. In `react-native-fluid-transitions` this is already taken care of for you.\n\nGiven a view tree that contains a header and a scroll view:\n\n```js\nconst label = Label(\"myScrollView\");\nreturn (\n  \u003cFluid.View\u003e\n      \n    \u003cFluid.View config={config} staticStyle={styles.header} /\u003e\n      \n    \u003cFluid.ScrollView label={label}\u003e\n                 {children}\n        \n    \u003c/Fluid.ScrollView\u003e\n  \u003c/Fluid.View\u003e\n);\n```\n\nYou can add interpolations to the header component's configuration using the scroll position from the scroll view:\n\n```js\nconst value = InterpolationValue(label, Fluid.ScrollView.ScrollY);\nconst config = useFluidConfig(\n  Interpolation(value, {\n    inputRange: [0, 10],\n    outputRange: [1, 0.99],\n    styleKey: \"transform.scale\",\n  });\n```\n\nA `Fluid.ScrollView` exposes two values, `ScrollY` and `ScrollX`.\n\n# Examples\n\nGetting started developing with the examples:\n\n**To set up and install:**\n\n`yarn bootstrap`\n\n**Start watchers:**\n\n`yarn dev`\n\n**Run on iOS / Android:**\n\n`yarn run-android`\n`yarn run-ios`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffram-x%2Freact-native-fluid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffram-x%2Freact-native-fluid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffram-x%2Freact-native-fluid/lists"}