{"id":18020784,"url":"https://github.com/enzomanuelmangano/react-native-inkwell","last_synced_at":"2025-03-26T21:32:31.681Z","repository":{"id":57337722,"uuid":"394614018","full_name":"enzomanuelmangano/react-native-inkwell","owner":"enzomanuelmangano","description":"A material touchable area that provides the ripple effect","archived":false,"fork":false,"pushed_at":"2021-10-07T18:29:27.000Z","size":1323,"stargazers_count":35,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T13:12:09.538Z","etag":null,"topics":["material","material-design","react-native","ripple"],"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/enzomanuelmangano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-10T10:36:44.000Z","updated_at":"2024-12-26T03:37:59.000Z","dependencies_parsed_at":"2022-09-14T19:12:33.006Z","dependency_job_id":null,"html_url":"https://github.com/enzomanuelmangano/react-native-inkwell","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-inkwell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-inkwell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-inkwell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-inkwell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enzomanuelmangano","download_url":"https://codeload.github.com/enzomanuelmangano/react-native-inkwell/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245738951,"owners_count":20664374,"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":["material","material-design","react-native","ripple"],"created_at":"2024-10-30T06:07:37.254Z","updated_at":"2025-03-26T21:32:26.663Z","avatar_url":"https://github.com/enzomanuelmangano.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n👉🏼 React Native InkWell\n\u003c/h1\u003e\n\nA material touchable area that provides the ripple effect.\nInspired by the [InkWell Flutter](https://api.flutter.dev/flutter/material/InkWell-class.html) component.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/enzomanuelmangano/react-native-inkwell/blob/main/.assets/inkwell_image.jpg\" title=\"react-native-inkwell\"\u003e\n\u003c/div\u003e\n\n## Installation\n\n**You need to have already installed the following packages:**\n\n- [react-native-reanimated (\u003e= 2.0.0)](https://docs.swmansion.com/react-native-reanimated/docs/installation)\n- [react-native-gesture-handler (\u003e= 1.0.0)](https://docs.swmansion.com/react-native-gesture-handler/docs/)\n\nOpen a Terminal in your project's folder and install the library using `yarn`:\n\n```sh\nyarn add react-native-inkwell\n```\n\nor with `npm`:\n\n```sh\nnpm install react-native-inkwell\n```\n\n## Usage\n\n```jsx\nimport InkWell from 'react-native-inkwell';\n\nconst YourRippleButton = () =\u003e (\n  \u003cInkWell\n    style={{\n      width: 200,\n      height: 200,\n      backgroundColor: 'white',\n    }}\n    contentContainerStyle={{\n      alignItems: 'center',\n      justifyContent: 'center',\n    }}\n    onTap={() =\u003e {\n      console.log('tapped');\n    }}\n  \u003e\n    \u003cText\u003eTap Here\u003c/Text\u003e\n  \u003c/InkWell\u003e\n);\n```\n\n## Properties\n\n### `enabled?: boolean`\n\nIndicates whether InkWell should be active or not.\n\nDefault: `true`.\n\n---\n\n### `radius?: number`\n\nDecides the maximum radius of the Ripple Effect. By default the Ripple effect will determine the radius from the height and width of the component so that it can expand as much as possible.\n\n---\n\n### `onTap?: () =\u003e void`\n\nCalled when the InkWell is clicked. If the onDoubleTap callback is not specified, onTap will be called immediately, otherwise it will be called after [maxDelayMs](https://github.com/enzomanuelmangano/react-native-inkwell/tree/main#maxdelayms-number).\n\n---\n\n### `onTapDown?: () =\u003e void`\n\nCalled when the user taps down the InkWell.\n\n---\n\n### `onTapCancel?: () =\u003e void`\n\nCalled when the user cancels a tap.\n\n---\n\n### `onDoubleTap?: () =\u003e void`\n\nCalled when the InkWell is clicked two consecutive times in less than [maxDelayMs](https://github.com/enzomanuelmangano/react-native-inkwell/tree/main#maxdelayms-number).\n\n---\n\n### `onLongPress?: () =\u003e void`\n\nCalled when the component is pressed for more than [minDurationMs](https://github.com/enzomanuelmangano/react-native-inkwell/tree/main#mindurationms-number).\n\n---\n\n### `maxDelayMs?: number`\n\n[Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required.](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh/#maxdelayms)\n\nThis property is inherited from maxDelayMs of the react-native-gesture-handler's TapGestureHandler.\n\nDefault: `500`\n\n---\n\n### `minDurationMs?: number`\n\n[Minimum time, expressed in milliseconds, that a finger must remain pressed on the corresponding view.](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/longpress-gh/#mindurationms)\n\nThis property is inherited from minDurationMs of the react-native-gesture-handler's LongPressGestureHandler.\n\nDefault: `500`\n\n---\n\n### `scaleDuration?: number`\n\nThe duration of ink scale animation.\n\nDefault: `depends on the component's width and height.`\n\n---\n\n### `easing?: Animated.WithTimingConfig[\"easing\"]`\n\nThe Reanimated [EasingFunction](https://docs.swmansion.com/react-native-reanimated/docs/2.1.0/api/withTiming/).\n\nDefault: [Easing.bezier(0.25, 0.5, 0.4, 1.0)](https://cubic-bezier.com/#.25,.5,.4,1)\n\n---\n\n### `splashColor?: string`\n\nThe splash color of the ripple effect.\n\nDefault: `rgba(0,0,0,0.1)`;\n\n---\n\n### `highlightColor?: string`\n\nThe backgroundColor of the View when the InkWell is activated.\n\nDefault: `rgba(0,0,0,0.03)`;\n\n---\n\n### `style?: StyleProp\u003cViewStyle\u003e`\n\n[A React Native style.](https://reactnative.dev/docs/style)\n\n---\n\n### `contentContainerStyle?: StyleProp\u003cViewStyle\u003e`\n\n[The React Native style of the content.](https://reactnative.dev/docs/style)\n\n---\n\n### `children?: React.ReactNode`\n\nThe component that could be contained in the InkWell.\n\n---\n\n### `simultaneousHandlers and waitFor`\n\n[Inherited from react-native-gesture-handler in order to support Cross Handler Interactions if needed.](https://docs.swmansion.com/react-native-gesture-handler/docs/interactions/)\n\n---\n\n## Hooks\n\n### `useInkWellRef`\n\nUnder the hood this hook is using [useAnimatedRef from react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/api/hooks/useAnimatedRef).\nWhen provided, it is used by the InkWell in order to measure the layout on the UI Thread.\n\n---\n\n## Nested InkWells\n\nSince the InkWell is built on top of the react-native-gesture-handler component [TapGestureHandler](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh/), by default, upon clicking an InkWell inside another, the tap will be propagated to the parent as well.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/enzomanuelmangano/react-native-inkwell/blob/main/.assets/default_propagation.jpg\" title=\"react-native-inkwell\"\u003e\n\u003c/div\u003e\n\nFortunately, this case study is easily handled.\nFirst, a `Ref` must be created and assigned to the `InkWell` that is being nested. Once this is done, the `Ref` must be added to the childrenRefs property of the `InkWell`.\n**That's it.**\n\n```jsx\nconst NestedInkWellUseCase = () =\u003e {\n  const onTapParent = React.useCallback(() =\u003e {\n    console.log('Parent');\n  }, []);\n\n  const onTapChild = React.useCallback(() =\u003e {\n    console.log('Child');\n  }, []);\n\n  // 1. create the refs\n  const firstChildRef = useInkWellRef();\n  const secondChildRef = useInkWellRef();\n\n  return (\n    \u003cView style={styles.buttonContainer}\u003e\n      {/* Parent */}\n      \u003cInkWell\n        style={styles.button}\n        contentContainerStyle={styles.contentButton}\n        onTap={onTapParent}\n        childrenRefs={[firstChildRef, secondChildRef]} // \u003c-- 4. add the childRef to the childrenRefs\n      \u003e\n        {/* First nested InkWell */}\n        \u003cInkWell\n          ref={firstChildRef} // \u003c--  2. assign the firstChildRef\n          style={[styles.button, styles.innerButton]}\n          contentContainerStyle={styles.contentButton}\n          onTap={onTapChild}\n        \u003e\n          \u003cText\u003eChild\u003c/Text\u003e\n        \u003c/InkWell\u003e\n        {/* Second nested InkWell */}\n        \u003cInkWell\n          ref={secondChildRef} // \u003c--  3. assign the secondChildRef\n          style={[styles.button, styles.innerButton]}\n          contentContainerStyle={styles.contentButton}\n          onTap={onTapChild}\n        \u003e\n          \u003cText\u003eChild\u003c/Text\u003e\n        \u003c/InkWell\u003e\n      \u003c/InkWell\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n**Here's the result:**\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/enzomanuelmangano/react-native-inkwell/blob/main/.assets/without_propagation.jpg\" title=\"react-native-inkwell\"\u003e\n\u003c/div\u003e\n\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzomanuelmangano%2Freact-native-inkwell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenzomanuelmangano%2Freact-native-inkwell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzomanuelmangano%2Freact-native-inkwell/lists"}