react-native-modalize-webview
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

react-native-modalize-webview

npm package CircleCI Status Supports iOS MIT License code style: prettier

React Native modal component that brings swipe to dismiss to WebView.

Getting started

$ npm install react-native-modalize-webview --save

Usage

Import ModalizeWebView and use it like the regular Modalize component. Provide WebView props via webViewProps to customize the displayed web page.

import {ModalizeWebView} from 'react-native-modalize-webview'
 
function MyComponent() {
  const modalizeRef = useRef(null)
 
  const handleOpen = useCallback(() => {
    if (modalizeRef.current) {
      modalizeRef.current.open()
    }
  }, [])
 
  return (
    <>
      <TouchableOpacity onPress={handleOpen}>
        <Text>Open the modal</Text>
      </TouchableOpacity>
 
      <ModalizeWebView
        ref={modalizeRef}
        handlePosition="inside"
        webViewProps={{
          source: {
            uri: 'https://facebook.github.io/react-native/',
          },
        }}
      />
    </>
  )
}

Props


Reference

Props

webViewProps

Configures the underlying WebView component.

Type Required
WebViewProps Yes

anchorOffset

Specifies extra offset from top on scroll to an anchor link. Defaults to 16.

Type Required
number No

License

MIT License © Alka, Inc

Package Sidebar

Install

npm i react-native-modalize-webview

Weekly Downloads

12

Version

1.0.0

License

MIT

Unpacked Size

14.5 kB

Total Files

11

Last publish

Collaborators

  • alkabot