react-native-customized-toast
A react-native framework to render customized toast in both iOS and Android with common behaviour.
Installing
npm install react-native-customized-toast
Example
import React, { useState } from 'react';
import {
TouchableHighlight,
Text,
View,
} from 'react-native';
import { Toast, Position, Theme } from 'react-native-customized-toast';
function ToastView(){
const [message, setMessage] = useState(null);
const showToast = () => {
setMessage({ text: 'This is a custom Toast' });
}
const hideToast = () => {
setMessage(null);
}
return (
<View style={{ flex: 1 }}>
<TouchableHighlight
onPress={showToast}
>
<Text>Show Toast</Text>
</TouchableHighlight>
<Toast
message={message}
position={Position.TOP}
theme={Theme.LIGHT}
>
<TouchableHighlight
onPress={hideToast}
>
<Text>Hide Toast</Text>
</TouchableHighlight>
</Toast>
</View>
);
};
export default ToastView;
Interfaces
Name | Type |
---|---|
Theme | LIGHT & DARK |
Position | TOP, CENTER & BOTTOM |
ToastFont | SMALL, MEDIUM, LARGE & XLARGE |
Message | { text : string } |
API
Props | Type | Default | Required |
---|---|---|---|
theme | Theme | Theme.LIGHT | false |
message | Message | null | false |
children | ReactNode - Any React component | null | false |
messageColor | String | defaults to red | false |
messageStyle | TextStyle | defaults to font size 16 and color red | false |
messageFontSize | Number | 16 | false |
duration | Number | 5000 | false |
backgroundColor | String | Black for DARK theme and white for LIGHT theme | false |
containerStyle | ViewStyle | container with border and corner radius | false |
borderStyle | ViewStyle | border width - 1 and radius 10 | false |
position | Position | Position.TOP | false |
raised | boolean | true | false |
hideOnPress | boolean | true | false |
Contributing
Any sort of issues is welcome. Please share the screenshot of the bug. If there are any errors, please share them as well.
Pull requests are also appreciated. If you want to change the API, feel free to connect and discuss first.