@thevsstech/react-native-toast
v1.0.3
Published
React Native cross-plateform (iOS/Android) toast notification component highly customizable.
Downloads
8
Readme
React Native Toast
React Native cross-plateform (iOS/Android) toast notification component highly customizable.
Installation
npm install @thevsstech/react-native-toast
or with yarn
yarn add @thevsstech/react-native-toast
Usage
to use toast first wrap your application or screen with toast like shown before
import Toast from "@thevsstech/react-native-toast";
// app.tsx, index or whatever component is used as initial component
const App = () => <Toast>
// rest of your application logi
// <Navigation/>
</Toast>
then you can show toast any where in your app, see Configuration section to see available parameters you can pass into show
function
export default function HomeScreen() {
const showDefault = () => {
Toast.show({
message: 'your message comes here'
});
};
return (
<Toast>
<View style={styles.container}>
<Button title={'show'} onPress={showDefault} />
</View>
</Toast>
);
}
message
option can be a string or a function that returns a React elements
Toast.show({
// styles and animatedValue parameters are optional
// you can use animatedValue to interpolate some animations
message: (styles, animatedValue) => <View style={{flexDirection: 'row'}}>
<Icon name={'warning'} size={styles.message.fontSize} color={styles.message.color} />
<Text style={styles.message}>Your toast message comes here</Text>
</View>
});
the toast will be automatically hidden after given duration, but if you want the hide it before that you can call hide
function
const hideDefault = () => {
Toast.hide()
};
Configuration
| option | description | required | default value |
| ------ | ----------- | -------- | ------------- |
| duration | Time until the toast gets closed | false | 2000 |
| message | message to show in toast, it can be a string or a function that resolves a react element | false | '' |
| type | type of toast, available values are default
, error
, success
, warning
, info
| false | default |
| position | position of toast, available values are bottom
, top
| false | bottom |
| animation | animation type of toast, available values are scale
, fade
, slide-up
, slide-bottom
, see Animations section custom animations | false | scale |
| style | see Styling section to make your custom styles, see Styling section to more details | false | {}
| presetStyles | see Styling section to creating custom types as well as styling built-in types | false | {}
you can pass this configurations in show
method, or you can specify default configs as <Toast configs={configs}
const configs = {
duration: 3000,
position: 'top',
animation: 'fade'
}
const App = () => <Toast>
// rest of your application logi
// <Navigation/>
</Toast>
// other things
Toast.show({
// this will override configs.duration
duration: 2000,
// this will override configs.position
position: 'bottom',
message: 'your toast message comes here'
})
Styling
You may use type
configuration or you can pass your custom styles in configs as an object with 3 keys, container
, message
, title
,
for example below styling will make your toast more like native ToastAndroid
Toast.show({
message: 'your toast message comes here',
style: {
container: {
backgroundColor: '#eeeeee',
paddingVertical: 15,
bottom: 35,
},
message: {
color: '#000',
fontSize: 13,
lineHeight: 12,
},
},
});
Animations
By default rn-toast supports scale
, fade
, slide-up
, slide-bottom
animations, but let say if you want to slide-right
animation you can make it like this;
Toast.show({
message: 'this toast will slide from right',
// if you pass style a function it will be called with an Animated.Value so you can interpolate it
style: (animatedValue) => ({
container: {
transform: [
{
translateX: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [width, 0],
}),
},
],
},
}),
});
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT