0.1.2 • Published 3 years ago
rn-toast-modal v0.1.2
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