diff --git a/example/App.tsx b/example/App.tsx
index f8e04ad2d2..0dbb64d2e1 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -55,11 +55,9 @@ import Fling from './src/basic/fling';
 import WebStylesResetExample from './src/release_tests/webStylesReset';
 import StylusData from './src/release_tests/StylusData';
 
-import ReanimatedSimple from './src/new_api/reanimated';
 import Camera from './src/new_api/camera';
 import Transformations from './src/new_api/transformations';
-import OverlapParents from './src/new_api/overlap_parent';
-import OverlapSiblings from './src/new_api/overlap_siblings';
+import Overlap from './src/new_api/overlap';
 import Calculator from './src/new_api/calculator';
 import BottomSheetNewApi from './src/new_api/bottom_sheet';
 import ChatHeadsNewApi from './src/new_api/chat_heads';
@@ -75,6 +73,7 @@ import Pressable from 'src/new_api/pressable';
 import EmptyExample from './src/empty/EmptyExample';
 import RectButtonBorders from './src/release_tests/rectButton';
 import { ListWithHeader } from './src/ListWithHeader';
+import { COLORS } from './src/common';
 
 import { Icon } from '@swmansion/icons';
 
@@ -92,6 +91,32 @@ const EXAMPLES: ExamplesSection[] = [
     sectionTitle: 'Empty',
     data: [{ name: 'Empty Example', component: EmptyExample }],
   },
+  {
+    sectionTitle: 'New api',
+    data: [
+      { name: 'Ball with velocity', component: VelocityTest },
+      { name: 'Camera', component: Camera },
+      { name: 'Transformations', component: Transformations },
+      { name: 'Overlap', component: Overlap },
+      { name: 'Bottom Sheet', component: BottomSheetNewApi },
+      { name: 'Calculator', component: Calculator },
+      { name: 'Chat Heads', component: ChatHeadsNewApi },
+      { name: 'Drag and drop', component: DragNDrop },
+      { name: 'New Swipeable', component: Swipeable },
+      { name: 'New Pressable', component: Pressable },
+      { name: 'Hover', component: Hover },
+      { name: 'Hoverable icons', component: HoverableIcons },
+      {
+        name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
+        component: BetterHorizontalDrawer,
+      },
+      {
+        name: 'Manual gestures',
+        component: ManualGestures,
+      },
+      { name: 'Pressable', component: Pressable },
+    ],
+  },
   {
     sectionTitle: 'Basic examples',
     data: [
@@ -159,36 +184,6 @@ const EXAMPLES: ExamplesSection[] = [
       { name: 'Stylus data', component: StylusData },
     ],
   },
-  {
-    sectionTitle: 'New api',
-    data: [
-      {
-        name: 'Simple interaction with Reanimated',
-        component: ReanimatedSimple,
-      },
-      { name: 'Hover', component: Hover },
-      { name: 'Hoverable icons', component: HoverableIcons },
-      { name: 'Camera', component: Camera },
-      { name: 'Velocity test', component: VelocityTest },
-      { name: 'Transformations', component: Transformations },
-      { name: 'Overlap parents', component: OverlapParents },
-      { name: 'Overlap siblings', component: OverlapSiblings },
-      { name: 'Calculator', component: Calculator },
-      { name: 'Bottom Sheet', component: BottomSheetNewApi },
-      { name: 'Chat Heads', component: ChatHeadsNewApi },
-      { name: 'Drag and drop', component: DragNDrop },
-      { name: 'Swipeable', component: Swipeable },
-      { name: 'Pressable', component: Pressable },
-      {
-        name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
-        component: BetterHorizontalDrawer,
-      },
-      {
-        name: 'Manual gestures',
-        component: ManualGestures,
-      },
-    ],
-  },
 ];
 
 const OPEN_LAST_EXAMPLE_KEY = 'openLastExample';
@@ -213,9 +208,12 @@ export default function App() {
             cardStyle: {
               // It's important to set height for the screen, without it scroll doesn't work on web platform.
               height: Dimensions.get('window').height,
+              backgroundColor: COLORS.offWhite,
             },
             headerStyle: {
-              backgroundColor: '#f8f9ff',
+              backgroundColor: COLORS.offWhite,
+              borderBottomColor: COLORS.headerSeparator,
+              borderBottomWidth: 1,
             },
           }}>
           <Stack.Screen
