Skip to content

⚛️ React Native modal component that brings swipe to dismiss to WebView

License

Notifications You must be signed in to change notification settings

alkafinance/react-native-modalize-webview

Repository files navigation

react-native-modalize-webview

npm version CircleCI Status license: MIT Supports iOS code style: prettier semantic-release

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