Mobile - Notice list - Code improvements and bug fixes

packages/components/src/notice/index.native.js

@@ -7,73 +7,63 @@ import {
 	Text,
 	TouchableWithoutFeedback,
 	View,
-	Dimensions,
-	Platform,
+	useWindowDimensions,
 } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-const Notice = ( { onNoticeHidden, content, id, status } ) => {
-	const [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );
-	const [ visible, setVisible ] = useState( true );
+const HIDE_TIMER = 3000;
 
+const Notice = ( { onNoticeHidden, content, id, status } ) => {
+	const { width } = useWindowDimensions();
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const timer = useRef( null );
-	const isIOS = Platform.OS === 'ios';
-
-	const onDimensionsChange = () => {
-		setWidth( Dimensions.get( 'window' ).width );
-	};
-
-	useEffect( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onDimensionsChange
-		);
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
 
 	useEffect( () => {
 		startAnimation();
+
 		return () => {
 			clearTimeout( timer?.current );
 		};
-	}, [ visible, id ] );
+	}, [] );
 
-	const onHide = () => {
-		setVisible( false );
-	};
+	function onHide() {
+		Animated.timing( animationValue, {
+			toValue: 0,
+			duration: 150,
+			useNativeDriver: true,
+			easing: Easing.out( Easing.quad ),
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
+				onNoticeHidden( id );
+			}
+		} );
+	}
 
-	const startAnimation = () => {
+	function startAnimation() {
 		Animated.timing( animationValue, {
-			toValue: visible ? 1 : 0,
-			duration: visible ? 300 : 150,
+			toValue: 1,
+			duration: 300,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
-		} ).start( () => {
-			if ( visible && onNoticeHidden ) {
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
 				timer.current = setTimeout( () => {
 					onHide();
-				}, 3000 );
-			}
-
-			if ( ! visible && onNoticeHidden ) {
-				onNoticeHidden( id );
+				}, HIDE_TIMER );
 			}
 		} );
-	};
+	}
 
 	const noticeSolidStyles = usePreferredColorSchemeStyle(
 		styles.noticeSolid,
@@ -95,33 +85,33 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 		status === 'error' && errorTextStyles,
 	];
 
+	const containerStyles = [
+		styles.notice,
+		! Platform.isIOS && noticeSolidStyles,
+		{
+			width,
+			transform: [
+				{
+					translateY: animationValue.interpolate( {
+						inputRange: [ 0, 1 ],
+						outputRange: [ -24, 0 ],
+					} ),
+				},
+			],
+		},
+	];
+
 	return (
 		<>
-			<Animated.View
-				style={ [
-					styles.notice,
-					! isIOS && noticeSolidStyles,
-					{
-						width,
-						transform: [
-							{
-								translateY: animationValue.interpolate( {
-									inputRange: [ 0, 1 ],
-									outputRange: [ -24, 0 ],
-								} ),
-							},
-						],
-					},
-				] }
-			>
+			<Animated.View style={ containerStyles }>
 				<TouchableWithoutFeedback onPress={ onHide }>
 					<View style={ styles.noticeContent }>
 						<Text numberOfLines={ 3 } style={ textStyles }>
 							{ content }
 						</Text>
 					</View>
 				</TouchableWithoutFeedback>
-				{ isIOS && (
+				{ Platform.isIOS && (
 					<BlurView
 						style={ styles.blurBackground }
 						blurType="prominent"

packages/components/src/notice/list.native.js

@@ -6,70 +6,46 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import Notice from './';
 import styles from './style.scss';
 
-class NoticeList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.removeNotice = this.removeNotice.bind( this );
-	}
+function NoticeList() {
+	const { notices } = useSelect( ( select ) => {
+		const { getNotices } = select( noticesStore );
+		return {
+			notices: getNotices(),
+		};
+	}, [] );
 
-	removeNotice( id ) {
-		const { removeNotice } = this.props;
+	const { removeNotice } = useDispatch( noticesStore );
+
+	function onRemoveNotice( id ) {
 		removeNotice( id );
 	}
 
-	render() {
-		const { notices, shouldStack } = this.props;
-
-		if ( ! notices.length ) {
-			return null;
-		}
+	if ( ! notices.length ) {
+		return null;
+	}
 
-		return (
-			<View style={ styles.list } key={ notices.length }>
-				{ shouldStack ? (
-					notices
-						.reverse()
-						.map( ( notice ) => (
-							<Notice
-								{ ...notice }
-								key={ notice.id }
-								onNoticeHidden={ this.removeNotice }
-							></Notice>
-						) )
-				) : (
+	return (
+		<View style={ styles.list }>
+			{ notices.map( ( notice ) => {
+				return (
 					<Notice
-						{ ...notices[ notices.length - 1 ] }
-						onNoticeHidden={ this.removeNotice }
+						{ ...notice }
+						key={ notice.id }
+						onNoticeHidden={ onRemoveNotice }
 					></Notice>
-				) }
-			</View>
-		);
-	}
+				);
+			} ) }
+		</View>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getNotices } = select( 'core/notices' );
-
-		return {
-			notices: getNotices(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { removeNotice } = dispatch( 'core/notices' );
-
-		return {
-			removeNotice,
-		};
-	} ),
-] )( NoticeList );
+export default NoticeList;

packages/components/src/notice/style.native.scss

@@ -33,6 +33,7 @@
 
 .notice {
 	justify-content: center;
+	position: absolute;
 }
 
 .noticeContent {