An easy-to-use pure JavaScript React Native Input/Dialog Modal
Fully customizable Model using async-await imperative logic. Compatible with all platforms (iOS, Android, Web).
- Supports Text Input
- Supports Option Select
- Supports Button Picker
npm install react-native-input-modal
yarn add react-native-input-modal
In your App.js file, import the ModalProvider and wrap your app with it. Then you can call async functions to show the modal and get the result.
import { ModalProvider } from 'react-native-input-modal';
// ...
<ModalProvider>
<App />
</ModalProvider>;
In your component, you can call the async function to show the modal and get the result.
Text Input:
import { useModal } from 'react-native-input-modal';
// ... Some function in any component
const { getTextInput } = useModal();
const value = await getTextInput({
title: 'Enter any value',
placeholder: 'Enter any value',
});
// ... returns: null or the value entered
console.log('Result:', result);
Get Options (Select):
import { useModal } from 'react-native-input-modal';
const { getSelectOption } = useModal();
const value = await getSelectOption({
title: 'Select a value',
selected: '1', // Optional
options: [
{ label: 'Some Option 1', value: '1' },
{ label: 'Some Option 2', value: '2' },
{ label: 'Some Option 3', value: '3' },
],
});
Get Options (Button):
import { useModal } from 'react-native-input-modal';
const { getPickOption } = useModal();
const value = await getPickOption({
title: 'Select a value',
options: [
{ label: 'Some Option 1', value: '1' },
{ label: 'Some Option 2', value: '2' },
{ label: 'Some Option 3', value: '3' },
],
});
The UI is fully customizable by passing a ModalStyles object to the ModalProvider. You can style any button or component of the UI
- Date/Time Picker
- Custom Components
- Add examples to custom styles
- Add multiple pre-built themes
Feel free to contribute to this project by creating issues or pull requests. This is my first open-source project, so I'm open to any suggestions or help.
MIT