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.

License

• MIT license