react-native-unit-components 0.1.0 → 1.0.0

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type WebView from 'react-native-webview';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { Dimensions, Linking, View } from 'react-native';
+import BottomSheet from '../../helpers/BottomSheet/BottomSheet';
+import EventBus from '../../helpers/EventBus';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { RequestOpenLinkEvent, RequestRenderingData, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { CardMessage, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';
+import { useListenerToBus } from '../../hooks/listenerToBus';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { getBottomSheetScript, handleHtmlFullHeight, renderingBottomSheetRequest, resetHtml } from './UNBottomSheetComponent.utils';
+import { getStylesObject } from './UNBottomSheetComponent.styles';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { useAppStateListener } from '../../hooks/useAppStateListener';
+
+export const UNBottomSheetComponent = () => {
+  const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
+  const [height, setHeight] = useState(0);
+
+  const [renderingRequest, setRenderingRequest] = useState<string | null>(null);
+  const [shouldEnableWebViewScroll, setShouldEnableWebViewScroll] = useState(false);
+
+  const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false);
+  const [newHeightMessage, setNewHeightMessage] = useState<WebViewMessage | null>(null);
+
+  const isAppActive = useAppStateListener();
+
+  const styles = getStylesObject();
+
+  const webRef = useRef<WebView>(null);
+
+  const listenerAction = (data: string) => {
+    setRenderingRequest(data);
+    setIsBottomSheetActive(true);
+  };
+
+  useEffect(() => {
+    if (!isAppActive) {
+      setIsBottomSheetActive(false);
+    }
+  }, [isAppActive]);
+
+  useEffect(() => {
+    if (!webRef.current) return;
+    if (renderingRequest) {
+      renderingBottomSheetRequest(webRef.current, renderingRequest);
+    }
+  }, [webRef.current, renderingRequest]);
+
+  useEffect(() => {
+    if (!isBottomSheetActive) {
+      webRef.current && resetHtml(webRef.current);
+      setHeight(0);
+      setRenderingRequest(null);
+    }
+  }, [isBottomSheetActive]);
+
+  useEffect(() => {
+    if (!waitForLoadingNewComponent && newHeightMessage) {
+      setWaitForLoadingNewComponent(false);
+      setNewHeight(newHeightMessage);
+    }
+  }, [waitForLoadingNewComponent, newHeightMessage]);
+
+  useListenerToBus([{ busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: listenerAction }]);
+
+  const setNewHeight = (message: WebViewMessage) => {
+    if (renderingRequest) {
+      const nativePlace = (JSON.parse(renderingRequest) as RequestRenderingData).nativePlace;
+      if (nativePlace == 'overFullScreen') {
+        const bottomSheetNewHeight = handleHtmlFullHeight(webRef.current, Dimensions.get('window').height);
+        setHeight(bottomSheetNewHeight);
+        setShouldEnableWebViewScroll(true);
+      } else {
+        setHeight((message.details as HeightEvent).height);
+        setShouldEnableWebViewScroll(false);
+      }
+    }
+  };
+
+  const onWebMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case PageMessage.PAGE_HEIGHT:
+        renderingRequest && setNewHeightMessage(message);
+        break;
+      case UnitMessage.UNIT_REQUEST_RENDERING:
+        // eslint-disable-next-line no-case-declarations
+        const { data } = (message.details as RequestRenderingEvent);
+        if (data != renderingRequest) {
+          setHeight(0);
+          setRenderingRequest(data);
+          setWaitForLoadingNewComponent(true);
+          setTimeout(() => setWaitForLoadingNewComponent(false), 400);
+        }
+        break;
+      case CardMessage.CARD_STATUS_CHANGED:
+        EventBus.Instance.event(CardMessage.CARD_STATUS_CHANGED, (message.details as CardStatusChangedEvent).card);
+        break;
+      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+        setIsBottomSheetActive(false);
+        break;
+      case UnitMessage.UNIT_REQUEST_OPEN_LINK:
+        // eslint-disable-next-line no-case-declarations
+        const { href } = (message.details as RequestOpenLinkEvent);
+        Linking.openURL(href);
+        break;
+    }
+  };
+
+  return (
+    <>
+      <View
+        pointerEvents={isBottomSheetActive ? undefined : 'none'}
+        style={styles.container}
+      >
+        <BottomSheet
+          isOpen={isBottomSheetActive}
+          height={height}
+          onClose={() => setIsBottomSheetActive(false)}
+          onOpen={() => setIsBottomSheetActive(true)}
+        >
+          { isAppActive && (
+            <WebComponent
+              ref={webRef}
+              type={WebComponentType.slot}
+              presentationMode={PresentationMode.CoverInjectedHeight}
+              script={getBottomSheetScript()}
+              onMessage={onWebMessage}
+              shouldEnableWebViewScroll={shouldEnableWebViewScroll}
+            />)}
+        </BottomSheet>
+      </View>
+    </>
+  );
+};

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.ts

