React Native Storybook UI Wrapper - Support Deep Linking

storybook-ui-wrapper.tsx

const { getStorybookUI } = require('@storybook/react-native')
const React = require('react')
const { useEffect, useState } = require('react')
const { Linking } = require('react-native')
const { URL } = require('react-native-url-polyfill')

export const StorybookUIWrapper = () => {
  const [config, setConfig] = useState()
  const [url, setUrl] = useState()

  useEffect(() => {
    Linking.addEventListener('url', ({ url }) => {
      setUrl(url)
    })

    Linking.getInitialURL().then((url) => {
      if (url === null) {
        return setConfig({})
      }

      setUrl(url)
    })
  }, [])

  useEffect(() => {
    if (url === undefined) {
      return
    }

    if (url === null) {
      return setConfig({})
    }

    const parsedURL = new URL(url)

    if (parsedURL.hostname === 'story' && parsedURL.protocol === 'storybook:') {
      const initialSelection = parsedURL.searchParams.get('id')

      setConfig({
        initialSelection,
        isUIHidden: true,
      })
    } else {
      setConfig({})
    }
  }, [url])

  if (config === undefined) {
    return null
  }

  const StorybookUIRoot = getStorybookUI(config)

  return <StorybookUIRoot />
}