# react-native-popup-confirm-toast

### Release notes(1.1.0)

- "BodyComponent" parameter added.
- "modalContainerStyle" parameter added.
- Fixed a problem with "buttonEnabled" not working.

## Example popup-message

|Example Message|Example Confirm Message| Example Message AutoClose |Example  Custom Body Component |
| :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------:| :-----------------------------------------------------------:|
| ![](assets/popup1.gif) | ![](assets/popup2.gif) | ![](assets/popup3.gif) | ![](assets/popup4.gif) |

## Example toast-message

|                          Example Toast Top                    |                          Example Toast Bottom                 |
| :-----------------------------------------------------------: | :-----------------------------------------------------------: |
| ![](assets/3.gif) | ![](assets/4.gif) |

## Usage

## Installation

```
yarn add react-native-status-bar-height
```

```
yarn add react-native-popup-confirm-toast
```

```
import { Root, Popup } from 'react-native-popup-confirm-toast'
<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
              Popup.show({
                type: 'success',
                title: 'Dikkat!',
                textBody: 'Mutlak özgürlük, kendi başına hiçbir anlam ifade etmez. ',
                buttonText: 'Tamam',
                callback: () => Popup.hide()
              })
            }
        >
            <Text>Open Popup Message</Text>
        </TouchableOpacity>
    </View>
</Root>
```

```
import { Root, Popup } from 'react-native-popup-confirm-toast'
<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
              Popup.show({
                type: 'confirm',
                title: 'Dikkat!',
                textBody: 'Mutlak özgürlük, kendi başına hiçbir anlam ifade etmez. ',
                buttonText: 'Tamam',
                confirmText:'Vazgeç',
                callback: () => Popup.hide()
              })
            }
        >
            <Text>Open Popup Confirm Message</Text>
        </TouchableOpacity>
    </View>
</Root>
```

```
import { Root, Popup } from 'react-native-popup-confirm-toast'
//hooks or class component
const bodyComponent = (props) => {

return null;
}

<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
                const popup = Popup;
                popup.show({
                    type: 'confirm',
                    textBody: 'Hesabınızın silinme işlemini onaylamak için şifrenizi giriniz.',
                    bodyComponent: () => bodyComponent({...props,popup}),
                    confirmText: 'Vazgeç',
                    iconEnabled: false,
                    descTextStyle: GlobalAlertModalStyle.descTextStyle,
                    confirmButtonTextStyle: GlobalAlertModalStyle.confirmButtonTextStyle,
                    buttonEnabled: false,
                });
            }
        >
            <Text>Open Popup Confirm Message</Text>
        </TouchableOpacity>
    </View>
</Root>
```

Toast

```
import { Root, Toast } from 'react-native-popup-confirm-toast'
    <Root>
        <View>
            <TouchableOpacity
                onPress={() => 
                      Toast.show({
                        title: 'Dikkat!',
                        text: 'Mutlak özgürlük, kendi başına hiçbir anlam ifade etmez.',
                        color: '#702c91',
                        timeColor: '#440f5f',
                        timing: 5000,
                        icon: <Icon name={'check'} color={'#fff'} size={31}/>,
                        position: 'bottom',
                    })
                }
            >
                <Text>Open Toast</Text>
            </TouchableOpacity>
        </View>
    </Root>
```

## Documentation

### Popup

|Key |Type |Description |
|--- |--- |--- |
|`title`|string|default false|
|`textBody`|string|default: false |
|`bodyComponent`|string| custom modal component container default: false |
|`type`|enum| default: warning enum(success, danger, warning, confirm) |
|`buttonText`|string| default: Ok|
|`confirmText`| string| default: Cancel|
|`callback`| function| ok button press default popupHidden|
|`background`|string|default: rgba(0, 0, 0, 0.5)|
|`timing`|number| default 0 > autoClose |
|`iconEnabled`|boolean| default true|
|`icon`|requireUrl| default require('../assets/{type}.png') |
|`modalContainerStyle`|object| default { width: '90%',backgroundColor: '#fff', borderRadius: 8, alignItems: 'center', overflow: 'hidden', position: 'absolute'}} |
|`buttonContentStyle`|object| default {} |
|`okButtonStyle`|object| default {backgroundColor: '#702c91'} |
|`confirmButtonStyle`|object| default  |
|`okButtonTextStyle`|object| default  |
|`confirmButtonTextStyle`|object| default  |
|`titleTextStyle`|object|  default |
|`descTextStyle`|object|  default |

### Toast

|Key |Type |Description |
|--- |--- |--- |
|`title`|string|default false|
|`text`|string|Description default false|
|`titleTextStyle`|object|default: {color: '#fff',fontWeight: 'bold',fontSize: 16}|
|`descTextStyle`|object|default: {marginTop: 5,fontSize: 13,color: '#fff', fontWeight: '400',}|
|`backgroundColor`| string| default: #1da1f2|
|`timeColor`| string| time backgroundColor default: #1c6896|
|`position`|enum|default: bottom parameters => top, bottom|
|`icon`|component| default null (react-native-vector-icons or <Image/> component)|
|`timing`|number| default 5000 ms

## Author

SekizliPenguen, Inspired by "popup-ui"

## License

[MIT](./LICENSE)
