Add horizontal margin

README.md

@@ -69,6 +69,7 @@ Shows a Snackbar, dismissing any existing Snackbar first. Accepts an object with
 | `duration` | See below | `Snackbar.LENGTH_SHORT` | How long to display the Snackbar. |
 | `numberOfLines` | `number` | `2` | The max number of text lines to allow before ellipsizing. |
 | `marginBottom` | `number` | `0` | Margin from bottom. |
+| `marginHorizotal` | `number` | `0` | Horizontal margins. |
 | `textColor` | `string` or `style` | `'white'` | The color of the message text. |
 | `backgroundColor` | `string` or `style` | `undefined` (dark gray) | The background color for the whole Snackbar. |
 | `fontFamily` | `string` | `undefined` | The basename of a `.ttf` font from `assets/fonts/` (see [setup guide](https://github.com/facebook/react-native/issues/25852) and [example app](/example), remember to `react-native link` after). |

android/src/main/java/com/azendoo/reactnativesnackbar/SnackbarModule.java

@@ -9,6 +9,7 @@
 import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.FrameLayout;
 import android.widget.TextView;
 
 import androidx.annotation.NonNull;
@@ -142,6 +143,7 @@ private void displaySnackbar(View view, ReadableMap options, final Callback call
         boolean textAlignCenter = getOptionValue(options, "textAlignCenter", false);
         boolean rtl = getOptionValue(options, "rtl", false);
         int marginBottom = getOptionValue(options, "marginBottom", 0);
+        int marginHorizontal = getOptionValue(options, "marginHorizontal", 0);
         String fontFamily = getOptionValue(options, "fontFamily", null);
         Typeface font = null;
         if (fontFamily != null) {
@@ -178,6 +180,16 @@ private void displaySnackbar(View view, ReadableMap options, final Callback call
             snackbarView.setTranslationY(-(convertDpToPixel(marginBottom, snackbarView.getContext())));
         }
 
+        if (marginHorizontal != 0) {
+            final FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) snackbarView.getLayoutParams();
+            int sideMargin = (int) convertDpToPixel(marginHorizontal, snackbarView.getContext());
+            params.setMargins(params.leftMargin + sideMargin,
+                    params.topMargin,
+                    params.rightMargin + sideMargin,
+                    params.bottomMargin);
+            snackbarView.setLayoutParams(params);
+        }
+
         TextView snackbarText = snackbarView.findViewById(com.google.android.material.R.id.snackbar_text);
         snackbarText.setMaxLines(numberOfLines);
         snackbarText.setTextColor(textColor);

ios/RNSnackBarView.m

@@ -32,6 +32,7 @@ @interface RNSnackBarView () {
 @property(nonatomic, strong) NSString *actionText;
 @property(nonatomic, strong) UIColor *actionTextColor;
 @property(nonatomic, strong) NSNumber *marginBottom;
+@property(nonatomic, strong) NSNumber *marginHorizontal;
 @property(nonatomic, strong) NSString *fontFamily;
 @property(nonatomic) BOOL isRTL;
 @property(nonatomic, strong) NSArray<NSLayoutConstraint *> *verticalPaddingConstraints;
@@ -225,10 +226,10 @@ - (void)presentWithDuration:(NSNumber *)duration {
                                                                       options:0
                                                                       metrics:nil
                                                                         views:@{@"self" : self}]];
-    [keyWindow addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[self]|"
-                                                                      options:0
-                                                                      metrics:nil
-                                                                        views:@{@"self" : self}]];
+    [keyWindow addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|-%@-[self]-%@-|", self.marginHorizontal, self.marginHorizontal]
+                                                                   options:0
+                                                                   metrics:nil
+                                                                     views:@{@"self" : self}]];
 
     // Snackbar will slide up from bottom, unless a bottom margin is set in which case we use a fade animation
     self.transform = CGAffineTransformMakeTranslation(0, [self.marginBottom integerValue] == 0 ? self.bounds.size.height : 0);
@@ -304,6 +305,7 @@ - (void)show {
     self.numberOfLines = [RCTConvert int:numberOfLines] ? [RCTConvert int:numberOfLines] : 2;
 
     self.marginBottom = _pendingOptions[@"marginBottom"] ? _pendingOptions[@"marginBottom"] : @(0);
+    self.marginHorizontal = _pendingOptions[@"marginHorizontal"] ? _pendingOptions[@"marginHorizontal"] : @(0);
 
     id backgroundColor = _pendingOptions[@"backgroundColor"];
     self.backgroundColor = backgroundColor ? [RCTConvert UIColor:backgroundColor]

src/index.d.ts

@@ -35,6 +35,11 @@ export interface SnackBarOptions {
    */
   numberOfLines?: number;
 
+  /**
+   * Align text center
+   */
+  textAlignCenter?: boolean;
+
   /**
    * Length of time the Snackbar stays on screen.
    * Must be one of Snackbar.LENGTH_SHORT, Snackbar.LENGTH_LONG, or Snackbar.LENGTH_INDEFINITE.
@@ -46,6 +51,11 @@ export interface SnackBarOptions {
    */
   marginBottom?: number;
 
+  /**
+   * Margin horizontal, defaults to 0.
+   */
+  marginHorizontal?: number;
+
   /**
    * Snackbar text color.
    * Accepts various forms of colors such as hex, literals, rgba, etc.
@@ -70,13 +80,13 @@ export interface SnackBarOptions {
 
   /**
    * Rtl the snackbar
-   * 
-   * [Android only, API 17+] Whether the Snackbar should render right-to-left 
+   *
+   * [Android only, API 17+] Whether the Snackbar should render right-to-left
    * @requires `android:supportsRtl="true"`
    * @see https://android-developers.googleblog.com/2013/03/native-rtl-support-in-android-42.html
    * @see https://github.com/MortezaHeydari97/react-native-snackbar/blob/main/example
    */
-  rtl?: boolean
+  rtl?: boolean;
 }
 
 /**

src/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { NativeModules, processColor } from 'react-native';
+import { NativeModules, processColor } from "react-native";
 
 /**
  * An optional, actionable button on the Snackbar.
@@ -54,6 +54,11 @@ type SnackBarOptions = {
    */
   marginBottom?: number,
 
+  /**
+   * Margin horizontal, defaults to 0.
+   */
+  marginHorizontal?: number,
+
   /**
    * Snackbar text color.
    * Accepts various forms of colors such as hex, literals, rgba, etc.
@@ -149,8 +154,8 @@ const SnackBar: ISnackBar = {
   SHOW_EVENT: NativeModules.RNSnackbar.SHOW_EVENT,
 
   show(options: SnackBarOptions) {
-    warnDeprecation(options, 'title', 'text');
-    warnDeprecation(options, 'color', 'textColor');
+    warnDeprecation(options, "title", "text");
+    warnDeprecation(options, "color", "textColor");
 
     const text = options.text || options.title;
     const { numberOfLines } = options;
@@ -160,19 +165,21 @@ const SnackBar: ISnackBar = {
     // eslint-disable-next-line no-param-reassign
     delete options.color;
     const textColor = textColorRaw && processColor(textColorRaw);
-    const backgroundColor = options.backgroundColor && processColor(options.backgroundColor);
+    const backgroundColor =
+      options.backgroundColor && processColor(options.backgroundColor);
     const textAlignCenter = options.textAlignCenter || false;
 
     const action = options.action || {};
 
-    warnDeprecation(action, 'title', 'text');
-    warnDeprecation(action, 'color', 'textColor');
+    warnDeprecation(action, "title", "text");
+    warnDeprecation(action, "color", "textColor");
 
     const actionText = action.text || action.title;
     delete action.title;
     const actionTextColorRaw = action.textColor || action.color;
     delete action.color;
-    const actionTextColor = actionTextColorRaw && processColor(actionTextColorRaw);
+    const actionTextColor =
+      actionTextColorRaw && processColor(actionTextColorRaw);
     const onPressCallback = action.onPress || (() => {});
 
     const nativeOptions = {
@@ -182,11 +189,13 @@ const SnackBar: ISnackBar = {
       numberOfLines,
       backgroundColor,
       textAlignCenter,
-      action: options.action ? {
-        ...action,
-        text: actionText,
-        textColor: actionTextColor,
-      } : undefined,
+      action: options.action
+        ? {
+            ...action,
+            text: actionText,
+            textColor: actionTextColor,
+          }
+        : undefined,
     };
 
     NativeModules.RNSnackbar.show(nativeOptions, onPressCallback);
@@ -199,7 +208,9 @@ const SnackBar: ISnackBar = {
 
 function warnDeprecation(options, deprecatedKey, newKey) {
   if (options && options[deprecatedKey]) {
-    console.warn(`The Snackbar '${deprecatedKey}' option has been deprecated. Please switch to '${newKey}' instead.`);
+    console.warn(
+      `The Snackbar '${deprecatedKey}' option has been deprecated. Please switch to '${newKey}' instead.`
+    );
   }
 }