{"_id":"@amalgamaco/react-native-animated-toggle-button","name":"@amalgamaco/react-native-animated-toggle-button","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.1":{"name":"@amalgamaco/react-native-animated-toggle-button","version":"0.2.1","description":"A two states button that can be animated when transitioning between them.","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"NODE_ENV=test JEST_JUNIT_OUTPUT_DIR=reports TZ=UTC jest","typescript":"tsc --noEmit","lint":"eslint src/ tests/","prepare":"bob build","release":"release-it","example":"yarn --cwd example","pods":"cd example && pod-install --quiet","bootstrap":"yarn example && yarn && yarn pods"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+ssh://git@github.com/amalgamaco/react-native-animated-toggle-button.git"},"author":{"name":"Mauro E. Bender","email":"mauro@amalgama.co","url":"https://github.com/maurobender"},"license":"MIT","bugs":{"url":"https://github.com/amalgamaco/react-native-animated-toggle-button/issues"},"homepage":"https://github.com/amalgamaco/react-native-animated-toggle-button","publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"devDependencies":{"@commitlint/config-conventional":"^11.0.0","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^2.0.0","@testing-library/jest-native":"^4.0.4","@testing-library/react-hooks":"^7.0.2","@testing-library/react-native":"^9.1.0","@types/jest":"^26.0.0","@types/react":"^16.9.19","@types/react-native":"^0.67.6","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","commitlint":"^11.0.0","eslint":"^7.2.0","eslint-config-airbnb-base":"^15.0.0","eslint-config-prettier":"^7.0.0","eslint-import-resolver-typescript":"^2.7.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^3.1.3","husky":"^6.0.0","jest":"^26.0.1","jest-junit":"^13.0.0","lottie-ios":"3.2.3","lottie-react-native":"4.1.3","pod-install":"^0.1.0","prettier":"^2.0.5","react":"16.13.1","react-native":"0.63.4","react-native-builder-bob":"^0.18.2","react-test-renderer":"16.13.1","release-it":"^14.2.2","typescript":"^4.1.3"},"peerDependencies":{"lottie-ios":"*","lottie-react-native":"*","react":"*","react-native":">= 0.63"},"jest":{"preset":"react-native","collectCoverage":true,"coverageDirectory":"/reports/coverage","coverageReporters":["json","lcov","text","html","text-summary","cobertura"],"reporters":["default","jest-junit"],"testMatch":["/tests/**/?(*.)(spec|test).(js|ts|jsx|tsx)"],"modulePathIgnorePatterns":["/example/node_modules","/dist/"]},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"tagName":"v${version}","requireCleanWorkingDir":false,"requireUpstream":true,"commitMessage":"Release AnimatedToggleButton v${version}","changelog":"npx auto-changelog --stdout --commit-limit false --unreleased --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs"},"hooks":{"after:bump":"npx auto-changelog -p"},"github":{"release":true,"releaseName":"Release AnimatedToggleButton v${version}"},"npm":{"skipChecks":true}},"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"gitHead":"86969bf38f05bc3bce4da65187ff58950183cfd2","_id":"@amalgamaco/react-native-animated-toggle-button@0.2.1","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-ixZwzDiIoWjQAkxQhyXxk7ZDmsy5E6B7qZImMUKTafE27k3NQPQ6uGEoA2oyDOv1gadMm7ah6xNTwi+/i+0MJQ==","shasum":"8fb92f3d31bff243824d7e341f01878a720843c1","tarball":"https://registry.npmjs.org/@amalgamaco/react-native-animated-toggle-button/-/react-native-animated-toggle-button-0.2.1.tgz","fileCount":33,"unpackedSize":55680,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAK7wHKn/2Z2pamVq/X5nZza/ryK93/NNNoYkv9V8eHwIhAMlnze/RBnUv4i37ZmTOkTZAJB5JBaz/ihr3K0dUyysz"}]},"_npmUser":{"name":"sebakz","email":"sebastian.kissling@gmail.com"},"directories":{},"maintainers":[{"name":"sebakz","email":"sebastian.kissling@gmail.com"},{"name":"ezeaguerre","email":"ezeaguerre@gmail.com"},{"name":"damianh97","email":"damianhuaier@gmail.com"},{"name":"maurobender","email":"maurobender@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-animated-toggle-button_0.2.1_1691507171796_0.7403821651418687"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-08T15:06:11.712Z","0.2.1":"2023-08-08T15:06:11.981Z","modified":"2023-08-08T15:06:12.208Z"},"maintainers":[{"name":"sebakz","email":"sebastian.kissling@gmail.com"},{"name":"ezeaguerre","email":"ezeaguerre@gmail.com"},{"name":"damianh97","email":"damianhuaier@gmail.com"},{"name":"maurobender","email":"maurobender@gmail.com"}],"description":"A two states button that can be animated when transitioning between them.","homepage":"https://github.com/amalgamaco/react-native-animated-toggle-button","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+ssh://git@github.com/amalgamaco/react-native-animated-toggle-button.git"},"author":{"name":"Mauro E. Bender","email":"mauro@amalgama.co","url":"https://github.com/maurobender"},"bugs":{"url":"https://github.com/amalgamaco/react-native-animated-toggle-button/issues"},"license":"MIT","readme":"# ReactNative - Animated Toggle Button\n\nA two states button that can be animated when trasitioning between them.\n\n![Example](/docs/gifs/react-native-animated-toggle-button-example.gif)\n\n## Installation\n\n### Requirements\n\nThis library depends on [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) in order to work. You must add this library as a dependency before installing this package.\n\n```sh\nyarn add lottie-react-native\nyarn add lottie-ios@3.2.3\n```\n\nThe version to install depends on the react native version being used in the project, you can see the corresponding version of the library for each react native version next:\n\n| App built in React Native version | Requires lottie-react-native version | Requires lottie-ios version |\n|-----------------------------------|--------------------------------------|-----------------------------|\n| >= 0.59 | 3.0.2 | 3.0.3 |\n| >= 0.60 | 4.0.2 | 3.2.3 |\n| >= 0.63 | 4.0.3 | 3.2.3 |\n| >= 0.64 | 4.1.3 | 3.2.3 |\n| >= 0.66 | latest | 3.2.3 |\n\n### With yarn\n\n```sh\nyarn add @amalgamaco/react-native-animated-toggle-button\n```\n\n### With npm\n\n```sh\nnpm install @amalgamaco/react-native-animated-toggle-button\n```\n## Usage\n\nThe AnimatedToggleButton component can be used in a declarative way:\n\n```js\nimport React, { useState } from 'react';\nimport { AnimatedToggleButton } from '@amalgamaco/react-native-animated-toggle-button';\n\nimport animation from './animation.json';\n\nconst BasicExample = () => {\n const [ isActive, setIsActive ] = useStsate( false );\n\n return (\n setIsActive( !isActive )}\n activeFrame={20}\n inactiveFrame={0}\n toActiveFrameRange={[ 10, 20 ]}\n toInactiveFrameRange={[ 20, 30 ]}\n />\n );\n}\n```\n\nThere is also a non-button animated component that you can use if you don't need a button and want to show only an animated view between two states:\n\n```js\nimport React from 'react';\nimport { AnimatedIcon } from '@amalgamaco/react-native-animated-toggle-button';\n\nimport animation from './animation.json';\n\nconst BasicExample = () => (\n \n);\n```\n\n## API\n\nThe `AnimatedToggleButton` accepts several props. They are describe in the following table:\n\n\n| Prop | Description | Default |\n|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------- |\n| **`source`** | **Mandatory** - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a `uri` property, or it can be an actual JS object of an animation, obtained (for example) with something like `require('../path/to/animation.json')`. | _None_ |\n| **`inactiveFrame`** | **Mandatory** - A number indicating the still frame to show when the animation is in `inactive` state. | _None_ |\n| **`activeFrame`** | **Mandatory** - A number indicating the still frame to show when the animation is in `active` state. | _None_ |\n| **`toActiveFrameRange`** | **Mandatory** - A range of two numbers indicating an start and end frame for the animation to show when the button passes from `inactive` to `active` state. The end frame must be always greater that the start frame. _Example:_ `[ 10, 20 ]` | _None_ |\n| **`toInactiveFrameRange`** | **Mandatory** - A range of two numbers indicating an start and end frame for the animation to show when the button passes from `active` to `inactive` state. The end frame must be always greater that the start frame. _Example:_ `[ 20, 30 ]` | _None_ |\n| **`isActive`** | A boolean flag indicating whether or not the button is in an active state or not. If the button is active it will show the animation frame set in the **activeFrame** prop, otherwise it will show the animation frame set in the **inactiveFrame** prop. | `false` |\n| **`onPress`** | A callback to call when the button is pressed. | `undefined` |\n| **`speed`** | The speed the animation will progress. Sending a negative value will reverse the animation |`1`|\n| **`iconSize`** | The size of the animated icon. This prop will set the `width` and `height` of the animation view. |`50`|\n| **`style`** | Style attributes for the view, as expected in a standard [`View`](https://facebook.github.io/react-native/docs/layout-props.html). | `undefined` |\n| **`containerStyle`** | Style attributes for the container view, as expected in a standard [`View`](https://facebook.github.io/react-native/docs/layout-props.html). | `undefined` |\n\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}