@@ -0,0 +1,34 @@
+import type WebView from 'react-native-webview';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from './UNBottomSheetComponent.constants';
+
+export const getBottomSheetScript = () => {
+  return `
+    window.addEventListener("${UnitMessage.UNIT_REQUEST_REFRESH}", (e) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_REFRESH}", details:  e.detail  })
+    });
+  `;
+};
+
+export const renderingBottomSheetRequest = (currentWebView: WebView, renderingRequest: string) => {
+  currentWebView?.injectJavaScript(`
+    document.activeElement && document.activeElement.blur();
+    dispatchRenderingEvent('${renderingRequest}');
+  `);
+};
+
+export const resetHtml = (currentWebView: WebView) => {
+  currentWebView?.injectJavaScript(`
+    document.activeElement && document.activeElement.blur();
+    document.getElementById('webViewContainer').style.height = null;
+  `);
+};
+
+export const handleHtmlFullHeight = (currentWebView: WebView | null, windowHeight: number) => {
+  const bottomSheetHeight = windowHeight * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE;
+  currentWebView && currentWebView?.injectJavaScript(`
+    document.getElementById('webViewContainer').style.height = '${bottomSheetHeight}px';
+  `);
+
+  return bottomSheetHeight;
+};

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Dimensions, View } from 'react-native';
+import type WebView from 'react-native-webview';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import EventBus from '../../helpers/EventBus';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { useListenerToBus } from '../../hooks/listenerToBus';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { getCardParams, getCardScript, injectRefreshEventIfNeeded } from './UNCardComponent.utils';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { UNCardData } from '../../sharedTypes';
+import { CardMessage } from '../../messages/webMessages/cardMessage';
+
+export interface UNCardComponentProps {
+  cardId: string;
+  customerToken: string;
+  theme?: string;
+  onStatusChanged?: (card: UNCardData) => void;
+}
+
+export const UNCardComponent = (props: UNCardComponentProps) => {
+  const [height, setHeight] = useState(0);
+  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
+  const windowWidth = Dimensions.get('window').width;
+
+  const webRef = useRef<WebView>(null);
+
+  const cardStatusChanged = (card: UNCardData) => {
+    if (props.onStatusChanged) {
+      props.onStatusChanged(card);
+    }
+  };
+
+  const requestRefresh = (data: RequestRefreshEvent) => {
+    setRequestRefreshEvent(data);
+  };
+
+  useListenerToBus([
+    { busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged },
+    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
+  ]);
+
+  useEffect(() => {
+    injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent, props.cardId);
+  }, [requestRefreshEvent]);
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_REQUEST_RENDERING:
+        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, (message.details as RequestRenderingEvent).data);
+        break;
+      case PageMessage.PAGE_HEIGHT:
+        setHeight((message.details as HeightEvent).height);
+        break;
+    }
+  };
+
+  return (
+    <View style={{ height }}>
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.card}
+        presentationMode={PresentationMode.Default}
+        params={getCardParams(props)}
+        script={getCardScript()}
+        onMessage={message => handleMessage(message)}
+        width={windowWidth}
+        shouldEnableWebViewScroll={false}
+      />
+    </View>
+  );
+};

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -0,0 +1,28 @@
+import type WebView from 'react-native-webview';
+import type { UNCardComponentProps } from './UNCardComponent';
+import { WebComponentType } from '../../webComponent/WebComponent';
+import { RequestRefreshEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+
+export const getCardParams = (props: UNCardComponentProps) => {
+  return `
+    card-id="${props.cardId}"
+    customer-token="${props.customerToken}"
+    theme="${props.theme ?? UnitSDK.getTheme()}"
+  `;
+};
+
+export const getCardScript = () => {
+  return `
+    const dispatchRefreshEvent = (details) => {
+    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
+    window.dispatchEvent(event)
+    }
+  `;
+};
+
+export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null, cardId: string) => {
+  if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.card.valueOf()) && requestRefreshEvent.resourceId == cardId) {
+    currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
+  }
+};

package/src/components/index.ts

@@ -1,2 +1,4 @@
-export * from './Card/CardComponent'
-export * from './BottomSheet/BottomSheetComponent'
+export * from './UNCardComponent/UNCardComponent';
+export * from './UNBottomSheetComponent/UNBottomSheetComponent';
+export * from './UNBookPaymentComponent/UNBookPaymentComponent';
+export * from './UNActivityComponent/UNActivityComponent';

