Make sensors work with different device orientations (#4033)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

- Adds `adjustToInterfaceOrientation` option that adjusts the sensors
values to current device orientation
- Adds `interfaceOrientation` shared value that contains the current
interface orientation
- Adds `iosReferenceFrame` option that allows setting ios reference
frame. Some reference frames doesn't work for example on iPods but give
better results.

## Test plan
- `AnimatedSensorExample.tsx`
- `CubesExample.tsx` - when device faces north the cubes should rotate
in the correct way on every device orientation.

Common/cpp/AnimatedSensor/AnimatedSensorModule.cpp

@@ -22,6 +22,7 @@ jsi::Value AnimatedSensorModule::registerSensor(
     const std::shared_ptr<JSRuntimeHelper> &runtimeHelper,
     const jsi::Value &sensorTypeValue,
     const jsi::Value &interval,
+    const jsi::Value &iosReferenceFrame,
     const jsi::Value &sensorDataHandler) {
   SensorType sensorType = static_cast<SensorType>(sensorTypeValue.asNumber());
 
@@ -30,10 +31,11 @@ jsi::Value AnimatedSensorModule::registerSensor(
   int sensorId = platformRegisterSensorFunction_(
       sensorType,
       interval.asNumber(),
+      iosReferenceFrame.asNumber(),
       [sensorType,
        shareableHandler,
-       weakRuntimeHelper =
-           std::weak_ptr<JSRuntimeHelper>(runtimeHelper)](double newValues[]) {
+       weakRuntimeHelper = std::weak_ptr<JSRuntimeHelper>(runtimeHelper)](
+          double newValues[], int orientationDegrees) {
         auto runtimeHelper = weakRuntimeHelper.lock();
         if (runtimeHelper == nullptr || runtimeHelper->uiRuntimeDestroyed) {
           return;
@@ -51,12 +53,14 @@ jsi::Value AnimatedSensorModule::registerSensor(
           value.setProperty(rt, "yaw", newValues[4]);
           value.setProperty(rt, "pitch", newValues[5]);
           value.setProperty(rt, "roll", newValues[6]);
+          value.setProperty(rt, "interfaceOrientation", orientationDegrees);
           handler.call(rt, value);
         } else {
           jsi::Object value(rt);
           value.setProperty(rt, "x", newValues[0]);
           value.setProperty(rt, "y", newValues[1]);
           value.setProperty(rt, "z", newValues[2]);
+          value.setProperty(rt, "interfaceOrientation", orientationDegrees);
           handler.call(rt, value);
         }
       });

Common/cpp/AnimatedSensor/AnimatedSensorModule.h

@@ -35,6 +35,7 @@ class AnimatedSensorModule {
       const std::shared_ptr<JSRuntimeHelper> &runtimeHelper,
       const jsi::Value &sensorType,
       const jsi::Value &interval,
+      const jsi::Value &iosReferenceFrame,
       const jsi::Value &sensorDataContainer);
   void unregisterSensor(const jsi::Value &sensorId);
   void unregisterAllSensors();

Common/cpp/NativeModules/NativeReanimatedModule.cpp

@@ -435,9 +435,15 @@ jsi::Value NativeReanimatedModule::registerSensor(
     jsi::Runtime &rt,
     const jsi::Value &sensorType,
     const jsi::Value &interval,
+    const jsi::Value &iosReferenceFrame,
     const jsi::Value &sensorDataHandler) {
   return animatedSensorModule.registerSensor(
-      rt, runtimeHelper, sensorType, interval, sensorDataHandler);
+      rt,
+      runtimeHelper,
+      sensorType,
+      interval,
+      iosReferenceFrame,
+      sensorDataHandler);
 }
 
 void NativeReanimatedModule::unregisterSensor(

Common/cpp/NativeModules/NativeReanimatedModule.h

@@ -143,6 +143,7 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec,
       jsi::Runtime &rt,
       const jsi::Value &sensorType,
       const jsi::Value &interval,
+      const jsi::Value &iosReferenceFrame,
       const jsi::Value &sensorDataContainer) override;
   void unregisterSensor(jsi::Runtime &rt, const jsi::Value &sensorId) override;
 

Common/cpp/NativeModules/NativeReanimatedModuleSpec.cpp

@@ -106,7 +106,11 @@ static jsi::Value SPEC_PREFIX(registerSensor)(
     size_t count) {
   return static_cast<NativeReanimatedModuleSpec *>(&turboModule)
       ->registerSensor(
-          rt, std::move(args[0]), std::move(args[1]), std::move(args[2]));
+          rt,
+          std::move(args[0]),
+          std::move(args[1]),
+          std::move(args[2]),
+          std::move(args[3]));
 }
 
 static jsi::Value SPEC_PREFIX(unregisterSensor)(
@@ -186,7 +190,7 @@ NativeReanimatedModuleSpec::NativeReanimatedModuleSpec(
   methodMap_["getViewProp"] = MethodMetadata{3, SPEC_PREFIX(getViewProp)};
   methodMap_["enableLayoutAnimations"] =
       MethodMetadata{2, SPEC_PREFIX(enableLayoutAnimations)};
-  methodMap_["registerSensor"] = MethodMetadata{3, SPEC_PREFIX(registerSensor)};
+  methodMap_["registerSensor"] = MethodMetadata{4, SPEC_PREFIX(registerSensor)};
   methodMap_["unregisterSensor"] =
       MethodMetadata{1, SPEC_PREFIX(unregisterSensor)};
   methodMap_["configureProps"] = MethodMetadata{2, SPEC_PREFIX(configureProps)};

Common/cpp/NativeModules/NativeReanimatedModuleSpec.h

@@ -65,6 +65,7 @@ class JSI_EXPORT NativeReanimatedModuleSpec : public TurboModule {
       jsi::Runtime &rt,
       const jsi::Value &sensorType,
       const jsi::Value &interval,
+      const jsi::Value &iosReferenceFrame,
       const jsi::Value &sensorDataContainer) = 0;
   virtual void unregisterSensor(
       jsi::Runtime &rt,

Common/cpp/Tools/PlatformDepMethodsHolder.h

@@ -58,7 +58,7 @@ using ProgressLayoutAnimationFunction =
 using EndLayoutAnimationFunction = std::function<void(int, bool, bool)>;
 
 using RegisterSensorFunction =
-    std::function<int(int, int, std::function<void(double[])>)>;
+    std::function<int(int, int, int, std::function<void(double[], int)>)>;
 using UnregisterSensorFunction = std::function<void(int)>;
 using SetGestureStateFunction = std::function<void(int, int)>;
 using ConfigurePropsFunction = std::function<void(

Example/src/AnimatedSensorExample.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
 import Animated, {
-  withTiming,
   useAnimatedStyle,
   useAnimatedSensor,
   SensorType,
 } from 'react-native-reanimated';
 import { View, Button, StyleSheet } from 'react-native';
 
 export default function AnimatedStyleUpdateExample() {
-  const animatedSensor = useAnimatedSensor(SensorType.ROTATION);
+  const animatedSensor = useAnimatedSensor(SensorType.GRAVITY);
   const style = useAnimatedStyle(() => {
-    const pitch = Math.abs(animatedSensor.sensor.value.pitch);
-    const roll = Math.abs(animatedSensor.sensor.value.roll);
+    const { x, y } = animatedSensor.sensor.value;
     return {
-      height: withTiming(pitch * 200 + 20, { duration: 100 }),
-      width: withTiming(roll * 200 + 20, { duration: 100 }),
+      transform: [{ translateX: x * 5 }, { translateY: y * 5 }],
     };
   });
 
@@ -24,7 +21,9 @@ export default function AnimatedStyleUpdateExample() {
         title={'log data'}
         onPress={() => console.log(animatedSensor.sensor.value)}
       />
-      <Animated.View style={[componentStyle.square, style]} />
+      <Animated.View style={[componentStyle.rect]}>
+        <Animated.View style={[componentStyle.square, style]} />
+      </Animated.View>
     </View>
   );
 }
@@ -36,9 +35,16 @@ const componentStyle = StyleSheet.create({
     alignItems: 'center',
   },
   square: {
-    width: 50,
-    height: 50,
+    width: 10,
+    height: 10,
+    backgroundColor: 'red',
+    position: 'absolute',
+    left: 90,
+    top: 90,
+  },
+  rect: {
+    width: 200,
+    height: 200,
     backgroundColor: 'black',
-    margin: 30,
   },
 });

Example/src/App.tsx

@@ -59,6 +59,7 @@ import SwipeableListExample from './SwipeableListExample';
 import { WaterfallGridExample } from './LayoutReanimation/WaterfallGridExample';
 import WobbleExample from './WobbleExample';
 import { ColorInterpolationExample } from './ColorInterpolationExample';
+import CubesExample from './CubesExample';
 
 LogBox.ignoreLogs(['Calling `getNode()`']);
 
@@ -115,6 +116,10 @@ const SCREENS: Screens = {
     screen: AnimatedSensorExample,
     title: '🆕 Use Animated Sensor',
   },
+  Cubes: {
+    screen: CubesExample,
+    title: '🆕 Cubes with useAnimatedSensor',
+  },
   FrameCallbackExample: {
     screen: FrameCallbackExample,
     title: '🆕 Frame callback example',
@@ -326,6 +331,7 @@ export const styles = StyleSheet.create({
   },
   buttonText: {
     backgroundColor: 'transparent',
+    color: 'black',
   },
   button: {
     flex: 1,