Improved playground

package.json

@@ -69,7 +69,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "7.53.2",
-    "react-native": "0.76.2",
+    "react-native": "0.76.3",
     "react-native-collapsible": "1.6.2",
     "react-native-date-picker": "5.0.7",
     "react-native-gesture-handler": "~2.20.2",
@@ -80,7 +80,7 @@
     "react-native-permissions": "5.1.0",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "^4.0.0",
+    "react-native-screens": "~4.1.0",
     "react-native-svg": "15.8.0",
     "react-native-toast-message": "2.2.1",
     "react-native-web": "~0.19.13",
@@ -99,11 +99,12 @@
     "@types/react": "~18.3.12",
     "@typescript-eslint/eslint-plugin": "8.15.0",
     "@typescript-eslint/parser": "8.15.0",
+    "ajv": "8.17.1",
     "eslint": "8.57.1",
     "eslint-config-expo": "~8.0.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-lingui": "0.8.0",
-    "eslint-plugin-lodash": "8.0.0",
+    "eslint-plugin-lodash": "7.4.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.0.0",

src/app/playground/_layout.tsx

@@ -17,6 +17,7 @@ export default function PlaygroundLayout() {
       <Stack.Screen name="bottom-sheet" options={{ title: 'Bottom Sheet' }} />
       <Stack.Screen name="accordion" options={{ title: 'Accordion' }} />
       <Stack.Screen name="progress" options={{ title: 'Progress' }} />
+      <Stack.Screen name="image" options={{ title: 'Image' }} />
       <Stack.Screen name="toast" options={{ title: 'Toast' }} />
     </Stack>
   );

src/app/playground/accordion.tsx

@@ -7,15 +7,15 @@ export default function Accordions() {
       <Stack axis="y" spacing="2xl">
         <Stack axis="y" spacing="small">
           <Text variant="headingS">Accordion</Text>
-          <Accordion initialOpen={true} title="Accordion Heading">
+          <Accordion initialOpen title="Accordion Heading">
             <AccordionContent />
           </Accordion>
         </Stack>
 
         <Stack axis="y" spacing="small">
           <Text variant="headingS">Accordion with icon</Text>
           <Accordion
-            initialOpen={true}
+            initialOpen
             title="Accordion Heading"
             icon="checkCircle"
             iconColor="success"

src/app/playground/image.tsx

@@ -0,0 +1,43 @@
+import { Grid, Stack, Text, Image as UiImage } from '~components/uikit';
+import { styled } from '~styles';
+
+const photos = [
+  'https://tinyurl.com/57ssptjn',
+  'https://tinyurl.com/4mew8zn6',
+  'https://tinyurl.com/5dkxbcjc',
+];
+
+export default function Image() {
+  return (
+    <Wrapper>
+      <Stack axis="y" spacing="large">
+        <Stack axis="y" spacing="regular">
+          <Text variant="headingS">Images</Text>
+
+          <Grid spacing="regular" justify="center">
+            {photos.map((photo, index) => (
+              <Img
+                key={index}
+                source={{ uri: photo }}
+                autoSize={{ width: 300 }}
+                accessibilityLabel={`Flower ${index + 1}`}
+              />
+            ))}
+          </Grid>
+        </Stack>
+      </Stack>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled('ScrollView', {
+  flex: 1,
+}).attrs((p) => ({
+  contentContainerStyle: {
+    padding: p.theme.space.regular,
+  },
+}));
+
+const Img = styled(UiImage, {
+  borderRadius: '$regular',
+});

src/app/playground/index.tsx

@@ -14,6 +14,7 @@ export default function PlaygroundPage() {
     { screen: 'playground/layout', label: 'Layout' },
     { screen: 'playground/accordion', label: 'Accordion' },
     { screen: 'playground/progress', label: 'Progress' },
+    { screen: 'playground/image', label: 'Image' },
     { screen: 'playground/toast', label: 'Toast' },
   ];
 

src/app/playground/progress.tsx

@@ -11,8 +11,8 @@ export default function Progress() {
           <Text variant="headingS">Progress bar</Text>
 
           <Stack axis="y" spacing="regular">
-            {Array.from({ length: totalSteps }).map((_, i) => (
-              <ProgressBar key={i} step={i + 1} totalSteps={totalSteps} />
+            {Array.from({ length: totalSteps + 1 }).map((_, i) => (
+              <ProgressBar key={i} step={i} totalSteps={totalSteps} />
             ))}
           </Stack>
         </Stack>

src/components/uikit/ProgressBar.tsx

@@ -1,11 +1,17 @@
-import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
 import { styled } from '~styles';
 
 type Props = {
   step: number;
   totalSteps: number;
   height?: number;
+  animated?: boolean;
 };
 
 /**
@@ -14,18 +20,31 @@ type Props = {
  * @param {Object} props - The component props.
  * @param {number} props.step - The current step of the form.
  * @param {number} props.totalSteps - The total number of steps in the form.
+ * @param {number} [props.height=12] - The height of the progress bar.
+ * @param {boolean} [props.animated=false] - Whether the progress bar should animate.
  * @returns {JSX.Element} - The rendered component.
  */
 export function ProgressBar({
   step,
   totalSteps,
   height = 12,
+  animated = true,
 }: Props): JSX.Element {
   const progress = Math.min(Math.max((step / totalSteps) * 100, 0), 100);
 
-  if (step === 0) {
-    return <View />;
-  }
+  const progressAnim = useSharedValue(0);
+
+  useDerivedValue(() => {
+    progressAnim.value = withTiming(progress, {
+      duration: animated ? 200 : 0,
+    });
+  }, [step]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progressAnim.value}%`,
+    };
+  });
 
   return (
     <ProgressContainer
@@ -34,7 +53,7 @@ export function ProgressBar({
       accessibilityRole="progressbar"
       accessibilityValue={{ now: step, min: 0, max: totalSteps }}
     >
-      <Progress style={{ height, width: `${progress}%` }} />
+      <AnimatedProgress style={[{ height }, animatedStyle]} />
     </ProgressContainer>
   );
 }
@@ -48,3 +67,5 @@ const Progress = styled('View', {
   borderRadius: '$full',
   backgroundColor: '$primary',
 });
+
+const AnimatedProgress = Animated.createAnimatedComponent(Progress);

src/components/uikit/inputs/TextInput.tsx

@@ -113,7 +113,6 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
                 color="error"
                 accessibilityLabel={_(msg`Required field indicator`)}
                 accessibilityHint={_(msg`This field is marked as required`)}
-
                 // eslint-disable-next-line lingui/no-unlocalized-strings
               >
                 *