{"id":23384473,"url":"https://github.com/jefelewis/react-native-slide-modal","last_synced_at":"2025-04-11T02:34:02.838Z","repository":{"id":57340150,"uuid":"368389962","full_name":"jefelewis/react-native-slide-modal","owner":"jefelewis","description":"NPM Link: https://www.npmjs.com/package/react-native-slide-modal","archived":false,"fork":false,"pushed_at":"2021-05-24T20:09:43.000Z","size":1266,"stargazers_count":8,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:14:51.497Z","etag":null,"topics":["npm-package","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jefelewis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-18T03:29:50.000Z","updated_at":"2023-12-31T12:09:17.000Z","dependencies_parsed_at":"2022-08-26T03:42:39.904Z","dependency_job_id":null,"html_url":"https://github.com/jefelewis/react-native-slide-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-slide-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-slide-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-slide-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-slide-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jefelewis","download_url":"https://codeload.github.com/jefelewis/react-native-slide-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248329924,"owners_count":21085618,"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":["npm-package","react-native","typescript"],"created_at":"2024-12-21T23:27:25.465Z","updated_at":"2025-04-11T02:34:02.809Z","avatar_url":"https://github.com/jefelewis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Slide Modal\n\n[![npm version](https://badge.fury.io/js/react-native-slide-modal.svg)](https://badge.fury.io/js/react-native-slide-modal)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-slide-modal.svg)](https://www.npmjs.com/package/react-native-slide-modal)\n\n*  [Features](#features)\n*  [Built With](#built-with)\n*  [Pending Items](#pending-items)\n*  [Screenshot (iOS)](#screenshot-ios)\n*  [Screenshot (Android)](#screenshot-android)\n*  [Getting Started](#getting-started)\n*  [Props](#props)\n*  [Example App](#example-app)\n*  [Building \u0026 Publishing](#building-\u0026-publishing)\n*  [Changelog](#changelog)\n\n\n## Features\n*  ✅ iOS/Android\n*  ✅ Dark Mode\n*  ✅ Built with TypeScript\n*  ✅ Built with React Hooks\n*  ✅ Lightweight (0 Third Party Libraries)\n\n\n## Built With\n* [TypeScript](https://github.com/microsoft/TypeScript) - Programming Language\n* [React Hooks](https://reactjs.org/docs/hooks-intro.html) - Functional Component State/Lifecycle Methods\n* [React Native](https://facebook.github.io/react-native/) - Mobile (iOS/Android) Framework\n\n\n## Pending Items\n- [ ] \n\n\n## Screenshot (iOS)\n**Bottom Sheet**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/ios/iosBottomSheet.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n**Form Sheet**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/ios/iosFormSheet.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n## Screenshot (Android)\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- \u003cimg src=\"./assets/screenshots/android/androidActionSheet.gif\" width=\"40%\" height=\"40%\" /\u003e --\u003e\n\u003c/div\u003e\n\n\n## Getting Started\n**1. Install Package:**\n```\nnpm i react-native-slide-modal\n```\n\n**2. Add Example Code:**\n```typescript\n// Imports: Dependencies\nimport React, { useState } from 'react';\nimport { Button, Text } from 'react-native';\nimport { SlideModal }  from 'react-native-slide-modal';\n\n// App\nconst App: React.FC = (): JSX.Element =\u003e {\n  // React Hooks: State\n  const [ modalVisible, setModalVisible ] = useState\u003cboolean\u003e(false);\n\n  return (\n    \u003cSlideModal\n      modalType=\"iOS Form Sheet\"\n      // modalType=\"iOS Bottom Sheet\"\n      modalVisible={modalVisible}\n      screenContainer={\n        \u003c\u003e\n          \u003cButton\n            title=\"Show Modal\"\n            onPress={() =\u003e setModalVisible(!modalVisible)}\n          /\u003e\n        \u003c/\u003e\n      }\n      modalContainer={\n        \u003c\u003e\n          \u003cText\u003eModal Content\u003c/Text\u003e\n        \u003c/\u003e\n      }\n      modalHeaderTitle=\"Header Title\"\n      pressDone={() =\u003e setModalVisible(!modalVisible)}\n      pressCancel={() =\u003e setModalVisible(!modalVisible)}\n      darkMode={false}\n      doneDisabled={false}\n    /\u003e\n  );\n};\n\n// Exports\nexport default App;\n```\n\n**3. Run Project:**\n\n**Android**\n```javascript\nreact-native run-android\n```\n\n**iOS**\n```javascript\nreact-native run-ios\n```\n\n\n## Props\n\n**Default:**\n| Property            |   Type         |  Default                | Description                                                            |\n| ------------------- | :------------: | :---------------------: | ---------------------------------------------------------------------- |\n| `screenContainer`   | `JSX.Element`  | `\u003c\u003e\u003c/\u003e`                 | Screen content                                                         |\n| `modalContainer`    | `JSX.Element`  | `\u003c\u003e\u003c/\u003e`                 | Modal content                                                          |\n| `modalType`         | `ModalType`    | `'iOS Bottom Sheet'`    | Modal slide type ('iOS Bottom Sheet' or 'iOS Form Sheet')              |\n| `modalVisible`      | `boolean`      | `false`                 | Modal visible                                                          |\n| `pressCancel`       | `() =\u003e void`   | `undefined`             | onPress for Cancel button                                              |\n| `pressDone`         | `() =\u003e void`   | `undefined`             | onPress for Done button                                                |\n| `doneDisabled`      | `boolean`      | `false`                 | Disable Done button                                                    |\n\n\n**Optional:**\n| Property                            |   Type                         |  Default     | Description                                                            |\n| ----------------------------------- | :----------------------------: | :----------: | ---------------------------------------------------------------------- |\n| `darkMode`                          | `boolean`                      | `false`      | Dark mode                                                              |\n| `modalHeaderTitle`                  | `string`                       | `''`         | Modal header title                                                     |\n| `customStyleContainer`              | `ContainerStyle`               | iOS Theme    | Styling for container                                                  |\n| `customStyleModalHeaderContainer`   | `ModalHeaderContainerStyle`    | iOS Theme    | Styling for modal header container                                     |\n| `customStyleCancelText`             | `CancelTextStyle`              | iOS Theme    | Styling for cancel text                                                |\n| `customStyleDoneText`               | `DoneTextStyle`                | iOS Theme    | Styling for done text                                                  |\n| `customStyleModalContentContainer`  | `ModalContentContainerStyle`   | iOS Theme    | Styling for modal content container                                    |\n| `customStylePickerItemText`         | `PickerItemTextStyle`          | iOS Theme    | Styling for picker item text                                           |\n\n\n## Example App\n**1. Open Example App:**\n```\ncd ExampleApp\n```\n\n**2. Run Simulator:**\n\n**Android**\n```javascript\nreact-native run-android\n```\n\n**iOS**\n```javascript\nreact-native run-ios\n```\n\n\n## Building \u0026 Publishing\n\n**Build**\n```javascript\nnpm run build\n```\n\n**Publish**\n```javascript\nnpm publish\n```\n\n\n## Changelog\n\n### [0.0.31] - 5/22/2021\n\n***Removed***\n\n- Removed `react-native-typescript-transformer` as dependency.\n\n### [0.0.28] - 5/20/2021\n\n***Added***\n\n- Added `assets` to exclude in `tsconfig.json`.\n\n***Changed***\n\n- Updating `tsconfig.json`.\n- Updating `peerDependencies` in `package.json`.\n\n***Removed***\n\n- Removed `types` to exclude in `tsconfig.json`.\n\n### [0.0.27] - 5/20/2021\n\n***Added***\n\n- Added Props section to `README`.\n- Added Example App section to `README`.\n\n***Changed***\n\n- Changed file structure.\n- Changed `index.js` to `index.tsx`.\n- Changed `package.json` build script to `cd src \u0026\u0026 tsc \u0026\u0026 cp ../package.json \u0026\u0026 Echo Build completed!`.\n\n***Removed***\n\n- Removed `yalc` as a global dependency.\n\n### [0.0.20] - 5/19/2021\n\n***Added***\n\n- Added `yalc` as a global dependency, so `yalc publish` can be used.\n\n### [0.0.19] - 5/18/2021\n\n***Changed***\n\n- Changed `inlineRequires: true` to `inlineRequires: false` in `metro.config.js`.\n\n### [0.0.17] - 5/18/2021\n\n***Changed***\n\n- Changed `compilerOptions.jsx` from `react` to `react-jsx`.\n\n### [0.0.16] - 5/18/2021\n\n***Removed***\n\n- Removed `import React from 'react'`.\n\n### [0.0.15] - 5/18/2021\n\n***Changed***\n\n- Changing `\"lib\": [\"es2017\"]` to `\"lib\": [\"es2015\"]` in `tsconfig.json`.\n\n### [0.0.12] - 5/18/2021\n\n***Changed***\n\n- Changing import from `import React from 'react';` to `import * as React from 'react';`.\n\n### [0.0.11] - 5/18/2021\n\n***Changed***\n\n- Updated NPM `dependencies`.\n\n### [0.0.9] - 5/18/2021\n\n***Changed***\n\n- Changed `alignContent` from `react` to `alignItems`.\n- Changed `compilerOptions.jsx` from `react` to `react-jsx`.\n\n### [0.0.8] - 5/18/2021\n\n***Changed***\n\n- Changed `compilerOptions.jsx` from `react-jsx` to `react`.\n\n### [0.0.7] - 5/18/2021\n\n***Changed***\n\n- Added `@types/react` as `devDependencies`.\n\n### [0.0.6] - 5/18/2021\n\n***Changed***\n\n- Changed `compilerOptions.jsx` from `react-native` to `react-jsx`.\n\n### [0.0.5] - 5/18/2021\n\n***Changed***\n\n- Updated `typescript`.\n\n### [0.0.4] - 5/18/2021\n\n***Added***\n\n- Added `react` and `react-native` as dependencies.\n\n### [0.0.3] - 5/18/2021\n\n***Added***\n\n- Added `README` screenshots.\n\n### [0.0.2] - 5/18/2021\n\n***Added***\n\n- Added `README` example code.\n\n\n### [0.0.1] - 5/18/2021\n\n***Added***\n\n- Added `SlideModal` component (`iOS Bottom Sheet`, `iOS Form Sheet`).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjefelewis%2Freact-native-slide-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjefelewis%2Freact-native-slide-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjefelewis%2Freact-native-slide-modal/lists"}