An animated toast message component for React Native that can be called imperatively.
yarn add react-native-toast-message
Render the Toast
component in your app entry file (along with everything that might be rendered there) and set a ref to it.
// App.jsx
import React from 'react';
import Toast from 'react-native-toast-message';
function App(props) {
return (
<>
{/* ... */}
<Toast ref={(ref) => Toast.setRef(ref)} />
</>
);
}
export default App;
Then use it anywhere in your app, by calling any Toast
method directly:
import Toast from 'react-native-toast-message';
Toast.show({
text1: 'Hello',
text2: 'This is some something 👋'
});
When calling the show
method, you can use the following options
to suit your needs. Everything is optional, unless specified otherwise.
The usage of |
below, means that only one of the values show should be used.
If only one value is shown, that's the default.
Toast.show({
type: 'success | error | info',
position: 'top | bottom',
text1: 'Hello',
text2: 'This is some something 👋',
visibilityTime: 4000,
autoHide: true,
topOffset: 30,
bottomOffset: 40,
onShow: () => {},
onHide: () => {}
});
Toast.hide({
onHide: () => {}
});
If you want to add custom types - or overwrite the existing ones - you can add a config
prop when rendering the Toast
in your app root
.
// App.jsx
import React from 'react';
import Toast from 'react-native-toast-message';
const toastConfig = {
success: (internalState) => (
<View style={{ height: 60, width: '100%', backgroundColor: 'pink' }}>
<Text>{internalState.text1}</Text>
</View>
),
error: () => {},
info: () => {},
any_custom_type: () => {}
};
function App(props) {
return (
<>
{/* ... */}
<Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />
</>
);
}
export default App;
Then just use the library as before
Toast.show({ type: 'any_custom_type' });
The icons for the default success
, error
and info
types are made by Pixel perfect from flaticon.com.