Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-basic-modal
Basic & Elegant Modal for React Native
https://github.com/wrathchaos/react-native-basic-modal
android apple basic elegant freakycoder google halloween halloween-theme ios modal modalize react react-native reactjs theme ui
Last synced: about 2 months ago
JSON representation
Basic & Elegant Modal for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-basic-modal
- Owner: WrathChaos
- License: mit
- Created: 2019-10-13T13:25:33.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T13:54:29.000Z (2 months ago)
- Last Synced: 2024-10-25T16:59:15.978Z (about 2 months ago)
- Topics: android, apple, basic, elegant, freakycoder, google, halloween, halloween-theme, ios, modal, modalize, react, react-native, reactjs, theme, ui
- Language: Java
- Homepage: https://freakycoder.com
- Size: 21.8 MB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-basic-modal)
[](https://github.com/WrathChaos/react-native-basic-modal)
[](https://www.npmjs.com/package/react-native-basic-modal)
[](https://www.npmjs.com/package/react-native-basic-modal)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
Version 1 😍
- Written from scratch 🍻
- Typescript 💪
- Much better API
- Better customizations
- Much better library fundamentals
- Husky Setup 🐶
- Commit Linter
- Prettier
# Installation
Add the dependency:
```ruby
npm i react-native-basic-modal
```
## Peer Dependencies
###### IMPORTANT! You need install them
```json
"react-native-modal": ">= 11.4.0"
```
# Usage
## Import
```js
import BasicModal, { Button } from "react-native-basic-modal";
```
## BasicModal Usage
### Default Usage
```jsx
```
### Advanced Usage with custom header component and custom footer component
```jsx
Hey Header
}
footerComponent={
Hey Footer
}
/>
```
### Advanced Usage with **custom buttons**
Of course you do not need to use `built-in` Button component from library. You can put anything into the `children`
_Note:_If you need to customize the default buttons, you should use this method instead, it will be much easier and customizable
```jsx
{}} />
{}} />
```
### How can I hide the modal by pressing outside its content?
The prop `onBackdropPress` allows you to handle this situation:
```jsx
this.setState({ isVisible: false })}
/>
```
# For more FAQ about Modal:
#### [Modal FAQ](https://github.com/react-native-community/react-native-modal#frequently-asked-questions)
## Example Project 😍
You can check out the example project 🥰
Simply run
- `npm i`
- `react-native run-ios/android`
should work of the example project.
# Configuration - Props
| Property | Type | Default | Required | Description |
|------------------------|:---------:|:--------:|:--------:|---------------------------------------------------------------------|
| isVisible | bool | false | 🟢 | set the modal's visibility |
| title | string | Hold on! | 🟢 | set your own title text |
| description | string | default | 🟢 | set your own description text |
| primaryButtonText | string | default | 🟡 | change default primary button's text |
| secondaryButtonText | string | default | 🟡 | change default secondary button's text |
| onPrimaryButtonPress | function | default | 🟡 | set the function when the primary button is pressed |
| onSecondaryButtonPress | function | default | 🟡 | set the function when the secondary button is pressed |
| onBackdropPress | function | default | 🟡 | set the function when the backdrop of the modal is pressed |
| headerComponent | component | none | 🟡 | set your own component if you need to add/customize header component |
| footerComponent | component | none | 🟡 | set your own component if you need to add/customize footer component |
| style | ViewStyle | default | 🟡 | set/override the default style |
| modalContainerStyle | ViewStyle | default | 🟡 | set/override the default style |
| contentContainerStyle | ViewStyle | default | 🟡 | set/override the default style |
| buttonsContainerStyle | ViewStyle | default | 🟡 | set/override the default style |
| titleTextStyle | TextStyle | default | 🟡 | set/override the default style |
| descriptionTextStyle | TextStyle | default | 🟡 | set/override the default style |
# Configuration - Props [Button] Component
| Property | Type | Default | Required | Description |
|------------------------|:---------:|:--------:|:--------:|---------------------------------------------------------------|
| text | string | Hold on! | 🟡 | set text |
| style | ViewStyle | default | 🟡 | set/override the default style |
| onPress | function | default | 🟡 | set the function |
| textStyle | TextStyle | default | 🟡 | set/override the default style |
## Credits
I inspired by [Orizon Design](https://www.instagram.com/p/BtHuW3sBpkG/) Thank you so much guys, nice UI / UX :)
## Future Plans
- [x] ~~LICENSE~~
- [x] ~~Typescript~~
- [x] ~~Version 1.0.0~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, [email protected]
## License
React Native Basic Modal is available under the MIT license. See the LICENSE file for more info.