diff --git a/README.md b/README.md index dce9931..b471c56 100644 --- a/README.md +++ b/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). | diff --git a/android/src/main/java/com/azendoo/reactnativesnackbar/SnackbarModule.java b/android/src/main/java/com/azendoo/reactnativesnackbar/SnackbarModule.java index a297652..85fc149 100644 --- a/android/src/main/java/com/azendoo/reactnativesnackbar/SnackbarModule.java +++ b/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); diff --git a/ios/RNSnackBarView.m b/ios/RNSnackBarView.m index ab692f8..2d3b8a2 100644 --- a/ios/RNSnackBarView.m +++ b/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 *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] diff --git a/src/index.d.ts b/src/index.d.ts index a54b7fc..2ecb3d2 100644 --- a/src/index.d.ts +++ b/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; } /** diff --git a/src/index.js b/src/index.js index 88b782f..dd6ab4e 100644 --- a/src/index.js +++ b/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.` + ); } }