https://github.com/paraboly/react-native-generic-modal
Fully customizable Generic Modal via Paraboly for React Native.
https://github.com/paraboly/react-native-generic-modal
generic generic-modal modal paraboly react react-native
Last synced: 10 months ago
JSON representation
Fully customizable Generic Modal via Paraboly for React Native.
- Host: GitHub
- URL: https://github.com/paraboly/react-native-generic-modal
- Owner: Paraboly
- Created: 2019-03-20T14:00:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T12:30:08.000Z (almost 3 years ago)
- Last Synced: 2025-03-21T21:11:56.967Z (10 months ago)
- Topics: generic, generic-modal, modal, paraboly, react, react-native
- Language: JavaScript
- Homepage: https://www.paraboly.com
- Size: 4.43 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Fully customizable Generic Modal via Paraboly for React Native.
[](https://www.npmjs.com/package/@paraboly/react-native-generic-modal)
[](https://www.npmjs.com/package/@paraboly/react-native-generic-modal)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
## Installation
Add the dependency:
```ruby
npm i @paraboly/react-native-generic-modal
```
## Peer Dependencies
##### IMPORTANT! You need install them.
```
"lodash": "^4.17.x",
"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-easy-grid": ">= 0.2.1",
"react-native-custom-icon": ">= x.x.x",
"react-native-vector-icons": ">= 6.x.x",
"react-native-dynamic-vector-icons": ">= x.x.x",
"react-native-floating-action-button": ">= x.x.x"
```
## Basic Usage
```ruby
```
## Advanced Usage
```ruby
```
### Configuration - Props
| Property | Type | Default | Description |
| -------------------- | :---------: | :----------: | ------------------------------------------------------------------------------------- |
| isOpen | boolean | false | use this to open modal directly |
| coverScreen | boolean | false | use this to set your modal covers the whole screen |
| refName | string | null | set a reference name for the modal, this is for dynamic usage of the modal |
| backdrop | boolean | false | use this to add a backdrop for the modal |
| modalWidth | number | dynamic | use this to set custom modal width |
| modalHeight | number | dynamic | use this to set custom modal height |
| modalBottom | number | height * 0.6 | use this to change where modal will be appear depends on the bottom |
| generateButtons | array | null | use this to generate buttons as an example (You must create an array with the format) |
| modalDesignComponent | component | ModelDesign | set your own modal design as a component |
| title | string | "" | change the title |
| context | string | "" | change the context |
| rightText | string | "" | change the title right side |
| titleFontFamily | font family | Helvetica | use this to set the font family for the modal |
| rightTextFontFamily | font family | Helvetica | use this to set the font family for the modal |
| contextFontFamily | font family | Helvetica | use this to set the font family for the modal |
| contextHeight | number | 55 | use this to set context's height |
| defaultContext | string | "" | use this to set a default context value |
| titleTextStyle | style | style | use this to set your own style for title text |
| rightTextStyle | style | style | use this to set your own style for right title text |
| contextTextStyle | style | style | use this to set your own style for context text |
| backgroundColor | color | #a092d6 | use this to set background color for the header part of the modal |
| customIconComponent | component | null | use this to set your own custom icon component for the generated buttons |
| onOpened | function | null | use this to set your own onOpened function |
| onClosed | function | null | use this to set your own onClosed function |
## Generated Buttons Usage
Okey, we can use Dynamic Vector Icons component as generated buttons but we must follow this format. "generateButtons" prop accepts an array and it must be like this : (You can check the example)
```ruby
buttons = [
{
size: 35,
name: "cancel",
icon: "cancel",
color: "#C60817",
type: "MaterialIcons",
onPress: () => {}
},
{
size: 35,
name: "verify",
color: "#06CAA6",
icon: "verified-user",
type: "MaterialIcons",
onPress: () => {}
}
];
```
#### Generated Buttons Custom Icon Usage
We can use our own custom icon component as well but still we must follow the above format for the generatedButtons but this time we need to send "customIcon: true" data as well. It let the lib knows that a custom icon will be used and also we need to provide "customIconComponent" to let it knows that which component will be implement.
CustomIconComponent should be something like the below. It has to be item.icon, item.size and item.color for the usage of generatedButtons.
```ruby
buttons = [
{
size: 28,
name: "map",
icon: "map",
color: "#C60817",
customIcon: true, // Magic is here, DO NOT FORGET this line!
onPress: () => {}
},
{
size: 28,
color: "#06CAA6",
customIcon: true, // Magic is here, DO NOT FORGET this line!
icon: "announcement",
name: "announcement",
onPress: () => {}
}
];
```
```ruby
}
/>
```
## Author
FreakyCoder, kuray.ogun@paraboly.com || kurayogun@gmail.com
## License
React Native Generic Modal Library is available under the MIT license. See the LICENSE file for more info.