{"id":22783589,"url":"https://github.com/birdwingo/react-native-swipe-modal","last_synced_at":"2025-04-05T08:04:04.353Z","repository":{"id":185875164,"uuid":"674107543","full_name":"birdwingo/react-native-swipe-modal","owner":"birdwingo","description":"🚀 Swipe modal is a customizable and animated modal component that can be used in React Native applications. It provides a smooth swipe-to-close functionality along with various configuration options to suit different use cases.","archived":false,"fork":false,"pushed_at":"2025-03-11T22:58:04.000Z","size":5980,"stargazers_count":70,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T07:03:02.957Z","etag":null,"topics":["modal","react-native","reanimated","scrollview","swipe"],"latest_commit_sha":null,"homepage":"https://birdwingo.com","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/birdwingo.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":"2023-08-03T06:50:52.000Z","updated_at":"2025-03-25T14:56:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"82aad474-7dac-4b54-8672-b0e355a80a6b","html_url":"https://github.com/birdwingo/react-native-swipe-modal","commit_stats":null,"previous_names":["birdwingo/react-native-swipe-modal"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-swipe-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-swipe-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-swipe-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-swipe-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/birdwingo","download_url":"https://codeload.github.com/birdwingo/react-native-swipe-modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305932,"owners_count":20917208,"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":["modal","react-native","reanimated","scrollview","swipe"],"created_at":"2024-12-11T22:08:49.183Z","updated_at":"2025-04-05T08:04:04.332Z","avatar_url":"https://github.com/birdwingo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @birdwingo/react-native-swipe-modal\n\n![npm downloads](https://img.shields.io/npm/dm/%40birdwingo/react-native-swipe-modal)\n![npm version](https://img.shields.io/npm/v/%40birdwingo/react-native-swipe-modal)\n![github release](https://github.com/birdwingo/react-native-swipe-modal/actions/workflows/release.yml/badge.svg?event=pull_request)\n![npm release](https://github.com/birdwingo/react-native-swipe-modal/actions/workflows/public.yml/badge.svg?event=release)\n\n## Features 🌟\n\n🕶️ Swipe-to-Close Functionality: Easily close modals with a single swipe gesture, providing an intuitive user experience.\n\n🎨 Customizable Appearance: Adjust the color, size, animation, and more to make it blend seamlessly with your application's design.\n\n💃 Smooth Animations: Enjoy smooth and pleasing animations that offer a polished look and feel.\n\n📱 Responsive Design: Adapts to various screen sizes and orientations, ensuring a consistent appearance across devices.\n\n⚙️ Easy Integration: With minimal code, you can have Swipe Modal up and running in your application.\n\n♿ Accessibility Support: Designed with accessibility in mind, allowing all users to interact with the modal effortlessly.\n\n🌍 Cross-Platform Support: Works seamlessly on both iOS and Android, providing a unified experience.\n\n## About\n\n`react-native-swipe-modal` is a customizable and animated modal component that can be used in React Native applications. It provides a smooth swipe-to-close functionality along with various configuration options to suit different use cases. It is used in the [Birdwingo mobile app](https://www.birdwingo.com) to show different kinds of popups and explanations.\n\n\u003cdiv style=\"flex-direction:row;\"\u003e\n  \u003cimg src=\"./src/assets/images/demo.gif\" width=\"300\"\u003e\n  \u003cimg src=\"./src/assets/images/demo2.gif\" width=\"300\"\u003e\n\u003c/div\u003e\n\n## Installation\n\n```bash\nnpm install react-native-reanimated\nnpm install react-native-gesture-handler\nnpm install @birdwingo/react-native-swipe-modal\n```\n\n## Usage\n\nTo use the `SwipeModal` component, you need to import it in your React Native application and include it in your JSX code. Here's an example of how to use it:\n\n```jsx\nimport React, { useRef } from 'react';\nimport { View, Text } from 'react-native';\nimport SwipeModal, { SwipeModalPublicMethods } from '@birdwingo/react-native-swipe-modal';\n\n\nconst YourComponent = () =\u003e {\n\n  const modalRef = useRef\u003cSwipeModalPublicMethods\u003e(null);\n\n  const showModal = () =\u003e modalRef.current?.show(); // Call this function to show modal\n  const hideModal = () =\u003e modalRef.current?.hide(); // Call this function to hide modal\n\n  return (\n    \u003cSwipeModal ref={modalRef}\u003e\n      \u003cView\u003e\n        \u003cText\u003eSwipe Modal\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/SwipeModal\u003e\n  );\n\n};\n\nexport default YourComponent;\n```\n\n## Props\n\n Name                    | Type                          | Default value           | Description       \n-------------------------|-------------------------------|-------------------------|---------------------\n `children`              | ReactNode\\|ReactNode[]        | **required**            | The content to be rendered inside the modal.\n `bg`                    | string                        | 'black'                 | The background color of the modal.\n `showBar`               | boolean                       | true                    | Set to `true` to display a bar at the top of the modal.\n `barColor`              | string                        | 'grey'                  | The color of the bar at the top of the modal.\n `barContainerStyle`     | ViewStyle\\|ViewStyle[]        |                         | Additional styles applied to bar container view.\n `maxHeight`             | 'max'\\|'auto'\\|number         | 'max'                   | The maximum height of the modal. If `'auto'` maxHeight of modal will the height modal children need.\n `defaultHeight`         | number                        | `maxHeight`             | The default height of the modal.\n `fixedHeight`           | boolean                       | false                   | Set to `true` if you want to maintain a fixed height for the modal. It means that the height of the modal will get back to the initial position after swipe, if modal was not closed .\n `style`                 | ViewStyle\\|ViewStyle[]        |                         | Additional styles to be applied to the modal.\n `closeTrigger`          | 'swipeDown'\\|'minHeight'      | 'swipeDown'             | The trigger to close the modal. `'swipeDown'` means that modal will close when modal was swiped down by `closeTriggerValue`. `'minHeight'` means that modal will close when height of modal is less than `closeTriggerValue`.\n `closeTriggerValue`     | number                        | 10                      | The value that triggers the modal to close when using the `closeTrigger`.\n `scrollEnabled`         | boolean                       | false                   | Set to `true` if you want the modal content to be scrollable.\n `scrollContainerStyle`  | ViewStyle\\|ViewStyle[]        |                         | Additional styles to be applied to the scrollable container.\n `scrollContainerProps`  | ScrollView['props']           |                         | Additional props to be passed to the internal ScrollView component.\n `headerComponent`       | ReactNode                     |                         | A custom component to be displayed at the top of the modal. It's placed above scroll content\n `footerComponent`       | ReactNode                     |                         | A custom component to be displayed at the bottom of the modal. It's placed under scroll content\n `disableSwipe`          | boolean                       | false                   | Set to `true` if you don't want allow gesture.\n `visible`               | boolean                       | false                   | Default value for modal visibility. It can be changed dynamically using public methods.\n `onShow`                | () =\u003e void                    |                         | A callback function that will be triggered when the modal is shown.\n `onHide`                | () =\u003e void                    |                         | A callback function that will be triggered when the modal is hidden.\n `closeOnEmptySpace`     | boolean                       | true                    | Set to `true` to close the modal when the user taps outside the modal's content.\n `closeOnPressBack`      | boolean                       | true                    | Set to `true` to close the modal when the user presses the back button (Android only).\n `animationDuration`     | number                        | 300                     | The duration of the modal's opening and closing animations, in milliseconds.\n `closeSpaceVisibility`  | number (0 - 1)                | 0.6                     | A number representing the opacity of empty space, that will close the modal if `closeOnEmptySpace` is enabled.\n `topOffset`             | number                        | 0                       | Determines the amount of space that the swipeable content will be offset from the top edge of window.\n `containerProps`        | ViewProps                     |                         | Additional props to be applied to the container.\n `hideKeyboardOnShow`    | boolean                       | true                    | Set to `true` if you want to hide keyboard on show modal if was opened.\n `wrapInGestureHandlerRootView`| boolean                 | false                   | Set to `true` if you want to wrap content in to GestureHandlerRootView (required if you want to use modal inside react-native Modal component).\n `useKeyboardAvoidingView`| boolean                      | true                    | Set to `false` if you want to show keyboard over the modal content.\n `keyboardAvoidingViewBehavior`| 'height' | 'position' | 'padding'| Platform.OS === 'ios' ? 'height' : undefined| Behavior property for keyboardAvoidingView\n `keyboardAvoidingViewProps` | KeyboardAvoidingViewProps | | Additional props to be applied to the KeyboardAvoidingView.\n\n## Public Methods\n\nName                  | Description\n----------------------|--------------\n`show`                | Call this method to show the modal.\n`hide`                | Call this method to hide the modal.\n\n## Sponsor\n\n**react-native-swipe-modal** is sponsored by [Birdwingo](https://www.birdwingo.com).\\\nDownload Birdwingo mobile app to see react-native-swipe-modal in action!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdwingo%2Freact-native-swipe-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirdwingo%2Freact-native-swipe-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdwingo%2Freact-native-swipe-modal/lists"}