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