react-native-modal-hook
v0.1.2
Published
React Native Model hook & provider
Downloads
12
Readme
react-native-modal-hook
React Native Model hook & provider
Installation
npm install react-native-modal-hook
Usage
App.tsx
import { ModalProvider } from 'react-native-modal-hook';
export default function App() {
return (
<ModalProvider>
<RootModal />
</ModalProvider>
);
}
RootModal.tsx
import { Modal, Text } from 'react-native';
import React, { Fragment } from 'react';
import { useModal } from 'react-native-modal-hook';
export function RootModal() {
const { visible, Content, hide, title } = useModal();
return (
<Fragment>
{visible && (
<Modal
visible={visible}
onDismiss={hide}
animated={true}
presentationStyle={'pageSheet'}
>
<Text>{title}</Text>
<Content />
</Modal>
)}
</Fragment>
);
}
OtherComponents:
import { Button, Text, View } from 'react-native';
import * as React from 'react';
import { useModal } from 'react-native-modal-hook';
export function TestComponent() {
const { show } = useModal(() => {
return <Text>{'Hello'}</Text>;
});
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button onPress={() => show('hello')} title={'Open Modal'} />
</View> );
}
check examples folder for code sample
License
MIT