Add tooltip to rotate image button and zoom slider

src/components/AvatarCropModal/AvatarCropModal.js

@@ -30,6 +30,7 @@ import Slider from './Slider';
 import cropOrRotateImage from '../../libs/cropOrRotateImage';
 import HeaderGap from '../HeaderGap';
 import * as StyleUtils from '../../styles/StyleUtils';
+import Tooltip from '../Tooltip';
 
 const propTypes = {
     /** Link to image for cropping */
@@ -398,14 +399,16 @@ const AvatarCropModal = (props) => {
                                 >
                                     <Slider sliderValue={translateSlider} onGesture={panSliderGestureEventHandler} />
                                 </Pressable>
-                                <Button
-                                    medium
-                                    icon={Expensicons.Rotate}
-                                    iconFill={themeColors.inverse}
-                                    iconStyles={[styles.mr0]}
-                                    style={[styles.imageCropRotateButton]}
-                                    onPress={rotateImage}
-                                />
+                                <Tooltip text={props.translate('avatarCropModal.rotateImage')} shiftVertical={-2}>
+                                    <Button
+                                        medium
+                                        icon={Expensicons.Rotate}
+                                        iconFill={themeColors.inverse}
+                                        iconStyles={[styles.mr0]}
+                                        style={[styles.imageCropRotateButton]}
+                                        onPress={rotateImage}
+                                    />
+                                </Tooltip>
                             </View>
                         </>
                     )}

src/components/AvatarCropModal/Slider.js

@@ -1,18 +1,22 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {PanGestureHandler} from 'react-native-gesture-handler';
 import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import styles from '../../styles/styles';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 import ControlSelection from '../../libs/ControlSelection';
+import Tooltip from '../Tooltip';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 
 const propTypes = {
     /** React-native-reanimated lib handler which executes when the user is panning slider */
     onGesture: gestureHandlerPropTypes,
 
     /** X position of the slider knob */
     sliderValue: PropTypes.shape({value: PropTypes.number}),
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -22,6 +26,8 @@ const defaultProps = {
 
 // This component can't be written using class since reanimated API uses hooks.
 const Slider = (props) => {
+    const [tooltipIsVisible, setTooltipIsVisible] = useState(true);
+
     // A reanimated memoized style, which tracks
     // a translateX shared value and updates the slider position.
     const rSliderStyle = useAnimatedStyle(() => ({
@@ -32,8 +38,18 @@ const Slider = (props) => {
     // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688
     return (
         <View ref={ControlSelection.blockElement} style={styles.sliderBar}>
-            <PanGestureHandler onGestureEvent={props.onGesture}>
-                <Animated.View style={[styles.sliderKnob, rSliderStyle]} />
+            <PanGestureHandler
+                onBegan={() => setTooltipIsVisible(false)}
+                onEnded={() => setTooltipIsVisible(true)}
+                onGestureEvent={props.onGesture}
+            >
+                <Animated.View style={[styles.sliderKnob, rSliderStyle]}>
+                    { tooltipIsVisible && (
+                        <Tooltip text={props.translate('avatarCropModal.zoomImage')} shiftVertical={-2}>
+                            <View style={[styles.sliderKnobTooltipView]} />
+                        </Tooltip>
+                    )}
+                </Animated.View>
             </PanGestureHandler>
         </View>
     );
@@ -42,4 +58,4 @@ const Slider = (props) => {
 Slider.displayName = 'Slider';
 Slider.propTypes = propTypes;
 Slider.defaultProps = defaultProps;
-export default Slider;
+export default withLocalize(Slider);

src/languages/en.js

@@ -149,6 +149,8 @@ export default {
     avatarCropModal: {
         title: 'Edit photo',
         description: 'Drag, zoom, and rotate your image to your preferred specifications',
+        rotateImage: 'Rotate',
+        zoomImage: 'Zoom',
     },
     composer: {
         noExtensionFoundForMimeType: 'No extension found for mime type',

src/languages/es.js

@@ -148,6 +148,8 @@ export default {
     avatarCropModal: {
         title: 'Editar foto',
         description: 'Arrastra, haz zoom y rota tu imagen para que quede como te gusta.',
+        rotateImage: 'Girar',
+        zoomImage: 'Zoom',
     },
     composer: {
         noExtensionFoundForMimeType: 'No se encontró una extension para este tipo de contenido',

src/styles/styles.js

@@ -2819,6 +2819,12 @@ const styles = {
         cursor: 'move',
     },
 
+    sliderKnobTooltipView: {
+        height: variables.sliderKnobSize,
+        width: variables.sliderKnobSize,
+        borderRadius: variables.sliderKnobSize / 2,
+    },
+
     sliderKnob: {
         backgroundColor: themeColors.success,
         position: 'absolute',