package/src/custom.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png' {
+  import { ImageSourcePropType } from 'react-native';
+  const content: ImageSourcePropType;
+  export default content;
+}

package/src/helpers/BottomSheet/BottomSheet.styles.ts

@@ -0,0 +1,70 @@
+import { Dimensions, StyleSheet } from 'react-native';
+import { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { VARIABLES } from '../../styles/variables';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getStylesObject = (fadeAnim: any) => {
+  return StyleSheet.create({
+    outsideContainer: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0
+    },
+    animation: {
+      backgroundColor: 'black',
+      flex: 1,
+      opacity: fadeAnim,
+    },
+    container: {
+      position: 'relative',
+      flex: 1,
+      marginTop: Dimensions.get('window').height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE),
+      shadowColor: VARIABLES.COLORS.BLACK,
+      shadowOffset: {
+        width: 0,
+        height: 6,
+      },
+      shadowOpacity: 0.37,
+      shadowRadius: 7.49,
+      elevation: 12,
+      borderTopLeftRadius: 15,
+      borderTopRightRadius: 15,
+      backgroundColor: VARIABLES.COLORS.WHITE,
+      overflow: 'hidden'
+    },
+    lineContainer: {
+      borderTopLeftRadius: 30,
+      borderTopRightRadius: 30,
+      alignItems: 'center'
+    },
+    line: {
+      width: 35,
+      height: 4,
+      borderRadius: 2,
+      marginTop: 18,
+      backgroundColor: VARIABLES.COLORS.SILVER_FLAKE,
+    },
+    outerContent: {
+      flex: -1,
+    },
+    innerContent: {
+      flex: -1,
+    },
+    closeButton: {
+      position: 'absolute',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 36,
+      height: 36,
+      backgroundColor: VARIABLES.COLORS.WHITE,
+      borderRadius: 18,
+      padding: 7,
+      top: 12,
+      right: 12,
+      zIndex: 100
+    }
+  });
+};

package/src/helpers/{BottomSheet.tsx → BottomSheet/BottomSheet.tsx}

@@ -4,14 +4,17 @@ import {
   BackHandler,
   Dimensions,
   Easing,
-  // Keyboard,
+  Image,
+  KeyboardAvoidingView,
   LayoutChangeEvent,
   PanResponder,
-  StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
 import PropTypes from 'prop-types';
+import { CloseIcon } from '../../assets/images';
+import { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { getStylesObject } from './BottomSheet.styles';
 
 export interface BottomSheetProps {
   isOpen: boolean
@@ -19,6 +22,7 @@ export interface BottomSheetProps {
   sliderMaxHeight: number
   onOpen: () => void
   onClose: () => void
+  height: number,
   animationDuration: number,
   expandToMaxHeightEnabled: boolean
 }
@@ -26,62 +30,64 @@ export interface BottomSheetProps {
 const BottomSheet = (props: BottomSheetProps) => {
   const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;
   const fadeAnim = useRef(new Animated.Value(0)).current;
+  const styles = getStylesObject(fadeAnim);
+  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
 
-  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen)
-  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined)
+  const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight);
 
-  const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight)
-
-  const [dy, setDy] = useState(0)
+  const [dy, setDy] = useState(0);
 
   const _parentPanResponder = PanResponder.create({
-    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
-      return Math.abs(gestureState.dy) > 10
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onMoveShouldSetPanResponderCapture: (_,) => { //gestureState) => {
+      return false;
+      // 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)
+      if (currentHeight + gestureState.dy < 0) return;
+      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;
+      panelHeightValue.setValue(currentHeight + gestureState.dy);
+      setDy(gestureState.dy);
     },
     onPanResponderRelease: () => {
       if (dy > 0) {
-        collapse()
+        collapse();
       } else if (!props.expandToMaxHeightEnabled) {
-        setToContentHeight(contentHeight!)
+        contentHeight && setToContentHeight(contentHeight);
       } else if (dy < 0) {
-        expand()
+        expand();
       } else {
-        expand()
+        expand();
       }
     }
   });
 
   useEffect(() => {
     if (props.isOpen && !isPanelOpened) {
-      fadeIn()
+      fadeIn();
     } else if (isPanelOpened) {
-      setContentHeight(0)
-      _dismiss()
+      setContentHeight(0);
+      _dismiss();
     }
-  }, [props.isOpen])
+  }, [props.isOpen]);
 
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', _onBackPress);
-    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value))
+    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value));
 
     return (() => {
       BackHandler.removeEventListener('hardwareBackPress', _onBackPress);
-      panelHeightValue.removeListener(id)
-    })
-  }, [])
+      panelHeightValue.removeListener(id);
+    });
+  }, []);
 
   const fadeIn = () => {
     Animated.timing(fadeAnim, {
       toValue: 0.3,
       duration: 500,
       useNativeDriver: false
-    }).start(() => { setIsPanelOpened(true) });
+    }).start(() => { setIsPanelOpened(true); });
   };
 
   const fadeOut = () => {
@@ -90,8 +96,8 @@ const BottomSheet = (props: BottomSheetProps) => {
       duration: 500,
       useNativeDriver: false
     }).start(() => {
-      setIsPanelOpened(false)
-      props.onClose()
+      setIsPanelOpened(false);
+      props.onClose();
     });
   };
 
