Update examples

example/App.tsx

@@ -55,11 +55,9 @@
 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 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 @@
     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 @@
       { 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 @@
             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
@@ -277,7 +275,7 @@
         renderSectionHeader={({ section: { sectionTitle } }) => (
           <Text style={styles.sectionTitle}>{sectionTitle}</Text>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
     </SafeAreaView>
   );
@@ -335,7 +333,7 @@
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f8f9ff',
+    backgroundColor: COLORS.offWhite,
   },
   sectionTitle: {
     ...Platform.select({
@@ -349,7 +347,7 @@
       },
     }),
     padding: 16,
-    backgroundColor: '#f8f9ff',
+    backgroundColor: COLORS.offWhite,
   },
   list: {},
   separator: {
@@ -358,7 +356,8 @@
   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 @@
 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 @@
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF',
   },
 });

example/src/new_api/bottom_sheet/index.tsx

@@ -53,7 +53,7 @@
       return;
     }
 
     for (const snapPoint of SNAP_POINTS_FROM_TOP) {
       const distFromSnap = Math.abs(snapPoint - endOffsetY);
       if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
         destSnapPoint = snapPoint;
@@ -142,7 +142,6 @@
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#eef',
   },
   header: {
     height: HEADER_HEIGTH,