feat: ability to set containerStyle for Notification component

seniv · Feb 18, 2021 · c8f4ec1 · c8f4ec1
1 parent dabab93
commit c8f4ec1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -173,6 +173,7 @@ componentProps.titleStyle          | TextStyle  | null         | The style to us
 componentProps.descriptionStyle    | TextStyle  | null         | The style to use for rendering description.
 componentProps.imageSource         | Object     | null         | Passed to `<Image />` as `source` param.
 componentProps.imageStyle          | ImageStyle | null         | The style to use for rendering image.
+componentProps.containerStyle      | ViewStyle  | null         | The style to use for notification container.
 componentProps.ContainerComponent  | Component  | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard
 componentProps.maxTitleLines       | number     | null         | The maximum number of lines to use for rendering title.
 componentProps.maxDescriptionLines | number     | null         | The maximum number of lines to use for rendering description.

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -120,6 +120,26 @@ export default function App() {
               })
             }
           />
+          <Button
+            title="Styled Notification"
+            onPress={() =>
+              notifierRef.current?.showNotification({
+                title: 'Styled Notification',
+                description: 'Background should be green and title is white!',
+                componentProps: {
+                  containerStyle: {
+                    backgroundColor: 'green',
+                  },
+                  titleStyle: {
+                    color: 'white',
+                  },
+                  descriptionStyle: {
+                    color: '#fafafa',
+                  },
+                },
+              })
+            }
+          />
           <Button title="Hide" onPress={() => Notifier.hideNotification()} />
           <Button title="Open react-native-modal" onPress={() => setModalVisible(true)} />
           {isAndroid && (

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, Text, TextStyle } from 'react-native';
+import { StyleSheet, View, Text, TextStyle, StyleProp } from 'react-native';
 
 import SafeContainer from './SafeContainer';
 
@@ -58,11 +58,11 @@ export interface AlertComponentProps {
 
   /** The style to use for rendering title
    * @default null */
-  titleStyle?: TextStyle;
+  titleStyle?: StyleProp<TextStyle>;
 
   /** The style to use for rendering description
    * @default null */
-  descriptionStyle?: TextStyle;
+  descriptionStyle?: StyleProp<TextStyle>;
 }
 
 interface AlertComponentAllProps extends AlertComponentProps {

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
@@ -7,6 +7,8 @@ import {
   Image,
   TextStyle,
   ImageStyle,
+  ViewStyle,
+  StyleProp,
 } from 'react-native';
 
 import SafeContainer from './SafeContainer';
@@ -75,15 +77,20 @@ export interface NotificationComponentProps {
 
   /** The style to use for rendering title
    * @default null */
-  titleStyle?: TextStyle;
+  titleStyle?: StyleProp<TextStyle>;
 
   /** The style to use for rendering description
    * @default null */
-  descriptionStyle?: TextStyle;
+  descriptionStyle?: StyleProp<TextStyle>;
+
+  /** The style to use for notification container.
+   * Might be useful to change background color, shadows, paddings or margins
+   * @default null */
+  containerStyle?: StyleProp<ViewStyle>;
 
   /** The style to use for rendering image
    * @default null */
-  imageStyle?: ImageStyle;
+  imageStyle?: StyleProp<ImageStyle>;
 }
 
 interface NotificationComponentAllProps extends NotificationComponentProps {
@@ -101,11 +108,12 @@ const NotificationComponent: React.FunctionComponent<NotificationComponentAllPro
   ContainerComponent,
   maxTitleLines,
   maxDescriptionLines,
+  containerStyle,
 }) => {
   const Container = ContainerComponent ?? SafeContainer;
   return (
     <Container>
-      <View style={s.container}>
+      <View style={[s.container, containerStyle]}>
         {!!imageSource && <Image style={[s.image, imageStyle]} source={imageSource} />}
         <View style={s.content}>
           {!!title && (