chore(expo): enable new architecture

Author: mtthp

.vscode/settings.json

@@ -18,5 +18,6 @@
   "tailwindCSS.experimental.classRegex": [
       "tw`([^`]*)"
   ],
+  "tailwindCSS.classFunctions": ["tw", "tw.color", "tw.style"],
   "svg.preview.background": "transparent"
 }

app.json

@@ -90,7 +90,7 @@
       "supportsTablet": true
     },
     "name": "Le Poulailler",
-    "newArchEnabled": false,
+    "newArchEnabled": true,
     "orientation": "portrait",
     "owner": "coworking-metz",
     "packagerOpts": {

src/app/(public)/(settings)/settings.tsx

@@ -25,7 +25,6 @@ import tw, { useDeviceContext } from 'twrnc';
 import AppBlurView from '@/components/AppBlurView';
 import AppText from '@/components/AppText';
 import ErrorBadge from '@/components/ErrorBagde';
-import ErrorChip from '@/components/ErrorChip';
 import ProfilePicture from '@/components/Home/ProfilePicture';
 import SectionTitle from '@/components/Layout/SectionTitle';
 import ServiceRow from '@/components/Layout/ServiceRow';

src/app/(public)/onboarding.tsx

@@ -90,7 +90,7 @@ const Onboarding = () => {
       'worklet';
       const translateX = interpolate(value, [-1, 0, 1], [-layoutWidth, 0, 0]);
 
-      const zIndex = interpolate(value, [-1, 0, 1], [300, 0, -300]);
+      const zIndex = Math.round(interpolate(value, [-1, 0, 1], [300, 0, -300]));
       const opacity = interpolate(value, [-1, 0, 1], [0, 1, 0]);
 
       const scale = interpolate(value, [-1, 0, 1], [1, 1, 0.8]);

src/components/Onboarding/Step.tsx

@@ -20,7 +20,7 @@ const Step = ({
   const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
 
   const maskStyle = useAnimatedStyle(() => {
-    const zIndex = interpolate(animationValue.value, [-1, 0, 1], [300, 0, -300]);
+    const zIndex = Math.round(interpolate(animationValue.value, [-1, 0, 1], [300, 0, -300]));
 
     const maskBackgroundColor = interpolateColor(
       animationValue.value,