rn-toast-modal

Popup and modal for react native projects

Installation

yarn add rn-toast-modal

npm install rn-toast-modal

this package use svg for that make sure you have react-native-svg package.

yarn add react-native-svg

install pods for ios

cd ios && pod install

Toast

Modal

Toast Usage

import React, { useState } from 'react';
import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import { Toast, Base } from 'rn-toast-modal';

// ...

export default function App() {
  const [showToast, setShowToast] = useState<boolean>(false);

  const showToastFunc = () => setShowToast(true);

  return (
    <Base>
      <View style={styles.container}>
        <TouchableOpacity onPress={showToastFunc}>
          <Text>Call Toast</Text>
        </TouchableOpacity>
      </View>

      <Toast type="Info" showToast={showToast} setShowToast={setShowToast} />
    </Base>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Default duration value is 3000ms. If you don`t want to toast disapare set duration props to -1.

<Toast
  type="Info"
  showToast={showToast}
  setShowToast={setShowToast}
  duration={-1}
/>

Modal Usage

import React, { useState } from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import { Modal, Base } from 'rn-toast-modal';

// ...

export default function App() {
  const [showModal, setShowModal] = useState<boolean>(false);

  const showModalFunc = () => setShowModal(true);

  return (
    <Base>
      <View style={styles.container}>
        <TouchableOpacity onPress={showModalFunc}>
          <Text>Call Modal</Text>
        </TouchableOpacity>
      </View>

      <Modal modalType="Error" visible={showModal} setVisible={setShowModal} />
    </Base>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Toast Props

Modal Props

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Author

Muhammed Deniz

License

MIT