From eb2d60866d84828a3ba69f21d9b5af83a447ce18 Mon Sep 17 00:00:00 2001
From: Nick Ovsiannikov <nick.ovsiannikov@gmail.com>
Date: Mon, 22 Jan 2018 15:41:26 -0500
Subject: [PATCH 1/2] alignment prop
---
lib/ToastContainer.js | 20 ++++++++++++++++----
1 file changed, 16 insertions(+), 4 deletions(-)
diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js
index ff0356c..22ebd5e 100644
--- a/lib/ToastContainer.js
+++ b/lib/ToastContainer.js
@@ -47,7 +47,7 @@ let styles = StyleSheet.create({
backgroundColor: '#000',
opacity: 0.8,
borderRadius: 5,
- marginHorizontal: WINDOW_WIDTH * ((1 - TOAST_MAX_WIDTH) / 2)
+ marginHorizontal: 10,
},
shadowStyle: {
shadowColor: '#000',
@@ -87,7 +87,8 @@ class ToastContainer extends Component {
onHide: PropTypes.func,
onHidden: PropTypes.func,
onShow: PropTypes.func,
- onShown: PropTypes.func
+ onShown: PropTypes.func,
+ alignment: PropTypes.oneOf(['left', 'center', 'right']),
};
static defaultProps = {
@@ -98,7 +99,8 @@ class ToastContainer extends Component {
position: positions.BOTTOM,
opacity: 0.8,
delay: 0,
- hideOnPress: true
+ hideOnPress: true,
+ alignment: 'center',
};
constructor() {
@@ -189,17 +191,27 @@ class ToastContainer extends Component {
render() {
let {props} = this;
let offset = props.position;
+ const { alignment } = props;
let position = offset ? {
[offset < 0 ? 'bottom' : 'top']: offset < 0 ? (KEYBOARD_HEIGHT - offset) : offset
} : {
top: 0,
bottom: KEYBOARD_HEIGHT
};
+ const alignmentMap = {
+ center: 'center',
+ left: 'flex-start',
+ right: 'flex-end',
+ }
+ const alignItems = {
+ alignItems: alignmentMap[alignment],
+ }
return (this.state.visible || this._animating) ? <View
style={[
styles.defaultStyle,
- position
+ position,
+ alignItems,
]}
pointerEvents="box-none"
>
From a5839b3253b920afc10a649707e33d76d5e69d83 Mon Sep 17 00:00:00 2001
From: Nick Ovsiannikov <nick.ovsiannikov@gmail.com>
Date: Tue, 23 Jan 2018 16:29:31 -0500
Subject: [PATCH 2/2] use alignments static
---
lib/Toast.js | 3 ++-
lib/ToastContainer.js | 21 +++++++++++----------
2 files changed, 13 insertions(+), 11 deletions(-)
diff --git a/lib/Toast.js b/lib/Toast.js
index f765306..697d9f5 100644
--- a/lib/Toast.js
+++ b/lib/Toast.js
@@ -5,13 +5,14 @@ import {
View
} from 'react-native';
import RootSiblings from 'react-native-root-siblings';
-import ToastContainer, {positions, durations} from './ToastContainer';
+import ToastContainer, {positions, durations, alignments} from './ToastContainer';
class Toast extends Component {
static displayName = 'Toast';
static propTypes = ToastContainer.propTypes;
static positions = positions;
static durations = durations;
+ static alignments = alignments;
static show = (message, options = {position: positions.BOTTOM, duration: durations.SHORT}) => {
return new RootSiblings(<ToastContainer
diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js
index 22ebd5e..f68b8c5 100644
--- a/lib/ToastContainer.js
+++ b/lib/ToastContainer.js
@@ -23,16 +23,21 @@ Keyboard.addListener('keyboardDidChangeFrame', function ({ endCoordinates }) {
});
const WINDOW_WIDTH = DIMENSION.width;
+
const positions = {
TOP: 20,
BOTTOM: -20,
CENTER: 0
};
-
const durations = {
LONG: 3500,
SHORT: 2000
};
+const alignments = {
+ LEFT: 'flex-start',
+ CENTER: 'center',
+ RIGHT: 'flex-end',
+}
let styles = StyleSheet.create({
defaultStyle: {
@@ -88,7 +93,7 @@ class ToastContainer extends Component {
onHidden: PropTypes.func,
onShow: PropTypes.func,
onShown: PropTypes.func,
- alignment: PropTypes.oneOf(['left', 'center', 'right']),
+ alignment: PropTypes.oneOf([alignments.LEFT, alignments.CENTER, alignments.RIGHT]),
};
static defaultProps = {
@@ -100,7 +105,7 @@ class ToastContainer extends Component {
opacity: 0.8,
delay: 0,
hideOnPress: true,
- alignment: 'center',
+ alignment: alignments.CENTER,
};
constructor() {
@@ -198,13 +203,8 @@ class ToastContainer extends Component {
top: 0,
bottom: KEYBOARD_HEIGHT
};
- const alignmentMap = {
- center: 'center',
- left: 'flex-start',
- right: 'flex-end',
- }
const alignItems = {
- alignItems: alignmentMap[alignment],
+ alignItems: alignment,
}
return (this.state.visible || this._animating) ? <View
@@ -248,5 +248,6 @@ class ToastContainer extends Component {
export default ToastContainer;
export {
positions,
- durations
+ durations,
+ alignments
}