npm - react-native-unit-components - Versions diffs - 0.1.0 - Mend

react-native-unit-components 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/lib/typescript/webComponent/WebComponent.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import React from 'react';
+import { WebView } from 'react-native-webview';
+import type { CardEvent, CardMessage } from './webMessages/cardMessage';
+import type { PageEvent, PageMessage } from './webMessages/pageMessage';
+import { UnitEvent, UnitMessage } from './webMessages/unitMessages';
+export declare type WebViewMessageType = PageMessage | CardMessage | UnitMessage;
+declare type WebViewEvent = PageEvent | UnitEvent | CardEvent;
+export interface WebViewMessage {
+    type: WebViewMessageType;
+    details?: WebViewEvent;
+}
+export interface WebComponentProps {
+    type: WebComponentType;
+    params?: string;
+    onMessage: (message: WebViewMessage) => void;
+    script?: string;
+}
+export declare enum WebComponentType {
+    card = "unit-elements-card",
+    slot = "unit-elements-sdk-slot"
+}
+export declare const WebComponent: React.ForwardRefExoticComponent<WebComponentProps & React.RefAttributes<WebView<{}>>>;
+export {};

package/lib/typescript/webComponent/html.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const htmlText = "\n <!DOCTYPE html>\n <html lang=\"en\">\n\n <head lang=\"en\">\n <title>Unit Web SDK Demo</title>\n <script>\n window.UnitMobileSDK = true\n </script>\n <script src=\"https://unit-white-labeled-banking.netlify.app/client-events.js\"></script>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">\n </html>\n\n <body style=\"margin: 0\">\n <COMPONENT>\n\n <script>\n const postMessageToSDK = (message) => {\n if ('ReactNativeWebView' in window) {\n const messageString = JSON.stringify(message)\n window['ReactNativeWebView'].postMessage(messageString)\n }\n }\n\n const postHeight = () => {\n setTimeout(() => {\n const height = window.document.documentElement.getBoundingClientRect().height + 36\n postMessageToSDK({ type: \"pageHeight\", details: { height } })\n })\n }\n\n window.addEventListener('DOMContentLoaded', e => {\n postMessageToSDK({ type: \"pageLoaded\" })\n });\n\n window.addEventListener(\"unitRequestRendering\", (e) => {\n postMessageToSDK({ type: \"unitRequestRendering\", details: { data: JSON.stringify(e.detail) }})\n });\n\n window.addEventListener(\"unitOnLoad\", (e) => {\n postHeight()\n postMessageToSDK({ type: \"unitOnLoad\" })\n });\n\n window.addEventListener(\"unitRequestCloseFlow\", (e) => {\n postMessageToSDK({ type: \"unitRequestCloseFlow\" })\n });\n\n window.addEventListener(\"unitRequestOpenLink\", (e) => {\n postMessageToSDK({ type: \"unitRequestOpenLink\", details: e.detail })\n });\n\n window.addEventListener(\"unitCardStatusChanged\", (e) => {\n const response = e.detail\n response.then((data) => {\n postMessageToSDK({ type: \"cardStatusChanged\", details: { card: JSON.stringify(data.data) }})\n }).catch((e) => {\n console.log(e)\n })\n });\n\n const dispatchRenderingEvent = (details) => {\n const event = new CustomEvent(\"unitRequestRendering\",{ detail: JSON.parse(details) })\n window.dispatchEvent(event)\n }\n\n <SCRIPT_FROM_NATIVE>\n </script>\n </body>\n";
2	+ export default htmlText;

package/lib/typescript/webComponent/webMessages/cardMessage.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare enum CardMessage {
+    CARD_STATUS_CHANGE = "cardStatusChanged"
+}
+export interface CardStatusChangedEvent {
+    card: any;
+}
+export declare type CardEvent = CardStatusChangedEvent;

package/lib/typescript/webComponent/webMessages/pageMessage.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare enum PageMessage {
+    PAGE_LOADED = "pageLoaded",
+    PAGE_HEIGHT = "pageHeight"
+}
+export interface HeightEvent {
+    height: number;
+}
+export declare type PageEvent = HeightEvent;

