react_native_message_toast
v0.1.3
Published
This is a highly customizable toast message for both ios and android.
Downloads
15
Maintainers
Readme
react-native-message-toast
This is a highly customizable Toast message for React Native
Install
npm i react_native_message_toast
Demo
Usage
import MessageToast from 'react_native_message_toast';
const App = () => {
const messageRef = useRef(null);
return (
<>
{*...*}
<MessageToast ref={messageRef} duration={2000} />
// call show function from ref
<Button
title="Show Toast"
onPress={() => messageRef.current.show('This is a toast message!')}
/>
{*...*}
</>
);
};
export default App;
Custom design for toast message
const App = () => {
const messageRef = useRef(null);
const customDesign = () => {
return (
<View>
{/* your custom design */}
</View>
);
}
return (
<>
{*...*}
<MessageToast
ref={messageRef}
duration={2000}
RenderMessage={(message) => customDesign(message)}
/>
// call show function from ref
<Button
title="Show Toast"
onPress={() => messageRef.current.show('This is a toast message!')}
/>
{*...*}
</>
);
};
export default App;
Props
| Props | Type | Description | | ------------- | :------: | :----------------------------------- | | RenderMessage | function | Custom design for toast message | | duration | number | Duration for auto hide toast message | | color | string | Color for message text |