diff --git a/examples/components/Panel/Panel.tsx b/examples/components/Panel/Panel.tsx index 79dbe9e..0c51409 100644 --- a/examples/components/Panel/Panel.tsx +++ b/examples/components/Panel/Panel.tsx @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import { Animated, Dimensions, @@ -7,16 +7,17 @@ import { StyleSheet, TouchableHighlight, TouchableWithoutFeedback, - View, + View } from 'react-native'; -import {Bar} from './Bar'; -import {Close} from './Close'; +import { Bar } from './Bar'; +import { Close } from './Close'; let NOTCH_PREVENTION = 14; +let TOP_EXTRA_SPACE = 100 + NOTCH_PREVENTION; let FULL_HEIGHT = Dimensions.get('window').height - NOTCH_PREVENTION; let FULL_WIDTH = Dimensions.get('window').width; -let PANEL_HEIGHT = FULL_HEIGHT - NOTCH_PREVENTION; +let PANEL_HEIGHT = FULL_HEIGHT - TOP_EXTRA_SPACE; const STATUS = { CLOSED: 0, @@ -150,7 +151,7 @@ class SwipeablePanel extends Component< const dimesions = Dimensions.get('screen'); FULL_HEIGHT = dimesions.height; FULL_WIDTH = dimesions.width; - PANEL_HEIGHT = FULL_HEIGHT - 100; + PANEL_HEIGHT = FULL_HEIGHT - TOP_EXTRA_SPACE; this.setState({ orientation: @@ -324,7 +325,7 @@ const SwipeablePanelStyles = StyleSheet.create({ position: 'absolute', height: PANEL_HEIGHT, width: FULL_WIDTH - 50, - transform: [{translateY: FULL_HEIGHT - 100}], + transform: [{translateY: FULL_HEIGHT - TOP_EXTRA_SPACE}], display: 'flex', flexDirection: 'column', backgroundColor: 'white', diff --git a/src/Panel.tsx b/src/Panel.tsx index c16db97..146e571 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -7,16 +7,17 @@ import { StyleSheet, TouchableHighlight, TouchableWithoutFeedback, - View, + View } from 'react-native'; import { Bar } from './Bar'; import { Close } from './Close'; let NOTCH_PREVENTION = 14; +let TOP_EXTRA_SPACE = 100 + NOTCH_PREVENTION; let FULL_HEIGHT = Dimensions.get('window').height - NOTCH_PREVENTION; let FULL_WIDTH = Dimensions.get('window').width; -let PANEL_HEIGHT = FULL_HEIGHT - NOTCH_PREVENTION; +let PANEL_HEIGHT = FULL_HEIGHT - TOP_EXTRA_SPACE; const STATUS = { CLOSED: 0, @@ -134,7 +135,7 @@ class SwipeablePanel extends React.Component= dimesions.width ? 'portrait' : 'landscape', @@ -286,7 +287,7 @@ const SwipeablePanelStyles = StyleSheet.create({ position: 'absolute', height: PANEL_HEIGHT, width: FULL_WIDTH - 50, - transform: [{ translateY: FULL_HEIGHT - 100 }], + transform: [{ translateY: FULL_HEIGHT - TOP_EXTRA_SPACE }], display: 'flex', flexDirection: 'column', backgroundColor: 'white',