From 9d5055ca2b41349a91fdb5e8084cd35ab6a17347 Mon Sep 17 00:00:00 2001 From: Chitrang Singhvi Date: Mon, 23 Jan 2017 20:10:28 +0530 Subject: [PATCH 1/9] animating when automatically close and changing message when toast is showing if message prop is updated --- lib/ToastContainer.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index cf8f653..8fed104 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -12,7 +12,7 @@ import { Easing } from 'react-native'; const TOAST_MAX_WIDTH = 0.8; -const TOAST_ANIMATION_DURATION = 200; +const TOAST_ANIMATION_DURATION = 300; const DIMENSION = Dimensions.get('window'); const WINDOW_WIDTH = DIMENSION.width; const positions = { @@ -122,9 +122,9 @@ class ToastContainer extends Component { this._hide(); }; - shouldComponentUpdate = (nextProps, nextState) => { - return this.state.visible !== nextState.visible; - }; + //shouldComponentUpdate = (nextProps, nextState) => { + // return this.state.visible !== nextState.visible; + //}; _animating = false; _root = null; @@ -160,6 +160,7 @@ class ToastContainer extends Component { clearTimeout(this._showTimeout); clearTimeout(this._hideTimeout); if (!this._animating) { + this._animating = true; this._root.setNativeProps({ pointerEvents: 'none' }); From c4672f6cc2c59f19d86ea0499ee9f81130beae3c Mon Sep 17 00:00:00 2001 From: Chitrang Singhvi Date: Mon, 23 Jan 2017 20:12:16 +0530 Subject: [PATCH 2/9] changing animation time to 200 --- lib/ToastContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index 8fed104..0c540ef 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -12,7 +12,7 @@ import { Easing } from 'react-native'; const TOAST_MAX_WIDTH = 0.8; -const TOAST_ANIMATION_DURATION = 300; +const TOAST_ANIMATION_DURATION = 200; const DIMENSION = Dimensions.get('window'); const WINDOW_WIDTH = DIMENSION.width; const positions = { From f6cc3886dc1c6deac3df0ae97b44d4668309b8f8 Mon Sep 17 00:00:00 2001 From: Chitrang Singhvi Date: Fri, 24 Mar 2017 14:21:26 +0530 Subject: [PATCH 3/9] support for screen rotation --- lib/ToastContainer.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index 0c540ef..d4bdaf2 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -14,7 +14,6 @@ import { const TOAST_MAX_WIDTH = 0.8; const TOAST_ANIMATION_DURATION = 200; const DIMENSION = Dimensions.get('window'); -const WINDOW_WIDTH = DIMENSION.width; const positions = { TOP: 20, BOTTOM: -20, @@ -29,7 +28,8 @@ const durations = { let styles = StyleSheet.create({ defaultStyle: { position: 'absolute', - width: WINDOW_WIDTH, + left: 0, + right: 0, justifyContent: 'center', alignItems: 'center' }, @@ -38,7 +38,6 @@ let styles = StyleSheet.create({ backgroundColor: '#000', opacity: 0.8, borderRadius: 5, - marginHorizontal: WINDOW_WIDTH * ((1 - TOAST_MAX_WIDTH) / 2) }, shadowStyle: { shadowColor: '#000', @@ -92,6 +91,7 @@ class ToastContainer extends Component { super(...arguments); this.state = { visible: this.props.visible, + window_width: DIMENSION.width, opacity: new Animated.Value(0) }; } @@ -126,6 +126,10 @@ class ToastContainer extends Component { // return this.state.visible !== nextState.visible; //}; + onLayout(nativeEvent){ + this.setState({window_width: nativeEvent.layout.width}); + } + _animating = false; _root = null; _hideTimeout = null; @@ -193,6 +197,7 @@ class ToastContainer extends Component { position ]} pointerEvents="box-none" + onLayout={(event) => this.onLayout(event.nativeEvent)} > Date: Fri, 24 Mar 2017 19:06:37 +0530 Subject: [PATCH 4/9] passing function ref directly for less re renders --- lib/ToastContainer.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index d4bdaf2..f2243a0 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -94,6 +94,7 @@ class ToastContainer extends Component { window_width: DIMENSION.width, opacity: new Animated.Value(0) }; + this.handleOnLayout = this.handleOnLayout.bind(this); } componentDidMount = () => { @@ -126,8 +127,8 @@ class ToastContainer extends Component { // return this.state.visible !== nextState.visible; //}; - onLayout(nativeEvent){ - this.setState({window_width: nativeEvent.layout.width}); + handleOnLayout(event){ + this.setState({window_width: event.nativeEvent.layout.width}); } _animating = false; @@ -197,7 +198,7 @@ class ToastContainer extends Component { position ]} pointerEvents="box-none" - onLayout={(event) => this.onLayout(event.nativeEvent)} + onLayout={this.handleOnLayout} > Date: Fri, 11 Aug 2017 13:26:59 +0530 Subject: [PATCH 5/9] solving a bug --- lib/ToastContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index 8673bee..83fa0ec 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -179,7 +179,7 @@ class ToastContainer extends Component { clearTimeout(this._hideTimeout); if (!this._animating) { this._animating = true; - this._root.setNativeProps({ + this._root && this._root.setNativeProps({ pointerEvents: 'none' }); this.props.onHide && this.props.onHide(this.props.siblingManager); From 6a202d046354d13a54a903c1cdf2c6a74b0743be Mon Sep 17 00:00:00 2001 From: Chitrang Singhvi Date: Thu, 24 Aug 2017 17:17:59 +0530 Subject: [PATCH 6/9] removed commented code --- lib/ToastContainer.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index 83fa0ec..47516c6 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -136,10 +136,6 @@ class ToastContainer extends Component { this._hide(); }; - //shouldComponentUpdate = (nextProps, nextState) => { - // return this.state.visible !== nextState.visible; - //}; - handleOnLayout(event){ this.setState({window_width: event.nativeEvent.layout.width}); } From 827b8874bf847767b859a6246af2c6245523b37b Mon Sep 17 00:00:00 2001 From: Chitrang Singhvi Date: Mon, 2 Apr 2018 15:40:03 +0530 Subject: [PATCH 7/9] fixed a bug --- lib/ToastContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index 47516c6..d593771 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -133,7 +133,7 @@ class ToastContainer extends Component { }; componentWillUnmount = () => { - this._hide(); + this._root && this._hide(); }; handleOnLayout(event){ From 8b3c6e698b9fecd0633ade013681f6f688d861a6 Mon Sep 17 00:00:00 2001 From: Amit Chaudhary Date: Tue, 7 Aug 2018 15:09:11 +0530 Subject: [PATCH 8/9] code in sync with main repo --- lib/ToastContainer.js | 64 ++++++++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index d593771..a661d5c 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -15,13 +15,6 @@ import { } from 'react-native'; const TOAST_MAX_WIDTH = 0.8; const TOAST_ANIMATION_DURATION = 200; -const DIMENSION = Dimensions.get('window'); -let KEYBOARD_HEIGHT = 0; - -Keyboard.addListener('keyboardDidChangeFrame', function ({ endCoordinates }) { - KEYBOARD_HEIGHT = DIMENSION.height - endCoordinates.screenY; -}); - const positions = { TOP: 20, @@ -46,7 +39,7 @@ let styles = StyleSheet.create({ padding: 10, backgroundColor: '#000', opacity: 0.8, - borderRadius: 5, + borderRadius: 5 }, shadowStyle: { shadowColor: '#000', @@ -102,12 +95,19 @@ class ToastContainer extends Component { constructor() { super(...arguments); + const window = Dimensions.get('window'); this.state = { visible: this.props.visible, - window_width: DIMENSION.width, - opacity: new Animated.Value(0) + opacity: new Animated.Value(0), + windowWidth: window.width, + windowHeight: window.height, + keyboardScreenY: window.height }; - this.handleOnLayout = this.handleOnLayout.bind(this); + } + + componentWillMount() { + Dimensions.addEventListener('change', this._windowChanged); + Keyboard.addListener('keyboardDidChangeFrame', this._keyboardDidChangeFrame); } componentDidMount = () => { @@ -123,7 +123,7 @@ class ToastContainer extends Component { clearTimeout(this._hideTimeout); this._showTimeout = setTimeout(() => this._show(), this.props.delay); } else { - this._root && this._hide(); + this._hide(); } this.setState({ @@ -132,18 +132,35 @@ class ToastContainer extends Component { } }; + componentWillUpdate() { + const { windowHeight, keyboardScreenY } = this.state; + this._keyboardHeight = Math.max(windowHeight - keyboardScreenY, 0); + } + componentWillUnmount = () => { - this._root && this._hide(); + Dimensions.removeEventListener('change', this._windowChanged); + Keyboard.removeListener('keyboardDidChangeFrame', this._keyboardDidChangeFrame); + this._hide(); }; - handleOnLayout(event){ - this.setState({window_width: event.nativeEvent.layout.width}); - } - _animating = false; _root = null; _hideTimeout = null; _showTimeout = null; + _keyboardHeight = 0; + + _windowChanged = ({ window }) => { + this.setState({ + windowWidth: window.width, + windowHeight: window.height + }) + }; + + _keyboardDidChangeFrame = ({ endCoordinates }) => { + this.setState({ + keyboardScreenY: endCoordinates.screenY + }) + }; _show = () => { clearTimeout(this._showTimeout); @@ -174,8 +191,7 @@ class ToastContainer extends Component { clearTimeout(this._showTimeout); clearTimeout(this._hideTimeout); if (!this._animating) { - this._animating = true; - this._root && this._root.setNativeProps({ + this._root.setNativeProps({ pointerEvents: 'none' }); this.props.onHide && this.props.onHide(this.props.siblingManager); @@ -194,12 +210,13 @@ class ToastContainer extends Component { render() { let {props} = this; + const { windowWidth } = this.state; let offset = props.position; let position = offset ? { - [offset < 0 ? 'bottom' : 'top']: offset < 0 ? (KEYBOARD_HEIGHT - offset) : offset + [offset < 0 ? 'bottom' : 'top']: offset < 0 ? (this._keyboardHeight - offset) : offset } : { top: 0, - bottom: KEYBOARD_HEIGHT + bottom: this._keyboardHeight }; return (this.state.visible || this._animating) ? Date: Tue, 7 Aug 2018 15:20:52 +0530 Subject: [PATCH 9/9] updated for onPress callback --- lib/ToastContainer.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/ToastContainer.js b/lib/ToastContainer.js index a661d5c..5cfc3be 100644 --- a/lib/ToastContainer.js +++ b/lib/ToastContainer.js @@ -76,6 +76,7 @@ class ToastContainer extends Component { textStyle: Text.propTypes.style, delay: PropTypes.number, hideOnPress: PropTypes.bool, + onPress: PropTypes.func, onHide: PropTypes.func, onHidden: PropTypes.func, onShow: PropTypes.func, @@ -208,6 +209,11 @@ class ToastContainer extends Component { } }; + _hideOnPress = () => { + this.props.onPress && this.props.onPress(); + this._hide(); + } + render() { let {props} = this; const { windowWidth } = this.state; @@ -227,7 +233,7 @@ class ToastContainer extends Component { pointerEvents="box-none" >