@@ -335,7 +333,7 @@ function MainScreenItem({ name, onPressItem }: MainScreenItemProps) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f8f9ff',
+    backgroundColor: COLORS.offWhite,
   },
   sectionTitle: {
     ...Platform.select({
@@ -349,7 +347,7 @@ const styles = StyleSheet.create({
       },
     }),
     padding: 16,
-    backgroundColor: '#f8f9ff',
+    backgroundColor: COLORS.offWhite,
   },
   list: {},
   separator: {
@@ -358,7 +356,8 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
     height: 50,
-    padding: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
     flexDirection: 'row',
     backgroundColor: '#fff',
     alignItems: 'center',
diff --git a/example/app.json b/example/app.json
index f06ed1e13e..9c12607b97 100644
--- a/example/app.json
+++ b/example/app.json
@@ -28,6 +28,12 @@
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow RNGH example to access your camera"
+        }
+      ],
       [
         "expo-font",
         {
diff --git a/example/package.json b/example/package.json
index beaa57f74d..9cd91ae352 100644
--- a/example/package.json
+++ b/example/package.json
@@ -25,6 +25,7 @@
     "@react-navigation/stack": "^6.3.29",
     "@swmansion/icons": "^0.0.1",
     "expo": "^51.0.0",
+    "expo-camera": "~15.0.9",
     "expo-font": "~12.0.10",
     "hoist-non-react-statics": "^3.3.2",
     "invariant": "^2.2.4",
@@ -37,6 +38,7 @@
     "react-native-reanimated": "3.10.0",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {
diff --git a/example/src/ListWithHeader/Header.tsx b/example/src/ListWithHeader/Header.tsx
index 9d6ee56de8..d350465bed 100644
--- a/example/src/ListWithHeader/Header.tsx
+++ b/example/src/ListWithHeader/Header.tsx
@@ -11,6 +11,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { COLORS } from '../common';
 
 const SIGNET = require('./signet.png');
 const TEXT = require('./text.png');
@@ -153,14 +154,14 @@ const styles = StyleSheet.create({
   nativeHeader: {
     width: '100%',
     position: 'absolute',
-    backgroundColor: '#f8f9ff',
+    backgroundColor: COLORS.offWhite,
     zIndex: 100,
     flexDirection: 'row',
   },
   webHeader: {
     width: '100%',
     position: 'absolute',
-    backgroundColor: '#f8f9ff',
+    backgroundColor: COLORS.offWhite,
     zIndex: 100,
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/example/src/basic/bouncing/index.tsx b/example/src/basic/bouncing/index.tsx
index c3e7224118..99a8668518 100644
--- a/example/src/basic/bouncing/index.tsx
+++ b/example/src/basic/bouncing/index.tsx
@@ -132,7 +132,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF',
   },
   box: {
     width: BOX_SIZE,
diff --git a/example/src/basic/panResponder/index.tsx b/example/src/basic/panResponder/index.tsx
index 79a1ae798d..e17928f784 100644
--- a/example/src/basic/panResponder/index.tsx
+++ b/example/src/basic/panResponder/index.tsx
@@ -23,14 +23,10 @@ type CircleStyles = {
 };
 
 // A clone of: https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js
-class PanResponderExample extends Component {
+class PanResponderExample extends Component<{}, { style: CircleStyles }> {
   private panResponder: { panHandlers?: GestureResponderHandlers } = {};
   private previousLeft = 0;
   private previousTop = 0;
-  private circleStyles: { style: CircleStyles } = {
-    style: { left: 0, top: 0, backgroundColor: '#000' },
-  };
-  private circle: React.ElementRef<typeof View> | null = null;
 
   constructor(props: Record<string, unknown>) {
     super(props);
@@ -42,45 +38,56 @@ class PanResponderExample extends Component {
       onPanResponderRelease: this.handlePanResponderEnd,
       onPanResponderTerminate: this.handlePanResponderEnd,
     });
+
     this.previousLeft = 20;
     this.previousTop = 84;
-    this.circleStyles = {
+
+    this.state = {
       style: {
+        backgroundColor: 'green',
         left: this.previousLeft,
         top: this.previousTop,
-        backgroundColor: 'green',
       },
     };
   }
 
-  componentDidMount() {
-    this.updateNativeStyles();
-  }
-
   render() {
     return (
       <View
-        ref={(circle) => {
-          this.circle = circle;
-        }}
-        style={styles.circle}
+        style={[styles.circle, this.state.style]}
         {...this.panResponder.panHandlers}
       />
     );
   }
 
   private highlight = () => {
-    this.circleStyles.style.backgroundColor = 'blue';
-    this.updateNativeStyles();
+    this.setState({
+      style: {
+        backgroundColor: 'blue',
+        left: this.previousLeft,
+        top: this.previousTop,
+      },
+    });
   };
 
   private unHighlight = () => {
-    this.circleStyles.style.backgroundColor = 'green';
-    this.updateNativeStyles();
+    this.setState({
+      style: {
+        backgroundColor: 'green',
+        left: this.previousLeft,
+        top: this.previousTop,
+      },
+    });
   };
 
-  private updateNativeStyles = () => {
-    this.circle?.setNativeProps(this.circleStyles);
+  private setPosition = (x: number, y: number) => {
+    this.setState({
+      style: {
+        backgroundColor: 'blue',
+        left: x,
+        top: y,
+      },
+    });
   };
 
   private handleStartShouldSetPanResponder = (
@@ -110,19 +117,19 @@ class PanResponderExample extends Component {
     _e: GestureResponderEvent,
     gestureState: PanResponderGestureState
   ) => {
-    this.circleStyles.style.left =
-      this.previousLeft + gestureState.dx * (I18nManager.isRTL ? -1 : 1);
-    this.circleStyles.style.top = this.previousTop + gestureState.dy;
-    this.updateNativeStyles();
+    this.setPosition(
+      this.previousLeft + gestureState.dx * (I18nManager.isRTL ? -1 : 1),
+      this.previousTop + gestureState.dy
+    );
   };
 
   private handlePanResponderEnd = (
     _e: GestureResponderEvent,
     gestureState: PanResponderGestureState
   ) => {
-    this.unHighlight();
     this.previousLeft += gestureState.dx * (I18nManager.isRTL ? -1 : 1);
     this.previousTop += gestureState.dy;
+    this.unHighlight();
   };
 }
 
@@ -146,7 +153,6 @@ export default class Example extends Component {
 const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
   },
   circle: {
     width: CIRCLE_SIZE,
diff --git a/example/src/common.tsx b/example/src/common.tsx
index df96741ea5..0a7436e840 100644
--- a/example/src/common.tsx
+++ b/example/src/common.tsx
@@ -25,6 +25,11 @@ export class LoremIpsum extends React.Component<Props> {
   }
 }
 
+export const COLORS = {
+  offWhite: '#f8f9ff',
+  headerSeparator: '#eef0ff',
+};
+
 const LOREM_IPSUM = `
 Curabitur accumsan sit amet massa quis cursus. Fusce sollicitudin nunc nisl, quis efficitur quam tristique eget. Ut non erat molestie, ullamcorper turpis nec, euismod neque. Praesent aliquam risus ultricies, cursus mi consectetur, bibendum lorem. Nunc eleifend consectetur metus quis pulvinar. In vitae lacus eu nibh tincidunt sagittis ut id lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sagittis mauris rhoncus, maximus justo in, consequat dolor. Pellentesque ornare laoreet est vulputate vestibulum. Aliquam sit amet metus lorem.
 
diff --git a/example/src/empty/EmptyExample.tsx b/example/src/empty/EmptyExample.tsx
index 28aa248fab..900460d6a6 100644
--- a/example/src/empty/EmptyExample.tsx
+++ b/example/src/empty/EmptyExample.tsx
@@ -4,7 +4,8 @@ import { StyleSheet, Text, View } from 'react-native';
 export default function EmptyExample() {
   return (
     <View style={styles.container}>
-      <Text>Hello World!</Text>
+      <Text style={{ fontSize: 64, opacity: 0.25 }}>😞</Text>
+      <Text style={{ fontSize: 24, opacity: 0.25 }}>It's so empty here</Text>
     </View>
   );
 }
@@ -14,6 +15,5 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF',
   },
 });
diff --git a/example/src/new_api/bottom_sheet/index.tsx b/example/src/new_api/bottom_sheet/index.tsx
index a6ed9062ff..1218963588 100644
--- a/example/src/new_api/bottom_sheet/index.tsx
+++ b/example/src/new_api/bottom_sheet/index.tsx
@@ -142,7 +142,6 @@ function Example() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#eef',
   },
   header: {
     height: HEADER_HEIGTH,
diff --git a/example/src/new_api/camera/AnimatedCameraView.tsx b/example/src/new_api/camera/AnimatedCameraView.tsx
new file mode 100644
index 0000000000..4e0450c834
--- /dev/null
+++ b/example/src/new_api/camera/AnimatedCameraView.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import Animated, {
+  SharedValue,
+  useAnimatedProps,
+} from 'react-native-reanimated';
+
+const AnimatedCameraView = Animated.createAnimatedComponent(CameraView);
+
+interface CameraProps {
+  facing: 'front' | 'back';
+  zoom: SharedValue<number>;
+}
+
+const Camera = React.forwardRef(
+  (props: CameraProps, ref: React.Ref<CameraView>) => {
+    const [permission, requestPermission] = useCameraPermissions();
+
+    const animatedProps = useAnimatedProps(() => {
+      return {
+        zoom: props.zoom.value - 1,
+      };
+    });
+
+    if (!permission) {
+      return <View />;
+    }
+
+    if (!permission.granted) {
+      return (
+        <View style={styles.container}>
+          <Text style={{ textAlign: 'center' }}>
+            We need your permission to show the camera
+          </Text>
+          <Button onPress={requestPermission} title="Grant permission" />
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.container} pointerEvents="none">
+        <AnimatedCameraView
+          ref={ref}
+          style={styles.camera}
+          facing={props.facing}
+          animatedProps={animatedProps}
+        />
+      </View>
+    );
+  }
+);
+
+export default Camera;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  camera: {
+    flex: 1,
+  },
+  buttonContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'transparent',
+    margin: 64,
+  },
+  button: {
+    flex: 1,
+    alignSelf: 'flex-end',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+});
diff --git a/example/src/new_api/camera/index.tsx b/example/src/new_api/camera/index.tsx
index 4ad2be2977..7ee8fc6e28 100644
--- a/example/src/new_api/camera/index.tsx
+++ b/example/src/new_api/camera/index.tsx
@@ -1,344 +1,248 @@
 import React, { useState } from 'react';
-import { StyleSheet, useWindowDimensions } from 'react-native';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
-  useSharedValue,
+  SharedValue,
+  runOnJS,
+  useAnimatedProps,
   useAnimatedStyle,
+  useSharedValue,
   withTiming,
-  runOnJS,
 } from 'react-native-reanimated';
+import { Circle, Svg } from 'react-native-svg';
+import AnimatedCameraView from './AnimatedCameraView';
 
-const filters = ['red', 'green', 'blue', 'yellow', 'orange', 'cyan'];
-const MAX_VIDEO_DURATION_MS = 60000;
-const CAPTURE_BUTTON_RADIUS = 50;
-const FILTER_BUTTON_RADIUS = 35;
+const FILTERS = ['red', 'green', 'blue', 'yellow', 'orange', 'cyan'];
+const CAROUSEL_SIZE = 100;
+const FILTER_SIZE = 60;
+const VIDEO_DURATION = 20000;
+const RECORD_INDICATOR_STROKE = 10;
 
-export default function Home() {
-  const filter = useSharedValue(0);
-  const filterOffset = useSharedValue(0);
-  const zoom = useSharedValue(1);
-  const [selectedFilter, setSelectedFilter] = useState(0);
-  const [isRecording, setIsRecording] = useState(false);
-  const [remainingTimeMs, setRemainingTimeMs] = useState(MAX_VIDEO_DURATION_MS);
-  const [recordingIntervalHandle, setRecordingIntervalHandle] =
-    useState<ReturnType<typeof setInterval> | null>(null);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
-  const filtersPanGesture = Gesture.Pan()
-    .onUpdate((e) => {
-      'worklet';
-      filter.value = filter.value + (filterOffset.value - e.translationX) / 100;
-      filterOffset.value = e.translationX;
+export default function Camera() {
+  const [facing, setFacing] = useState<'front' | 'back'>('back');
+  const selectedFilter = useSharedValue(0);
+  const captureProgress = useSharedValue(0);
+  const zoom = useSharedValue(1);
 
-      runOnJS(updateSelectedFilter)();
+  const filterChangeGesture = Gesture.Pan()
+    .onChange((e) => {
+      selectedFilter.value -= e.changeX / FILTER_SIZE;
     })
     .onEnd(() => {
-      'worklet';
-      filterOffset.value = 0;
-      runOnJS(stopFilterScroll)();
+      const nextFilter = Math.min(
+        FILTERS.length - 1,
+        Math.max(0, Math.round(selectedFilter.value))
+      );
+      selectedFilter.value = withTiming(nextFilter, { duration: 150 });
     });
 
-  const buttonTapGesture = Gesture.Tap().onEnd((_e, success) => {
-    'worklet';
-    if (success) {
-      runOnJS(takePhoto)();
-    }
-  });
+  function takePhoto() {
+    alert("I didn't bother to implement this :)");
+  }
 
-  const buttonDoubleTapGesture = Gesture.Tap()
-    .numberOfTaps(2)
-    .onEnd((_e, success) => {
-      'worklet';
-      if (success) {
-        runOnJS(takeSeries)();
-      }
-    });
+  function startRecording() {
+    // no-op
+  }
 
-  const buttonPanGesture = Gesture.Pan()
-    .simultaneousWithExternalGesture(filtersPanGesture)
-    .onUpdate((e) => {
-      'worklet';
-      if (isRecording) {
-        if (e.velocityY < 0) {
-          zoom.value *= 1.05;
-        } else if (e.velocityY > 0) {
-          zoom.value *= 0.95;
-        }
-      }
-    });
+  function stopRecording() {
+    alert("I didn't bother to implement this either :)");
+  }
+
+  const takePhotoGesture = Gesture.Tap().onEnd(() => {
+    runOnJS(takePhoto)();
+    captureProgress.value = withTiming(0, { duration: 1000 });
+  });
 
-  const buttonLongPressGesture = Gesture.LongPress()
+  const takeVideoGesture = Gesture.LongPress()
+    .shouldCancelWhenOutside(false)
     .maxDistance(10000)
     .onStart(() => {
-      'worklet';
       runOnJS(startRecording)();
+      captureProgress.value = withTiming(1, { duration: VIDEO_DURATION });
     })
     .onEnd(() => {
-      'worklet';
-      if (isRecording) {
-        runOnJS(finishRecording)();
-      }
+      runOnJS(stopRecording)();
+      captureProgress.value = 0;
     });
 
-  const previewPinchGesture = Gesture.Pinch().onChange((e) => {
-    'worklet';
-    zoom.value *= e.scaleChange;
-  });
-
-  const buttonGesture = Gesture.Simultaneous(
-    buttonLongPressGesture,
-    Gesture.Exclusive(
-      buttonPanGesture,
-      buttonDoubleTapGesture,
-      buttonTapGesture
-    )
-  );
-
-  function stopFilterScroll() {
-    filter.value = withTiming(updateSelectedFilter(), { duration: 200 });
-  }
-
-  function updateSelectedFilter() {
-    const selectedFilter = Math.round(
-      Math.min(filters.length - 1, Math.max(filter.value, 0))
-    );
-    setSelectedFilter(selectedFilter);
-
-    return selectedFilter;
-  }
-
-  function takePhoto() {
-    // eslint-disable-next-line no-alert
-    window.alert('You took a photo');
-  }
-
-  function takeSeries() {
-    // eslint-disable-next-line no-alert
-    window.alert('You took a series of photos');
-  }
-
-  function startRecording() {
-    setIsRecording(true);
-    setRemainingTimeMs(MAX_VIDEO_DURATION_MS);
-    setRecordingIntervalHandle(
-      setInterval(() => {
-        setRemainingTimeMs((r) => r - 200);
-      }, 200)
-    );
-  }
-
-  function finishRecording() {
-    setIsRecording(false);
-    clearInterval(recordingIntervalHandle!);
-    setRemainingTimeMs(MAX_VIDEO_DURATION_MS);
+  const panZoomGesture = Gesture.Pan()
+    .shouldCancelWhenOutside(false)
+    .requireExternalGestureToFail(filterChangeGesture)
+    .onChange((e) => {
+      zoom.value = Math.max(1, Math.min(2, zoom.value - e.changeY / 500));
+    });
 
-    // eslint-disable-next-line no-alert
-    window.alert(
-      `You took a video (${(MAX_VIDEO_DURATION_MS - remainingTimeMs) / 1000} s)`
+  const pinchZoomGesture = Gesture.Pinch().onChange((e) => {
+    zoom.value = Math.max(
+      1,
+      Math.min(2, zoom.value * ((e.scaleChange - 1) * 0.2 + 1))
     );
-  }
-
-  const zoomStyle = useAnimatedStyle(() => {
-    return { transform: [{ scale: zoom.value }] };
+    console.log(zoom.value);
   });
 
-  return (
-    <Animated.View style={styles.container}>
-      <GestureDetector gesture={previewPinchGesture}>
-        <Animated.View
-          style={[styles.home, { backgroundColor: filters[selectedFilter] }]}>
-          <Animated.View style={[styles.box, zoomStyle]} />
-        </Animated.View>
-      </GestureDetector>
+  const changeCameraGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      setFacing((f) => (f === 'back' ? 'front' : 'back'));
+    })
+    .runOnJS(true);
 
-      <GestureDetector gesture={filtersPanGesture}>
-        <Animated.View style={styles.buttonContainer}>
-          <FilterCarousel filters={filters} selected={filter} />
-          <GestureDetector gesture={buttonGesture}>
-            <CaptureButton
-              progress={1 - remainingTimeMs / MAX_VIDEO_DURATION_MS}
-              onTimerFinished={() => {
-                finishRecording();
-              }}
-            />
-          </GestureDetector>
-        </Animated.View>
-      </GestureDetector>
-    </Animated.View>
+  return (
+    <GestureDetector
+      gesture={Gesture.Race(pinchZoomGesture, changeCameraGesture)}>
+      <View style={styles.container}>
+        <AnimatedCameraView facing={facing} zoom={zoom} />
+        <FilterOverlay filters={FILTERS} selected={selectedFilter} />
+        <GestureDetector gesture={filterChangeGesture}>
+          <View style={styles.carouselContainer}>
+            <FilterCarousel filters={FILTERS} selected={selectedFilter} />
+            <GestureDetector
+              gesture={Gesture.Exclusive(
+                Gesture.Simultaneous(panZoomGesture, takeVideoGesture),
+                takePhotoGesture
+              )}>
+              <CaptureButton progress={captureProgress} />
+            </GestureDetector>
+          </View>
+        </GestureDetector>
+      </View>
+    </GestureDetector>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: '100%',
-    alignSelf: 'center',
-    backgroundColor: 'white',
-  },
-  home: {
-    width: '100%',
-    height: '100%',
-    alignSelf: 'center',
-    opacity: 0.5,
-  },
-  buttonContainer: {
-    width: '100%',
-    height: CAPTURE_BUTTON_RADIUS * 2,
-    position: 'absolute',
-    bottom: 50,
-    zIndex: 10,
-  },
-  box: {
-    alignSelf: 'center',
-    margin: 100,
-    width: 200,
-    height: 200,
-    backgroundColor: 'black',
-  },
-});
-
-function FilterCarousel(props: {
+interface FilterCarouselProps {
   filters: string[];
-  selected: Animated.SharedValue<number>;
-}) {
-  return (
-    <Animated.View style={filterCarouselStyles.container}>
-      {props.filters.map((filter) => (
-        <Filter key={filter} filter={filter} selected={props.selected} />
-      ))}
-    </Animated.View>
-  );
+  selected: SharedValue<number>;
 }
 
-function Filter(props: {
-  filter: string;
-  selected: Animated.SharedValue<number>;
-}) {
-  const window = useWindowDimensions();
+function FilterCarousel(props: FilterCarouselProps) {
   const style = useAnimatedStyle(() => {
     return {
+      flexDirection: 'row',
+      position: 'absolute',
+      left: '50%',
+      gap: FILTER_SIZE * 0.4,
       transform: [
         {
           translateX:
-            window.width / 2 -
-            CAPTURE_BUTTON_RADIUS -
-            CAPTURE_BUTTON_RADIUS * 2 * props.selected.value,
+            -FILTER_SIZE / 2 - FILTER_SIZE * 1.4 * props.selected.value,
         },
       ],
     };
   });
 
+  return (
+    <Animated.View style={style}>
+      {props.filters.map((filter) => (
+        <View
+          key={filter}
+          style={{
+            backgroundColor: filter,
+            width: FILTER_SIZE,
+            height: FILTER_SIZE,
+            borderRadius: FILTER_SIZE / 2,
+          }}
+        />
+      ))}
+    </Animated.View>
+  );
+}
+
+interface FilterOverlayProps {
+  filters: string[];
+  selected: SharedValue<number>;
+}
+
+export function FilterOverlay(props: FilterOverlayProps) {
+  const style = useAnimatedStyle(() => {
+    const progress = props.selected.value % 1;
+
+    return {
+      opacity: 0.3 * (Math.abs(progress - 0.5) * 2),
+      backgroundColor: props.filters[Math.round(props.selected.value)],
+    };
+  });
+
   return (
     <Animated.View
-      style={[
-        filterCarouselStyles.filter,
-        style,
-        { backgroundColor: props.filter },
-      ]}
+      style={[StyleSheet.absoluteFill, style]}
+      pointerEvents={'none'}
     />
   );
 }
 
-const filterCarouselStyles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: CAPTURE_BUTTON_RADIUS * 2,
-    alignSelf: 'center',
-    position: 'absolute',
-    flexDirection: 'row',
-  },
-  filter: {
-    width: FILTER_BUTTON_RADIUS * 2,
-    height: FILTER_BUTTON_RADIUS * 2,
-    borderRadius: FILTER_BUTTON_RADIUS * 2,
-    alignSelf: 'flex-start',
-    margin: CAPTURE_BUTTON_RADIUS - FILTER_BUTTON_RADIUS,
-    borderWidth: 0.5,
-    borderColor: 'gray',
-  },
-});
-
-function CaptureButton(props: {
-  progress: number;
-  onTimerFinished: () => void;
-}) {
-  function getOverlay(progress: number) {
-    if (progress > 1) {
-      progress = 1;
+interface CaptureButtonProps {
+  progress: SharedValue<number>;
+}
 
-      props.onTimerFinished?.();
-    }
+function CaptureButton(props: CaptureButtonProps) {
+  const radius = CAROUSEL_SIZE / 2;
+  const svgRadius = CAROUSEL_SIZE / 2 - RECORD_INDICATOR_STROKE * 0.5;
+  const circumference = svgRadius * 2 * Math.PI;
 
-    const progressBelowHalf = progress <= 0.5;
-    return (
-      <Animated.View
-        style={[
-          captureButtonStyles.overlay,
-          progressBelowHalf
-            ? captureButtonStyles.overlayLessThanHalf
-            : captureButtonStyles.overlayMoreThanHalf,
-          {
-            transform: [
-              {
-                rotateZ: `${
-                  45 + 360 * (progressBelowHalf ? progress : progress - 0.5)
-                }deg`,
-              },
-            ],
-          },
-        ]}
-      />
-    );
-  }
+  const animatedProps = useAnimatedProps(() => {
+    const svgProgress = 100 - props.progress.value * 100;
+    return {
+      strokeDashoffset: svgRadius * Math.PI * 2 * (svgProgress / 100),
+    };
+  });
 
   return (
-    <Animated.View style={captureButtonStyles.container}>
-      <Animated.View style={captureButtonStyles.progress} />
-      {getOverlay(props.progress)}
+    <Animated.View style={styles.shutterContainer}>
+      <Animated.View style={styles.shutterButtonBackground} />
+      <Svg style={styles.shutterButtonRecordingIndicator}>
+        <AnimatedCircle
+          cx={radius}
+          cy={radius}
+          r={svgRadius}
+          stroke={'red'}
+          strokeLinecap="round"
+          fill={'transparent'}
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeWidth={RECORD_INDICATOR_STROKE}
+          animatedProps={animatedProps}
+        />
+      </Svg>
     </Animated.View>
   );
 }
 
-const captureButtonStyles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
-    width: CAPTURE_BUTTON_RADIUS * 2,
-    height: CAPTURE_BUTTON_RADIUS * 2,
-    alignSelf: 'center',
-    borderWidth: 8,
-    borderRadius: CAPTURE_BUTTON_RADIUS * 2,
-    borderColor: 'white',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
+    flex: 1,
   },
-  progress: {
-    width: CAPTURE_BUTTON_RADIUS * 2,
-    height: CAPTURE_BUTTON_RADIUS * 2,
-    borderWidth: 8,
-    borderRadius: CAPTURE_BUTTON_RADIUS,
+  carouselContainer: {
     position: 'absolute',
-    borderLeftColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderTopColor: 'red',
-    borderRightColor: 'red',
-    transform: [{ rotateZ: '45deg' }],
+    left: 0,
+    bottom: 32,
+    height: CAROUSEL_SIZE,
+    width: '100%',
+    justifyContent: 'center',
   },
-  overlay: {
-    width: CAPTURE_BUTTON_RADIUS * 2,
-    height: CAPTURE_BUTTON_RADIUS * 2,
-    borderWidth: 8,
-    borderRadius: CAPTURE_BUTTON_RADIUS,
+  shutterContainer: {
     position: 'absolute',
+    top: 0,
+    left: '50%',
+    width: CAROUSEL_SIZE,
+    height: CAROUSEL_SIZE,
+    transform: [{ translateX: -CAROUSEL_SIZE / 2 }],
   },
-  overlayLessThanHalf: {
-    borderLeftColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderTopColor: 'white',
-    borderRightColor: 'white',
+  shutterButtonBackground: {
+    width: CAROUSEL_SIZE,
+    height: CAROUSEL_SIZE,
+    borderRadius: CAROUSEL_SIZE / 2,
+    borderWidth: RECORD_INDICATOR_STROKE,
+    borderColor: 'white',
+    position: 'absolute',
   },
-  overlayMoreThanHalf: {
-    borderLeftColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderTopColor: 'red',
-    borderRightColor: 'red',
+  shutterButtonRecordingIndicator: {
+    width: CAROUSEL_SIZE,
+    height: CAROUSEL_SIZE,
+    position: 'absolute',
+    top: 0,
+    left: '50%',
+    transform: [{ translateX: -CAROUSEL_SIZE / 2 }, { rotateZ: '-90deg' }],
   },
 });
diff --git a/example/src/new_api/chat_heads/index.tsx b/example/src/new_api/chat_heads/index.tsx
index 502ccda4a9..1f59b90358 100644
--- a/example/src/new_api/chat_heads/index.tsx
+++ b/example/src/new_api/chat_heads/index.tsx
@@ -200,7 +200,6 @@ const IMAGE_SIZE = 80;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
   },
   box: {
     position: 'absolute',
diff --git a/example/src/new_api/overlap/index.tsx b/example/src/new_api/overlap/index.tsx
new file mode 100644
index 0000000000..ffe5f2bd55
--- /dev/null
+++ b/example/src/new_api/overlap/index.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+function Box(props: {
+  color: string;
+  overlap?: boolean;
+  children?: React.ReactNode;
+  elevated: boolean;
+}) {
+  return (
+    <View
+      style={[
+        styles.box,
+        { backgroundColor: props.color },
+        props.overlap ? styles.overlap : {},
+        props.elevated ? styles.elevated : {},
+      ]}>
+      {props.children}
+    </View>
+  );
+}
+
+function OverlapSiblings() {
+  const [elevated, setElevated] = React.useState('');
+
+  const tapRed = Gesture.Tap()
+    .onEnd((_e, success) => {
+      if (success) {
+        setElevated('red');
+      }
+    })
+    .runOnJS(true);
+
+  const tapGreen = Gesture.Tap()
+    .onEnd((_e, success) => {
+      if (success) {
+        setElevated('green');
+      }
+    })
+    .runOnJS(true);
+
+  return (
+    <View style={styles.row}>
+      <Text style={styles.text}>Overlap Siblings</Text>
+      <View style={{ width: 225 }}>
+        <GestureDetector gesture={tapRed}>
+          <Box color="#fa7f7c" elevated={elevated === 'red'} />
+        </GestureDetector>
+        <GestureDetector gesture={tapGreen}>
+          <Box color="#57b495" overlap elevated={elevated === 'green'} />
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
+
+function OverlapParents() {
+  const [elevated, setElevated] = React.useState('');
+
+  const tapRed = Gesture.Tap()
+    .onEnd((_e, success) => {
+      if (success) {
+        setElevated('red');
+      }
+    })
+    .runOnJS(true);
+
+  const tapGreen = Gesture.Tap()
+    .onEnd((_e, success) => {
+      if (success) {
+        setElevated('green');
+      }
+    })
+    .runOnJS(true);
+  return (
+    <View style={styles.row}>
+      <Text style={styles.text}>Overlap Child</Text>
+      <View style={{ width: 225 }}>
+        <GestureDetector gesture={tapRed}>
+          <Box color="#fa7f7c" elevated={elevated === 'red'}>
+            <GestureDetector gesture={tapGreen}>
+              <Box color="#57b495" overlap elevated={elevated === 'green'} />
+            </GestureDetector>
+          </Box>
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
+
+export default function Example() {
+  return (
+    <View style={styles.container}>
+      <OverlapSiblings />
+      <OverlapParents />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  row: {
+    padding: 30,
+    alignItems: 'center',
+    height: 225,
+    marginTop: 48,
+  },
+  box: {
+    width: 150,
+    height: 150,
+  },
+  overlap: {
+    position: 'absolute',
+    left: 75,
+    top: 75,
+  },
+  text: {
+    fontSize: 24,
+    margin: 4,
+  },
+  elevated: {
+    zIndex: 10,
+    elevation: 16,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+  },
+});
diff --git a/example/src/new_api/overlap_parent/index.tsx b/example/src/new_api/overlap_parent/index.tsx
deleted file mode 100644
index a6ce40c57c..0000000000
--- a/example/src/new_api/overlap_parent/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-
-function Box(props: {
-  color: string;
-  overlap?: boolean;
-  children?: React.ReactNode;
-}) {
-  const gesture = Gesture.Tap().onEnd((_e, success) => {
-    if (success) {
-      console.log(props.color);
-    }
-  });
-
-  return (
-    <GestureDetector gesture={gesture}>
-      <View
-        style={[
-          styles.box,
-          { backgroundColor: props.color },
-          props.overlap ? styles.overlap : {},
-        ]}>
-        {props.children}
-      </View>
-    </GestureDetector>
-  );
-}
-
-export default function Example() {
-  return (
-    <View style={styles.home}>
-      <Box color="red">
-        <Box color="green" overlap />
-      </Box>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  home: {
-    width: '100%',
-    height: '100%',
-    alignSelf: 'center',
-    backgroundColor: 'plum',
-  },
-  box: {
-    width: 150,
-    height: 150,
-  },
-  overlap: {
-    position: 'absolute',
-    left: 75,
-    top: 75,
-  },
-});
diff --git a/example/src/new_api/overlap_siblings/index.tsx b/example/src/new_api/overlap_siblings/index.tsx
deleted file mode 100644
index c364912701..0000000000
--- a/example/src/new_api/overlap_siblings/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-
-function Box(props: { color: string; overlap?: boolean }) {
-  return (
-    <View
-      style={[
-        styles.box,
-        { backgroundColor: props.color },
-        props.overlap ? styles.overlap : {},
-      ]}
-    />
-  );
-}
-
-export default function Example() {
-  const tapRed = Gesture.Tap().onEnd((_e, success) => {
-    if (success) {
-      console.log('red');
-    }
-  });
-
-  const tapGreen = Gesture.Tap().onEnd((_e, success) => {
-    if (success) {
-      console.log('green');
-    }
-  });
-
-  return (
-    <View style={styles.home}>
-      <GestureDetector gesture={tapRed}>
-        <Box color="red" />
-      </GestureDetector>
-      <GestureDetector gesture={tapGreen}>
-        <Box color="green" overlap />
-      </GestureDetector>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  home: {
-    width: '100%',
-    height: '100%',
-    alignSelf: 'center',
-    backgroundColor: 'plum',
-  },
-  box: {
-    width: 150,
-    height: 150,
-  },
-  overlap: {
-    position: 'absolute',
-    left: 75,
-    top: 75,
-  },
-});
diff --git a/example/src/new_api/reanimated/index.tsx b/example/src/new_api/reanimated/index.tsx
deleted file mode 100644
index dd3773729d..0000000000
--- a/example/src/new_api/reanimated/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-} from 'react-native-reanimated';
-
-function Ball() {
-  const isPressed = useSharedValue(false);
-  const offset = useSharedValue({ x: 0, y: 0 });
-
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      transform: [
-        { translateX: offset.value.x },
-        { translateY: offset.value.y },
-        { scale: withSpring(isPressed.value ? 1.2 : 1) },
-      ],
-      backgroundColor: isPressed.value ? 'yellow' : 'blue',
-    };
-  });
-
-  const gesture = Gesture.Pan()
-    .onBegin(() => {
-      'worklet';
-      isPressed.value = true;
-    })
-    .onChange((e) => {
-      'worklet';
-      offset.value = {
-        x: e.changeX + offset.value.x,
-        y: e.changeY + offset.value.y,
-      };
-    })
-    .onFinalize(() => {
-      'worklet';
-      isPressed.value = false;
-    });
-
-  return (
-    <GestureDetector gesture={gesture}>
-      <Animated.View style={[styles.ball, animatedStyles]} />
-    </GestureDetector>
-  );
-}
-
-export default function Example() {
-  return (
-    <View style={styles.container}>
-      <Ball />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    borderRadius: 100,
-    backgroundColor: 'blue',
-    alignSelf: 'center',
-  },
-});
diff --git a/example/src/new_api/transformations/index.tsx b/example/src/new_api/transformations/index.tsx
index c4c2d21339..794fbb2bbf 100644
--- a/example/src/new_api/transformations/index.tsx
+++ b/example/src/new_api/transformations/index.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, Image } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
+// @ts-ignore it's an image
+import SIGNET from '../../ListWithHeader/signet.png';
+
 function Photo() {
   const translationX = useSharedValue(0);
   const translationY = useSharedValue(0);
@@ -59,7 +62,9 @@ function Photo() {
 
   return (
     <GestureDetector gesture={gesture}>
-      <Animated.View style={[styles.button, style]} />
+      <Animated.View style={[styles.container, style]}>
+        <Image source={SIGNET} style={styles.image} resizeMode="contain" />
+      </Animated.View>
     </GestureDetector>
   );
 }
@@ -74,15 +79,24 @@ export default function Example() {
 
 const styles = StyleSheet.create({
   home: {
-    width: '100%',
-    height: '100%',
-    alignSelf: 'center',
-    backgroundColor: 'plum',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    width: 240,
+    height: 240,
+    backgroundColor: '#eef0ff',
+    padding: 16,
+    elevation: 8,
+    borderRadius: 48,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
   },
-  button: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'green',
-    alignSelf: 'center',
+  image: {
+    width: 208,
+    height: 208,
   },
 });
diff --git a/example/src/new_api/velocityTest/index.tsx b/example/src/new_api/velocityTest/index.tsx
index 719daa0680..e19849de1a 100644
--- a/example/src/new_api/velocityTest/index.tsx
+++ b/example/src/new_api/velocityTest/index.tsx
@@ -1,10 +1,12 @@
 import { StyleSheet, View } from 'react-native';
 import Animated, {
+  interpolateColor,
   measure,
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
   withDecay,
+  withTiming,
 } from 'react-native-reanimated';
 
 import React from 'react';
@@ -16,13 +18,25 @@ export default function App() {
   const aref = useAnimatedRef<View>();
   const offsetX = useSharedValue(0);
   const offsetY = useSharedValue(0);
+  const isPressed = useSharedValue(false);
+  const colorProgress = useSharedValue(0);
 
   const pan = Gesture.Pan()
+    .onBegin(() => {
+      isPressed.value = true;
+      colorProgress.value = withTiming(1, {
+        duration: 100,
+      });
+    })
     .onChange((event) => {
       offsetX.value += event.changeX;
       offsetY.value += event.changeY;
     })
     .onFinalize((event) => {
+      isPressed.value = false;
+      colorProgress.value = withTiming(0, {
+        duration: 100,
+      });
       // If we can't get view size, just ignore it. Half of the view will be
       // able to go outside the screen
       const size = measure(aref) ?? { width: 0, height: 0 };
@@ -30,6 +44,8 @@ export default function App() {
       offsetX.value = withDecay({
         velocity: event.velocityX,
         clamp: [-size.width / 2 + BOX_SIZE / 2, size.width / 2 - BOX_SIZE / 2],
+        rubberBandEffect: true,
+        rubberBandFactor: 0.75,
       });
 
       offsetY.value = withDecay({
@@ -38,12 +54,27 @@ export default function App() {
           -size.height / 2 + BOX_SIZE / 2,
           size.height / 2 - BOX_SIZE / 2,
         ],
+        rubberBandEffect: true,
+        rubberBandFactor: 0.75,
       });
     });
 
-  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [{ translateX: offsetX.value }, { translateY: offsetY.value }],
-  }));
+  const animatedStyles = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      colorProgress.value,
+      [0, 1],
+      ['#0a2688', '#6fcef5']
+    );
+
+    return {
+      transform: [
+        { translateX: offsetX.value },
+        { translateY: offsetY.value },
+        { scale: withTiming(isPressed.value ? 1.2 : 1, { duration: 100 }) },
+      ],
+      backgroundColor,
+    };
+  });
 
   return (
     <View style={styles.container} ref={aref} collapsable={false}>
@@ -64,8 +95,7 @@ const styles = StyleSheet.create({
   box: {
     width: BOX_SIZE,
     height: BOX_SIZE,
-    backgroundColor: '#001A72',
-    borderRadius: 20,
+    borderRadius: BOX_SIZE / 2,
     //@ts-expect-error
     cursor: 'grab',
   },
diff --git a/example/src/release_tests/combo/index.tsx b/example/src/release_tests/combo/index.tsx
index 4bd98010ae..30ac11b9d0 100644
--- a/example/src/release_tests/combo/index.tsx
+++ b/example/src/release_tests/combo/index.tsx
@@ -63,16 +63,7 @@ class TouchableHighlight extends Component<
   private onStateChange = (event: TapGestureHandlerStateChangeEvent) => {
     const nextGestureHandlerState = event.nativeEvent.state;
     if (this.state.gestureHandlerState !== nextGestureHandlerState) {
-      this.setState({ gestureHandlerState: nextGestureHandlerState }, () => {
-        const pressed = nextGestureHandlerState === State.BEGAN;
-        // @ts-ignore old API
-        // eslint-disable-next-line react/no-string-refs
-        this.refs[CHILD_REF].setNativeProps({
-          style: pressed
-            ? { opacity: this.props.activeOpacity }
-            : { opacity: 1.0 },
-        });
-      });
+      this.setState({ gestureHandlerState: nextGestureHandlerState });
       if (event.nativeEvent.state === State.ACTIVE && this.props.onClick) {
         this.props.onClick();
       }
@@ -86,10 +77,18 @@ class TouchableHighlight extends Component<
     return (
       <TapGestureHandler onHandlerStateChange={this.onStateChange}>
         <View style={[this.props.style, style]}>
-          {/* @ts-ignore not typed properly? */}
-          {React.cloneElement(React.Children.only(this.props.children), {
-            ref: CHILD_REF,
-          })}
+          <View
+            style={{
+              opacity:
+                this.state.gestureHandlerState === State.BEGAN
+                  ? this.props.activeOpacity
+                  : 1,
+            }}>
+            {/* @ts-ignore not typed properly? */}
+            {React.cloneElement(React.Children.only(this.props.children), {
+              ref: CHILD_REF,
+            })}
+          </View>
         </View>
       </TapGestureHandler>
     );
@@ -225,7 +224,6 @@ export const ComboWithRNScroll = () => <Combo ScrollViewComponent={RNScroll} />;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
   },
   rectButton: {
     flex: 1,
diff --git a/example/src/showcase/chatHeads/index.tsx b/example/src/showcase/chatHeads/index.tsx
index 523ae4cbb2..0292e9e4cf 100644
--- a/example/src/showcase/chatHeads/index.tsx
+++ b/example/src/showcase/chatHeads/index.tsx
@@ -213,7 +213,6 @@ const BOX_SIZE = 80;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
   },
   box: {
     position: 'absolute',
diff --git a/example/yarn.lock b/example/yarn.lock
index 5426baa91c..6a4c97a5d6 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -2818,6 +2818,11 @@ bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 bplist-creator@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.1.0.tgz#018a2d1b587f769e379ef5519103730f8963ba1e"
@@ -3332,6 +3337,30 @@ css-in-js-utils@^3.1.0:
   dependencies:
     hyphenate-style-name "^1.0.3"
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
+css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -3533,6 +3562,36 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dotenv-expand@~11.0.6:
   version "11.0.6"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-11.0.6.tgz#f2c840fd924d7c77a94eff98f153331d876882d3"
@@ -3590,6 +3649,11 @@ enquirer@^2.3.5:
     ansi-colors "^4.1.1"
     strip-ansi "^6.0.1"
 
+entities@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 env-editor@^0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/env-editor/-/env-editor-0.4.2.tgz#4e76568d0bd8f5c2b6d314a9412c8fe9aa3ae861"
@@ -4032,6 +4096,13 @@ expo-asset@~10.0.6:
     invariant "^2.2.4"
     md5-file "^3.2.3"
 
+expo-camera@~15.0.9:
+  version "15.0.9"
+  resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-15.0.9.tgz#a6a175638bdd9914aca061c6090001452329fcea"
+  integrity sha512-xH+y8gA/3rNLostIw+z4kDGA+AYzsI9+QYb7G1uCFyxr3SxUGhapz+oMBFDU++vmyo9G7Ax0n52nghqIrNBJxQ==
+  dependencies:
+    invariant "^2.2.4"
+
 expo-constants@~16.0.0:
   version "16.0.1"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-16.0.1.tgz#1285e29c85513c6e88e118289e2baab72596d3f7"
@@ -5965,6 +6036,11 @@ md5hex@^1.0.0:
   resolved "https://registry.yarnpkg.com/md5hex/-/md5hex-1.0.0.tgz#ed74b477a2ee9369f75efee2f08d5915e52a42e8"
   integrity sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ==
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
@@ -6456,6 +6532,13 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nullthrows@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -7116,6 +7199,14 @@ react-native-screens@3.31.1:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
+react-native-svg@15.2.0:
+  version "15.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.2.0.tgz#9561a6b3bd6b44689f437ba13182afee33bd5557"
+  integrity sha512-R0E6IhcJfVLsL0lRmnUSm72QO+mTqcAOM5Jb8FVGxJqX3NfJMlMP0YyvcajZiaRR8CqQUpEoqrY25eyZb006kw==
+  dependencies:
+    css-select "^5.1.0"
+    css-tree "^1.1.3"
+
 react-native-web@~0.19.10:
   version "0.19.11"
   resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.11.tgz#1b96ac3cea9af4e1280fd5fa3b606b471f66edc3"