{"id":18325228,"url":"https://github.com/kanzitelli/rn-bounceable","last_synced_at":"2025-04-06T00:31:11.662Z","repository":{"id":45401149,"uuid":"411068005","full_name":"kanzitelli/rn-bounceable","owner":"kanzitelli","description":"🏀 Native bounceable effect for any React Native component. Built with Reanimated 2. Compatible with Expo (Web).","archived":false,"fork":false,"pushed_at":"2022-08-29T13:44:42.000Z","size":778,"stargazers_count":41,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T22:57:41.743Z","etag":null,"topics":["bounceable","bounceable-component","expo","react","react-native","react-native-web","rn-bounceable"],"latest_commit_sha":null,"homepage":"https://rn-bounceable.batyr.io","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/kanzitelli.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":"2021-09-27T23:03:47.000Z","updated_at":"2024-05-27T09:22:46.000Z","dependencies_parsed_at":"2022-09-13T19:25:26.712Z","dependency_job_id":null,"html_url":"https://github.com/kanzitelli/rn-bounceable","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frn-bounceable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frn-bounceable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frn-bounceable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frn-bounceable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kanzitelli","download_url":"https://codeload.github.com/kanzitelli/rn-bounceable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419597,"owners_count":20936009,"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":["bounceable","bounceable-component","expo","react","react-native","react-native-web","rn-bounceable"],"created_at":"2024-11-05T18:40:14.315Z","updated_at":"2025-04-06T00:31:10.677Z","avatar_url":"https://github.com/kanzitelli.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://xxx-files.ggc.team/oss/rn-bounceable/logo.png\" width=\"80%\" title=\"Logo\"\u003e\n\u003c/p\u003e\n\n## Quick start\n\n```bash\n\u003e yarn add rn-bounceable\n```\n\nMake sure you have [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) installed in your project.\n\n## Usage\n\n```tsx\nimport {Image} from 'react-native';\nimport {Bounceable} from 'rn-bounceable';\n\nclass Screen = () =\u003e {\n  return (\n    \u003cBounceable\u003e\n      \u003cImage source={{uri: 'https://static.expo.dev/static/brand/square-512x512.png'}} /\u003e\n    \u003c/Bounceable\u003e\n  )\n}\n```\n\n### Expo Web\n\nSince `rn-bounceable` uses Reanimated 2, we need its babel plugin to be applied. Expo Web doesn't transpile modules by default, so we'll need to tell it to transpile the library.\n\n1. Install `@expo/webpack-config`:\n\n```\nyarn add -D @expo/webpack-config\n```\n\n2. Create `webpack.config.js` in the root of your project:\n\n```\nconst createExpoWebpackConfigAsync = require('@expo/webpack-config')\n\nmodule.exports = async function (env, argv) {\n  const config = await createExpoWebpackConfigAsync(\n    {\n      ...env,\n      babel: { dangerouslyAddModulePathsToTranspile: ['rn-bounceable'] },\n    },\n    argv\n  )\n\n  return config\n}\n```\n\nDon't forget to add `webpack.config.js` into `tsconfig.json` under `exclude` section, if needed.\n\n##### Available props\n\n```tsx\ntype BounceableProps = {\n  onPress?: () =\u003e void;\n  onLongPress?: () =\u003e void;\n  disabled?: boolean; // default: false\n  noBounce?: boolean; // default: false\n  immediatePress?: boolean; // default: true\n  delayLongPress?: number; // default: 800\n  activeScale?: number; // default: 0.95\n  delayActiveScale?: number; // default: 0\n  springConfig?: Animated.WithSpringConfig; // default: { damping: 10, mass: 1, stiffness: 300 }\n  contentContainerStyle?: StyleProp\u003cViewStyle\u003e;\n};\n```\n\n## Example\n\nExamples could be found in `expo-example` folder or in [expo-starter](https://github.com/kanzitelli/expo-starter), [rn-starter](https://github.com/kanzitelli/rn-starter) and [rnn-starter](https://github.com/kanzitelli/rnn-starter).\n\nSee it with [Expo Web](https://rn-bounceable.batyr.io) or [Expo Go](https://expo.io/@kanzitelli/rn-bounceable-example).\n\nThis library was bootstrapped from [kanzitelli/if-component](https://github.com/kanzitelli/if-component).\n\nhttps://user-images.githubusercontent.com/4402166/142771470-a1210a92-9a74-4205-b023-b8ac2403dd84.MP4\n\n## License\n\nThis project is [MIT licensed](https://github.com/kanzitelli/rn-bounceable/blob/master/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanzitelli%2Frn-bounceable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkanzitelli%2Frn-bounceable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanzitelli%2Frn-bounceable/lists"}