@@ -99,17 +105,17 @@ const BottomSheet = (props: BottomSheetProps) => {
     Animated.timing(panelHeightValue, {
       duration: props.animationDuration,
       easing: Easing.quad,
-      toValue: sliderMaxHeight - contentHeight!,
+      toValue: sliderMaxHeight - contentHeight,
       useNativeDriver: false,
-    }).start()
-  }
+    }).start();
+  };
 
   const expand = () => {
     const { animationDuration } = props;
 
-    if (currentHeight > (sliderMaxHeight - contentHeight!)) {
-      setToContentHeight(contentHeight!)
-      return
+    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
+      setToContentHeight(contentHeight);
+      return;
     }
 
     Animated.timing(panelHeightValue, {
@@ -117,32 +123,16 @@ const BottomSheet = (props: BottomSheetProps) => {
       easing: Easing.quad,
       toValue: 0,
       useNativeDriver: false,
-    }).start()
-  }
+    }).start();
+  };
 
   const collapse = () => {
-    if (currentHeight > (sliderMaxHeight - contentHeight!)) {
-      _dismiss()
-      return
+    if (contentHeight && 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();
-    //   }
-    // });
+    contentHeight && setToContentHeight(contentHeight);
   };
 
   const _onBackPress = () => {
@@ -151,24 +141,24 @@ const BottomSheet = (props: BottomSheetProps) => {
   };
 
   const _setSize = (e: LayoutChangeEvent) => {
-    let newContentHeight = e.nativeEvent.layout.height
-    if (newContentHeight !== 0) newContentHeight += 42;
+    const newContentHeight = e.nativeEvent.layout.height;
 
-    setContentHeight(newContentHeight)
-    setToContentHeight(newContentHeight)
+    setContentHeight(newContentHeight);
+    setToContentHeight(newContentHeight);
   };
 
   const _dismiss = () => {
-    const { animationDuration } = props
+    const { animationDuration } = props;
     Animated.timing(panelHeightValue, {
       duration: animationDuration,
       easing: Easing.quad,
       toValue: sliderMaxHeight,
       useNativeDriver: false,
     }).start(() => {
-    })
-    fadeOut()
-  }
+      null;
+    });
+    fadeOut();
+  };
 
   const {
     sliderMaxHeight,
@@ -178,11 +168,11 @@ const BottomSheet = (props: BottomSheetProps) => {
   return (
     <>
       <TouchableOpacity
-        style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }} activeOpacity={1}
+        style={styles.outsideContainer} activeOpacity={1}
         onPress={_dismiss}
       >
         <Animated.View
-          style={{ backgroundColor: 'black', flex: 1, opacity: fadeAnim }}
+          style={styles.animation}
         >
         </Animated.View>
       </TouchableOpacity>
@@ -199,22 +189,31 @@ const BottomSheet = (props: BottomSheetProps) => {
         <View
           style={styles.outerContent}
         >
-          <TouchableOpacity activeOpacity={1}>
-            <View style={styles.lineContainer}>
-              <View style={styles.line} />
-            </View>
+          <TouchableOpacity
+            activeOpacity={1}
+            style={styles.closeButton}
+            onPress={_dismiss}
+          >
+            <Image source={CloseIcon} />
           </TouchableOpacity>
+
           <View
             onLayout={_setSize}
             style={[styles.innerContent]}
           >
-            {children}
+            <KeyboardAvoidingView
+              behavior="padding"
+              style={{ height: props.height }}
+              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE)}
+            >
+              {children}
+            </KeyboardAvoidingView>
           </View>
         </View>
       </Animated.View>
     </>
   );
-}
+};
 
 BottomSheet.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node]),
@@ -230,48 +229,11 @@ BottomSheet.propTypes = {
 BottomSheet.defaultProps = {
   children: <View />,
   isOpen: true,
-  sliderMaxHeight: Dimensions.get('window').height * 0.95,
+  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE,
   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;