package/lib/typescript/webComponent/webMessages/unitMessages.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+export declare enum UnitMessage {
+    UNIT_REQUEST_RENDERING = "unitRequestRendering",
+    UNIT_REQUEST_REFRESH = "unitRequestRefresh",
+    UNIT_REQUEST_CLOSE_FLOW = "unitRequestCloseFlow",
+    UNIT_REQUEST_OPEN_LINK = "unitRequestOpenLink",
+    UNIT_ON_LOAD = "unitOnLoad"
+}
+export interface RequestRenderingData {
+    nativePlace: string;
+    nativeComponent: string;
+}
+export interface RequestRenderingEvent {
+    data: string;
+}
+export interface RequestRefreshEvent {
+    refEvent: string;
+    dependencies: string[];
+    resourceId: string;
+}
+export interface RequestOpenLinkEvent {
+    href: string;
+    target: string;
+}
+export declare type UnitEvent = RequestRenderingEvent | RequestRefreshEvent | RequestOpenLinkEvent;

package/package.json ADDED Viewed

@@ -0,0 +1,152 @@
+{
+  "name": "react-native-unit-components",
+  "version": "0.1.0",
+  "description": "Unit React Native components",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "unit-react-native-components.podspec",
+    "!lib/typescript/example",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn && yarn example pods"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "author": "Alon Shprung <alonshp1@gmail.com> (https://github.com/alonshp)",
+  "license": "MIT",
+  "homepage": "https://www.unit.co",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@arkweid/lefthook": "^0.7.7",
+    "@babel/eslint-parser": "^7.18.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.68.0",
+    "commitlint": "^17.0.2",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-builder-bob": "^0.18.3",
+    "release-it": "^15.0.0",
+    "typescript": "^4.5.2",
+    "react-native-webview": "11.23.1"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+  "dependencies": {
+    "react-native-webview": "11.23.1"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "@babel/eslint-parser",
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/components/BottomSheet/BottomSheetComponent.tsx ADDED Viewed

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef, useState } from "react"
+import type WebView from "react-native-webview"
+import { WebComponent, WebComponentType, WebViewMessage } from "../../webComponent/WebComponent"
+import { Dimensions, Linking, View } from "react-native"
+import BottomSheet from "../../helpers/BottomSheet"
+import EventBus, { BusEvent } from "../../helpers/EventBus"
+import { HeightEvent, PageMessage } from "../../webComponent/webMessages/pageMessage"
+import { RequestOpenLinkEvent, RequestRenderingData, RequestRenderingEvent, UnitMessage } from "../../webComponent/webMessages/unitMessages"
+import { CardMessage, CardStatusChangedEvent } from "../../webComponent/webMessages/cardMessage"
+export const UNBottomSheetComponent = () => {
+  const [isActive, setIsActive] = useState(false)
+  const [height, setHeight] = useState(0)
+  const [renderingRequest, setRenderingRequest] = useState<string | null>(null)
+  const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false)
+  const [newHeightMessage, setNewHeightMessage] = useState<WebViewMessage | null>(null)
+  const webRef = useRef<WebView>(null)
+  const _listener = (data: string) => {
+    setRenderingRequest(data)
+    setIsActive(true)
+  }
+  useEffect(() => {
+    if (!webRef.current) return
+    if (renderingRequest) {
+      webRef.current?.injectJavaScript(`dispatchRenderingEvent('${renderingRequest}')`)
+    }
+  }, [webRef.current, renderingRequest])
+  useEffect(() => {
+    if (!isActive) {
+      setHeight(0)
+      setRenderingRequest(null)
+    }
+  }, [isActive])
+  useEffect(() => {
+    if (!waitForLoadingNewComponent && newHeightMessage) {
+      setWaitForLoadingNewComponent(false)
+      setNewHeight(newHeightMessage)
+    }
+  }, [waitForLoadingNewComponent, newHeightMessage])
+  useEffect(() => {
+    EventBus.Instance.addListener(BusEvent.REQUEST_RENDERING, _listener)
+    return (() => {
+      EventBus.Instance.removeListener(_listener)
+    })
+  }, [])
+  const getBottomSheetScript = () => {
+    return `
+      window.addEventListener("unitRequestRefresh", (e) => {
+        postMessageToSDK({ type: "unitRequestRefresh", details:  e.detail  })
+      });
+    `
+  }
+  const setNewHeight = (message: WebViewMessage) => {
+    if (renderingRequest) {
+      const nativePlace = (JSON.parse(renderingRequest) as RequestRenderingData).nativePlace;
+      if (nativePlace == 'overFullScreen') {
+        const windowHeight = Dimensions.get('window').height * 0.94;
+        setHeight(windowHeight)
+      } else {
+        setHeight((message.details as HeightEvent).height)
+      }
+    }
+  }
+  return (
+    <>
+      <View
+        pointerEvents={isActive ? undefined : 'none'}
+        style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
+      >
+        <BottomSheet
+          isOpen={isActive}
+          onClose={() => setIsActive(false)}
+          onOpen={() => setIsActive(true)}
+        >
+          <View style={{ height, paddingTop: height === 0 ? 0 : 10 }}>
+            <WebComponent ref={webRef} type={WebComponentType.slot} script={getBottomSheetScript()} onMessage={message => {
+              if (renderingRequest && message.type == PageMessage.PAGE_HEIGHT) {
+                setNewHeightMessage(message)
+              } else if (message.type == UnitMessage.UNIT_REQUEST_RENDERING) {
+                const { data } = (message.details! as RequestRenderingEvent)
+                if (data != renderingRequest) {
+                  setHeight(0)
+                  setRenderingRequest(data)
+                  setWaitForLoadingNewComponent(true)
+                  setTimeout(() => setWaitForLoadingNewComponent(false), 400)
+                }
+              } else if (message.type == CardMessage.CARD_STATUS_CHANGE) {
+                EventBus.Instance.event(BusEvent.CARD_STATUS_CHANGED, (message.details as CardStatusChangedEvent).card)
+              } else if (message.type == UnitMessage.UNIT_REQUEST_CLOSE_FLOW) {
+                setIsActive(false)
+              } else if (message.type == UnitMessage.UNIT_REQUEST_OPEN_LINK) {
+                const href = (message.details as RequestOpenLinkEvent).href
+                Linking.openURL(href)
+              }
+            }} />
+          </View>
+        </BottomSheet>
+      </View>
+    </>
+  )
+}

package/src/components/Card/CardComponent.tsx ADDED Viewed

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef, useState } from "react"
+import { View } from "react-native";
+import type WebView from "react-native-webview";
+import { HeightEvent, PageMessage } from "../../webComponent/webMessages/pageMessage";
+import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from "../../webComponent/webMessages/unitMessages";
+import EventBus, { BusEvent } from "../../helpers/EventBus"
+import { WebComponent, WebComponentType } from "../../webComponent/WebComponent"
+export interface UNCardComponentProps {
+  cardId: string;
+  customerToken: string;
+  onStatusChanged?: (card: any) => void; // TODO - UNCard
+}
+export const UNCardComponent = (props: UNCardComponentProps) => {
+  const [height, setHeight] = useState(0)
+  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null)
+  const webRef = useRef<WebView>(null)
+  useEffect(() => {
+    EventBus.Instance.addListener(BusEvent.CARD_STATUS_CHANGED, _cardStatusChanged)
+    EventBus.Instance.addListener(BusEvent.REQUEST_REFRESH, _requestRefresh)
+    return (() => {
+      EventBus.Instance.removeListener(_cardStatusChanged)
+      EventBus.Instance.removeListener(_requestRefresh)
+    })
+  }, [])
+  const _cardStatusChanged = (card: any) => {
+    if (props.onStatusChanged) {
+      props.onStatusChanged(card)
+    }
+  }
+  const _requestRefresh = (data: RequestRefreshEvent) => {
+    setRequestRefreshEvent(data)
+  }
+  useEffect(() => {
+    if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.card.valueOf()) && requestRefreshEvent.resourceId == props.cardId) {
+      webRef.current?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`)
+    }
+  }, [requestRefreshEvent])
+  const getCardParams = () => {
+    return `
+      cardId="${props.cardId}"
+      customerToken="${props.customerToken}"
+      src="https://d1xlopvhx2cz8k.cloudfront.net/resources/outlay.json"
+    `
+  }
+  const getCardScript = () => {
+    return `
+      const dispatchRefreshEvent = (details) => {
+        const event = new CustomEvent("unitRequestRefresh",{ detail: JSON.parse(details) })
+        window.dispatchEvent(event)
+      }
+    `
+  }
+  return (
+    <View style={{ height }}>
+      <WebComponent ref={webRef} type={WebComponentType.card} params={getCardParams()} script={getCardScript()} onMessage={message => {
+        if (message.type === UnitMessage.UNIT_REQUEST_RENDERING) {
+          EventBus.Instance.event(BusEvent.REQUEST_RENDERING, (message.details as RequestRenderingEvent).data)
+        }
+        if (message.type == PageMessage.PAGE_HEIGHT) {
+          setHeight((message.details as HeightEvent).height)
+        }
+      }} />
+    </View>
+  )
+}

package/src/components/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './Card/CardComponent'
2	+ export * from './BottomSheet/BottomSheetComponent'

package/src/helpers/BottomSheet.tsx ADDED Viewed

@@ -0,0 +1,277 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  BackHandler,
+  Dimensions,
+  Easing,
+  // Keyboard,
+  LayoutChangeEvent,
+  PanResponder,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import PropTypes from 'prop-types';
+export interface BottomSheetProps {
+  isOpen: boolean
+  children: ReactNode
+  sliderMaxHeight: number
+  onOpen: () => void
+  onClose: () => void
+  animationDuration: number,
+  expandToMaxHeightEnabled: boolean
+}
+const BottomSheet = (props: BottomSheetProps) => {
+  const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen)
+  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined)
+  const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight)
+  const [dy, setDy] = useState(0)
+  const _parentPanResponder = PanResponder.create({
+    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      return Math.abs(gestureState.dy) > 10
+    },
+    onPanResponderMove(_, gestureState) {
+      if (currentHeight + gestureState.dy < 0) return
+      if (!props.expandToMaxHeightEnabled && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight!) return
+      panelHeightValue.setValue(currentHeight + gestureState.dy)
+      setDy(gestureState.dy)
+    },
+    onPanResponderRelease: () => {
+      if (dy > 0) {
+        collapse()
+      } else if (!props.expandToMaxHeightEnabled) {
+        setToContentHeight(contentHeight!)
+      } else if (dy < 0) {
+        expand()
+      } else {
+        expand()
+      }
+    }
+  });
+  useEffect(() => {
+    if (props.isOpen && !isPanelOpened) {
+      fadeIn()
+    } else if (isPanelOpened) {
+      setContentHeight(0)
+      _dismiss()
+    }
+  }, [props.isOpen])
+  useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', _onBackPress);
+    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value))
+    return (() => {
+      BackHandler.removeEventListener('hardwareBackPress', _onBackPress);
+      panelHeightValue.removeListener(id)
+    })
+  }, [])
+  const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 0.3,
+      duration: 500,
+      useNativeDriver: false
+    }).start(() => { setIsPanelOpened(true) });
+  };
+  const fadeOut = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 500,
+      useNativeDriver: false
+    }).start(() => {
+      setIsPanelOpened(false)
+      props.onClose()
+    });
+  };
+  const setToContentHeight = (contentHeight: number) => {
+    Animated.timing(panelHeightValue, {
+      duration: props.animationDuration,
+      easing: Easing.quad,
+      toValue: sliderMaxHeight - contentHeight!,
+      useNativeDriver: false,
+    }).start()
+  }
+  const expand = () => {
+    const { animationDuration } = props;
+    if (currentHeight > (sliderMaxHeight - contentHeight!)) {
+      setToContentHeight(contentHeight!)
+      return
+    }
+    Animated.timing(panelHeightValue, {
+      duration: animationDuration,
+      easing: Easing.quad,
+      toValue: 0,
+      useNativeDriver: false,
+    }).start()
+  }
+  const collapse = () => {
+    if (currentHeight > (sliderMaxHeight - contentHeight!)) {
+      _dismiss()
+      return
+    }
+    setToContentHeight(contentHeight!)
+    // Animated.timing(panelHeightValue, {
+    //   duration: animationDuration,
+    //   easing: Easing.quad,
+    //   toValue: sliderMaxHeight - contentHeight!,
+    //   useNativeDriver: false,
+    // }).start(() => {
+    //   const isPanelOpenedNewValue = !isPanelOpened
+    //   setIsPanelOpened(isPanelOpenedNewValue)
+    //   if (isPanelOpenedNewValue) {
+    //     // onOpen();
+    //   } else {
+    //     // onClose();
+    //     Keyboard.dismiss();
+    //   }
+    // });
+  };
+  const _onBackPress = () => {
+    isPanelOpened && collapse();
+    return isPanelOpened;
+  };
+  const _setSize = (e: LayoutChangeEvent) => {
+    let newContentHeight = e.nativeEvent.layout.height
+    if (newContentHeight !== 0) newContentHeight += 42;
+    setContentHeight(newContentHeight)
+    setToContentHeight(newContentHeight)
+  };
+  const _dismiss = () => {
+    const { animationDuration } = props
+    Animated.timing(panelHeightValue, {
+      duration: animationDuration,
+      easing: Easing.quad,
+      toValue: sliderMaxHeight,
+      useNativeDriver: false,
+    }).start(() => {
+    })
+    fadeOut()
+  }
+  const {
+    sliderMaxHeight,
+    children,
+  } = props;
+  return (
+    <>
+      <TouchableOpacity
+        style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }} activeOpacity={1}
+        onPress={_dismiss}
+      >
+        <Animated.View
+          style={{ backgroundColor: 'black', flex: 1, opacity: fadeAnim }}
+        >
+        </Animated.View>
+      </TouchableOpacity>
+      <Animated.View
+        {..._parentPanResponder.panHandlers}
+        style={{
+          ...styles.container,
+          height: sliderMaxHeight,
+          transform: [
+            { translateY: panelHeightValue },
+          ],
+        }}
+      >
+        <View
+          style={styles.outerContent}
+        >
+          <TouchableOpacity activeOpacity={1}>
+            <View style={styles.lineContainer}>
+              <View style={styles.line} />
+            </View>
+          </TouchableOpacity>
+          <View
+            onLayout={_setSize}
+            style={[styles.innerContent]}
+          >
+            {children}
+          </View>
+        </View>
+      </Animated.View>
+    </>
+  );
+}
+BottomSheet.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node]),
+  isOpen: PropTypes.bool,
+  sliderMaxHeight: PropTypes.number,
+  animation: PropTypes.func,
+  animationDuration: PropTypes.number,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  expandToMaxHeightEnabled: PropTypes.bool
+};
+BottomSheet.defaultProps = {
+  children: <View />,
+  isOpen: true,
+  sliderMaxHeight: Dimensions.get('window').height * 0.95,
+  animationDuration: 200,
+  onOpen: () => null,
+  onClose: () => null,
+  expandToMaxHeightEnabled: false
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 60,
+    paddingHorizontal: 12,
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 6,
+    },
+    shadowOpacity: 0.37,
+    shadowRadius: 7.49,
+    elevation: 12,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    backgroundColor: '#ffffff',
+  },
+  lineContainer: {
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    alignItems: 'center'
+  },
+  line: {
+    width: 35,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 18,
+    backgroundColor: '#D5DDE0',
+  },
+  outerContent: {
+    flex: -1,
+  },
+  innerContent: {
+    flex: -1,
+  },
+});
+export default BottomSheet;