React-native-imperative-things NPM

React Native Imperative Things 💉

Call pickers and modals from anywhere in the app

Installation

Non Expo

yarn add react-native-imperative-things react-native-modal-datetime-picker @react-native-community/datetimepicker

npm install react-native-imperative-things react-native-modal-datetime-picker @react-native-community/datetimepicker

Expo

expo install react-native-imperative-things react-native-modal-datetime-picker @react-native-community/datetimepicker

Usage

Add the following near the root of your app

import {ImperativeThingsPortal} from 'react-native-imperative-things';

const App = () => {
    return (
        <OtherProviders>
            <ImperativeThingsPortal include={['date-picker']}/> // <-- Add this
            <TheRestOfYourApp/>
        </OtherProviders>
    );
};

Now you're able to do the following, anywhere in the app, even outside of components

import {datePicker} from 'react-native-imperative-things';

datePicker.show({
    onSuccess: (date: Date) => {/*Do stuff*/},
    componentProps: {/*Props that will be passed to the date picker*/},
});

//OR

const selectedDate = await datePicker.showAsync({
    onSuccess: (date: Date) => {/* The return of this will be stored in selectedDate */},
    componentProps: {/*Props that will be passed to the date picker*/},
});