Gyroscope-driven animations of empty chats

android/app/src/debug/AndroidManifest.xml

@@ -4,6 +4,7 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+    <uses-permission android:name="android.permission.HIGH_SAMPLING_RATE_SENSORS"/>
     <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning">
         <meta-data
             android:name="firebase_performance_logcat_enabled"

android/app/src/main/AndroidManifest.xml

@@ -7,6 +7,7 @@
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.HIGH_SAMPLING_RATE_SENSORS"/>
 
     <!-- android:hardwareAccelerated is essential for Android performance: https://developer.android.com/topic/performance/hardware-accel -->
     <application

ios/Podfile.lock

@@ -741,7 +741,7 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (1.14.0):
     - React-Core
-  - RNReanimated (3.4.0):
+  - RNReanimated (3.4.2):
     - DoubleConversion
     - FBLazyVector
     - glog
@@ -1222,8 +1222,8 @@ SPEC CHECKSUMS:
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
   RNPermissions: dcdb7b99796bbeda6975a6e79ad519c41b251b1c
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
-  RNReanimated: 020859659f64be2d30849a1fe88c821a7c3e0cbf
-  RNScreens: d037903436160a4b039d32606668350d2a808806
+  RNReanimated: 49cdb63e767bb7e743ff4c12f7d85722c0d008f2
+  RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9
   RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d

package.json

@@ -128,7 +128,7 @@
     "react-native-plaid-link-sdk": "^10.0.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
-    "react-native-reanimated": "3.4.0",
+    "react-native-reanimated": "3.4.2",
     "react-native-render-html": "6.3.1",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "3.21.0",

src/libs/NumberUtils.js

@@ -47,4 +47,19 @@ function generateHexadecimalValue(num) {
         .toUpperCase();
 }
 
-export {rand64, generateHexadecimalValue};
+/**
+ * Clamp a number in a range.
+ * This is a worklet so it should be used only from UI thread.
+ *
+ * @param {Number} num
+ * @param {Number} min
+ * @param {Number} max
+ * @returns {Number}
+ */
+function clampWorklet(num, min, max) {
+    'worklet';
+
+    return Math.min(Math.max(num, min), max);
+}
+
+export {rand64, generateHexadecimalValue, clampWorklet};

src/pages/home/report/ReportActionItemCreated.js

@@ -1,8 +1,9 @@
 import React, {memo} from 'react';
-import {View, Image} from 'react-native';
+import {View} from 'react-native';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import Animated, {useSharedValue, useAnimatedStyle, useAnimatedSensor, SensorType, withSpring} from 'react-native-reanimated';
 import ONYXKEYS from '../../../ONYXKEYS';
 import ReportWelcomeText from '../../../components/ReportWelcomeText';
 import participantPropTypes from '../../../components/participantPropTypes';
@@ -17,8 +18,10 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import compose from '../../../libs/compose';
 import withLocalize from '../../../components/withLocalize';
 import PressableWithoutFeedback from '../../../components/Pressable/PressableWithoutFeedback';
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
 import MultipleAvatars from '../../../components/MultipleAvatars';
 import CONST from '../../../CONST';
+import * as NumberUtils from '../../../libs/NumberUtils';
 
 const propTypes = {
     /** The id of the report */
@@ -47,7 +50,36 @@ const defaultProps = {
     policy: {},
 };
 
+const IMAGE_OFFSET_Y = 75;
+const ANIMATION_BOOST = 1.3;
+
 function ReportActionItemCreated(props) {
+    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const IMAGE_OFFSET_X = windowWidth / 2;
+
+    // Get data from phone rotation sensor and prep other variables for animation
+    const animatedSensor = useAnimatedSensor(SensorType.GYROSCOPE);
+    const xOffset = useSharedValue(0);
+    const yOffset = useSharedValue(0);
+
+    // Apply data to create style object
+    const animatedStyles = useAnimatedStyle(() => {
+        /*
+         * We use x and y gyroscope velocity and add it to position offset to move background based on device movements.
+         * Position the phone was in while entering the screen is the initial position for background image.
+         */
+        const {x, y} = animatedSensor.sensor.value;
+        // The x vs y here seems wrong but is the way to make it feel right to the user
+        xOffset.value = NumberUtils.clampWorklet(xOffset.value - y * ANIMATION_BOOST, -IMAGE_OFFSET_X, IMAGE_OFFSET_X);
+        yOffset.value = NumberUtils.clampWorklet(yOffset.value - x * ANIMATION_BOOST, -IMAGE_OFFSET_Y, IMAGE_OFFSET_Y);
+        if (!isSmallScreenWidth) {
+            return {};
+        }
+        return {
+            transform: [{translateX: withSpring(-IMAGE_OFFSET_X - xOffset.value)}, {translateY: withSpring(yOffset.value)}],
+        };
+    });
+
     if (!ReportUtils.isChatReport(props.report)) {
         return null;
     }
@@ -64,10 +96,10 @@ function ReportActionItemCreated(props) {
             needsOffscreenAlphaCompositing
         >
             <View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
-                <Image
+                <Animated.Image
                     pointerEvents="none"
                     source={EmptyStateBackgroundImage}
-                    style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)}
+                    style={[StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth), animatedStyles]}
                 />
                 <View
                     accessibilityLabel={props.translate('accessibilityHints.chatWelcomeMessage')}

src/styles/StyleUtils.js

@@ -943,7 +943,7 @@ function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth) {
     if (isSmallScreenWidth) {
         return {
             height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT,
-            width: '100%',
+            width: '200%',
             position: 'absolute',
         };
     }