Update examples (#2919)

## Description

- moves `New Api` section to the top
- unifies white-ish backgrounds across examples
- unifies `Velocity Test` with `Simple Reanimated example`
- unifies `Overlap Parent` and `OverlapSiblings`
- updates `Transformations`
- updates `Camera` since the camera was missing there 
- updates `Pan Responder` to not use `setNativeProps` which was removed
on RN web

## Test plan

Check the updated examples

---------

Co-authored-by: Michał Bert <[email protected]>
Co-authored-by: Ignacy Łątka <[email protected]>

Author: 3 people

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',

example/app.json

@@ -28,6 +28,12 @@
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow RNGH example to access your camera"
+        }
+      ],
       [
         "expo-font",
         {

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": {

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',

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,

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,

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.
 

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',
   },
 });

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,