[RNMobile] - Tooltip for template selection buttons

packages/block-editor/src/components/page-template-picker/picker.native.js

@@ -4,10 +4,20 @@
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import Tooltip from './tooltip';
+
 /**
  * External dependencies
  */
-import { logUserEvent, userEvents } from 'react-native-gutenberg-bridge';
+import {
+	logUserEvent,
+	userEvents,
+	requestStarterPageTemplatesTooltipShown,
+	setStarterPageTemplatesTooltipShown,
+} from 'react-native-gutenberg-bridge';
 import { Animated, Dimensions, Keyboard } from 'react-native';
 
 /**
@@ -36,13 +46,16 @@ const __experimentalPageTemplatePicker = ( {
 
 	const [ templatePreview, setTemplatePreview ] = useState();
 	const [ pickerVisible, setPickerVisible ] = useState( visible );
+	const [ tooltipVisible, setTooltipVisible ] = useState( false );
 	const contentOpacity = useRef( new Animated.Value( 0 ) ).current;
 
 	useEffect( () => {
 		if ( shouldShowPicker() && visible && ! pickerVisible ) {
 			setPickerVisible( true );
 		}
+
 		startPickerAnimation( visible );
+		shouldShowTooltip();
 
 		Keyboard.addListener( 'keyboardDidShow', onKeyboardDidShow );
 		Keyboard.addListener( 'keyboardDidHide', onKeyboardDidHide );
@@ -53,6 +66,12 @@ const __experimentalPageTemplatePicker = ( {
 		};
 	}, [ visible ] );
 
+	useEffect( () => {
+		if ( tooltipVisible && templatePreview ) {
+			setTooltipVisible( false );
+		}
+	}, [ templatePreview ] );
+
 	const onKeyboardDidShow = () => {
 		if ( visible ) {
 			startPickerAnimation( shouldShowPicker() );
@@ -73,6 +92,15 @@ const __experimentalPageTemplatePicker = ( {
 		return PICKER_HEIGHT_OFFSET < windowHeight / 3;
 	};
 
+	const shouldShowTooltip = () => {
+		requestStarterPageTemplatesTooltipShown( ( tooltipShown ) => {
+			if ( ! tooltipShown ) {
+				setTooltipVisible( true );
+				setStarterPageTemplatesTooltipShown( true );
+			}
+		} );
+	};
+
 	const onApply = () => {
 		editPost( {
 			title: title || templatePreview.name,
@@ -84,6 +112,10 @@ const __experimentalPageTemplatePicker = ( {
 		setTemplatePreview( undefined );
 	};
 
+	const onTooltipHidden = () => {
+		setTooltipVisible( false );
+	};
+
 	const startPickerAnimation = ( isVisible ) => {
 		Animated.timing( contentOpacity, {
 			toValue: isVisible ? 1 : 0,
@@ -102,6 +134,9 @@ const __experimentalPageTemplatePicker = ( {
 
 	return (
 		<Animated.View style={ [ { opacity: contentOpacity } ] }>
+			{ tooltipVisible && (
+				<Tooltip onTooltipHidden={ onTooltipHidden } />
+			) }
 			<Container>
 				{ templates.map( ( template ) => (
 					<Button

packages/block-editor/src/components/page-template-picker/tooltip/index.native.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import {
+	Animated,
+	Easing,
+	Text,
+	TouchableWithoutFeedback,
+	View,
+	Dimensions,
+} from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const Tooltip = ( { onTooltipHidden } ) => {
+	const [ visible, setVisible ] = useState( true );
+	const animationValue = useRef( new Animated.Value( 0 ) ).current;
+
+	useEffect( () => {
+		startAnimation();
+	}, [ visible ] );
+
+	const onHide = () => {
+		setVisible( false );
+	};
+
+	const startAnimation = () => {
+		Animated.timing( animationValue, {
+			toValue: visible ? 1 : 0,
+			duration: visible ? 300 : 150,
+			useNativeDriver: true,
+			delay: visible ? 500 : 0,
+			easing: Easing.out( Easing.quad ),
+		} ).start( () => {
+			if ( ! visible && onTooltipHidden ) {
+				onTooltipHidden();
+			}
+		} );
+	};
+
+	const stylesOverlay = [
+		styles.overlay,
+		{ height: Dimensions.get( 'window' ).height },
+	];
+
+	return (
+		<>
+			<TouchableWithoutFeedback onPress={ onHide }>
+				<View style={ stylesOverlay } />
+			</TouchableWithoutFeedback>
+			<Animated.View
+				style={ {
+					opacity: animationValue,
+					transform: [
+						{
+							translateY: animationValue.interpolate( {
+								inputRange: [ 0, 1 ],
+								outputRange: [ visible ? 4 : -8, -8 ],
+							} ),
+						},
+					],
+				} }
+			>
+				<TouchableWithoutFeedback onPress={ onHide }>
+					<View
+						style={ [
+							styles.tooltip,
+							{
+								shadowColor: styles.tooltipShadow.color,
+								shadowOffset: {
+									width: 0,
+									height: 2,
+								},
+								shadowOpacity: 0.25,
+								shadowRadius: 2,
+								elevation: 2,
+							},
+						] }
+					>
+						<Text style={ styles.text }>
+							{ __( 'Try a starter layout' ) }
+						</Text>
+						<View style={ styles.arrow } />
+					</View>
+				</TouchableWithoutFeedback>
+			</Animated.View>
+		</>
+	);
+};
+
+export default Tooltip;

packages/block-editor/src/components/page-template-picker/tooltip/style.native.scss

@@ -0,0 +1,34 @@
+$tooltipColor: #121212;
+
+.overlay {
+	width: 100%;
+}
+
+.tooltip {
+	background-color: $tooltipColor;
+	border-radius: 4px;
+	left: 12px;
+	padding: 12px 16px;
+	position: absolute;
+	top: -36px;
+}
+
+.tooltipShadow {
+	color: $black;
+}
+
+.text {
+	color: $white;
+}
+
+.arrow {
+	z-index: 1;
+	position: absolute;
+	bottom: -5px;
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 6px 6px 0 6px;
+	left: 16px;
+	border-color: $tooltipColor transparent transparent transparent;
+}