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

Dependencies (0)

    Dev Dependencies (17)

    Package Sidebar

    Install

    npm i react-native-modalize-webview

    Weekly Downloads

    11

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    14.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • alkabot