react_native_message_toast v0.1.3

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

License

MIT