feat: add new "translucentStatusBar" param

seniv · Aug 9, 2021 · be7498a · be7498a
1 parent 78ec6c2
commit be7498a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -108,6 +108,7 @@ hideOnPress           | Boolean    | true                          | Should noti
 swipePixelsToClose    | Number     | 20                            | How many pixels user should swipe-up notification to dismiss it
 swipeEasing           | Easing     | null                          | Animation easing after user finished swiping
 swipeAnimationDuration| Number     | 200                           | How fast should be animation after user finished swiping
+translucentStatusBar  | Boolean    | false                         | Add additional top padding that equals to `StatusBar.currentHeight`. Android Only.
 
 ### `hideNotification`
 

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -172,7 +172,7 @@ export default function App() {
           <Button title="Hide modal" onPress={() => setModalVisible(false)} />
         </View>
       </Modal>
-      <NotifierRoot ref={notifierRef} />
+      <NotifierRoot ref={notifierRef} translucentStatusBar={statusBarTranslucent} />
     </>
   );
 }

diff --git a/src/Notifier.styles.ts b/src/Notifier.styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet, Platform, StatusBar } from 'react-native';
 
 export default StyleSheet.create({
   container: {
@@ -12,4 +12,7 @@ export default StyleSheet.create({
     top: 0,
     left: 0,
   },
+  translucentStatusBarPadding: {
+    paddingTop: StatusBar.currentHeight ?? 0,
+  },
 });
diff --git a/src/Notifier.tsx b/src/Notifier.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
-import { Animated, View, TouchableWithoutFeedback, LayoutChangeEvent } from 'react-native';
+import {
+  Animated,
+  View,
+  TouchableWithoutFeedback,
+  LayoutChangeEvent,
+  Platform,
+} from 'react-native';
 import {
   PanGestureHandler,
   State,
   PanGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
-import s from './Notifier.styles';
+import styles from './Notifier.styles';
 import { Notification as NotificationComponent } from './components';
 import {
   DEFAULT_ANIMATION_DURATION,
@@ -138,14 +144,23 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
       return;
     }
 
-    const { title, description, swipeEnabled, Component, componentProps, ...restParams } = params;
+    const {
+      title,
+      description,
+      swipeEnabled,
+      Component,
+      componentProps,
+      translucentStatusBar,
+      ...restParams
+    } = params;
 
     this.setState({
       title,
       description,
       Component: Component ?? NotificationComponent,
       swipeEnabled: swipeEnabled ?? DEFAULT_SWIPE_ENABLED,
       componentProps: componentProps,
+      translucentStatusBar,
     });
 
     this.showParams = restParams;
@@ -241,7 +256,14 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
   }
 
   render() {
-    const { title, description, swipeEnabled, Component, componentProps } = this.state;
+    const {
+      title,
+      description,
+      swipeEnabled,
+      Component,
+      componentProps,
+      translucentStatusBar,
+    } = this.state;
 
     return (
       <PanGestureHandler
@@ -251,14 +273,21 @@ export class NotifierRoot extends React.PureComponent<ShowNotificationParams, St
       >
         <Animated.View
           style={[
-            s.container,
+            styles.container,
             {
               transform: [{ translateY: this.translateYInterpolated }],
             },
           ]}
         >
           <TouchableWithoutFeedback onPress={this.onPress}>
-            <View onLayout={this.onLayout}>
+            <View
+              onLayout={this.onLayout}
+              style={
+                Platform.OS === 'android' && translucentStatusBar
+                  ? styles.translucentStatusBarPadding
+                  : undefined
+              }
+            >
               <Component title={title} description={description} {...componentProps} />
             </View>
           </TouchableWithoutFeedback>

diff --git a/src/types.ts b/src/types.ts
@@ -87,6 +87,12 @@ export interface ShowNotificationParams<ComponentType extends ElementType = Elem
   /** Determines the order in which notifications are shown. Read more in the [Queue Mode](https://github.com/seniv/react-native-notifier#queue-mode) section.
    * @default 'reset' */
   queueMode?: QueueMode;
+
+  /** Add top padding that equals to `StatusBar.currentHeight` to correctly display notification when status bar is translucent. Android Only.
+   * @platform Android
+   * @default false
+   */
+  translucentStatusBar?: boolean;
 }
 
 export interface StateInterface {
@@ -95,6 +101,7 @@ export interface StateInterface {
   swipeEnabled: boolean;
   Component: ElementType;
   componentProps: Record<string, any>;
+  translucentStatusBar?: boolean;
 }
 
 export interface NotifierInterface {