react-native-modalize-webview

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

• Inherited Modalize props...

• webViewProps

• anchorOffset

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