react-native-message-dialog

A simple, dialog message component with callback action like Airbnb. Ideal for showing errors, info and warnings.

Installation

If using npm:

npm i react-native-message-dialog

Usage

import Message from 'react-native-message-dialog'

Simply place a <Message /> inside of any compnent.

<View style={{ flex: 1 }}>
    <Message visible={true} />
</View>

Styling Usage

Message is fully customizable using the height, textStatus, textCb, textMessage, textStatusStyle and textCbStyle props.

Example usage to change dots color:

const textStatusStyle = {
    color: 'red',
};

return (
    <View style={{flex: 1}}>
        <Message visible={true} textStatusStyle={textStatusStyle} />
    </View>
)

Documentation

Message Component

| Name | Description | Default | Type | |-----------------|-------------------------------------------------------|-------------------|----------| | visible | Determinates if message container is visible | false | Boolean | | onPress | Callback to retry an action | () => ({}) | Function | | textStatus | Left text of the message container | Error | String | | textCb | Right text of the message container (Callback action) | Retry | String | | textMessage | Center text of the message container | Please try again. | String | | textStatusStyle | Style to apply to textMessage | Object | Object | | textCbStyle | Style to apply to textCb | Object | Object |

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Janid Ham | https://janidham.com

License

MIT