1
A React Native Confirm Modal
source link: https://reactnativeexample.com/a-react-native-confirm-modal/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A React Native Confirm Modal
Oct 26, 2022
2 min read
🌈 react-native-confirm-modal
A React Native Confirm Modal
Installation
yarn add @sj-distributor/react-native-confirm-modal
or
npm install @sj-distributor/react-native-confirm-modal
Usage
import React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import {
ConfirmModalProvider,
useConfirmModal,
} from '@sj-distributor/react-native-confirm-modal';
const Demo = () => {
const { showConfirmModal } = useConfirmModal();
return (
<View style={styles.container}>
<Button
title={'Click Demo'}
onPress={() => {
showConfirmModal({
title: 'Demo',
confirmText: 'Confirm',
description: `Here is a demo
Here is a demo
Here is a demo`,
onCancel: () => {
console.log('onCancel');
},
onConfirm: () => {
console.log('onConfirm');
},
});
}}
/>
<Button
title={'Click Demo 2'}
onPress={() => {
showConfirmModal({
title: 'Demo 2',
confirmText: 'OK',
cancelText: 'Close',
description: 'Here is a demo 2',
onCancel: () => {
console.log('onCancel');
},
onConfirm: () => {
console.log('onConfirm');
},
});
}}
/>
</View>
);
};
export default function App() {
return (
<ConfirmModalProvider>
<Demo />
</ConfirmModalProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Contributing
While developing, you can run the example app to test your changes.
Make sure your code passes TypeScript and ESLint. Run the following to verify:
yarn typescript
yarn lint
To fix formatting errors, run the following:
yarn lint --fix
Remember to add tests for your change if possible.
License
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK