muhammeddeniz / rn-popup-modal

Toast and modal for react native projects

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

Success	Error	Warning	Info

Modal

Success	Error

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

Name	Default Value	Type
title	Default	string
text	Default	string
backgroundColor	undefined	string
duration	2000	number
showToast	false	boolean
setShowToast	() => {}	Function (useState set function)
type	"Success"	'Success' | 'Info' | 'Warning' | 'Error'

Modal Props

Name	Default Value	Type
title	Default	string
text	Default	string
leftButtonText	Cancel	string
rightButtonText	Default	string
visible	false	boolean
setVisible	() => {}	Function (useState set function)
onRightButtonPress	() => {}	Function
modalType	"Success"	'Success' | 'Error'

Contributing

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

Author

Muhammed Deniz

License

MIT