Feat(v2): Image component

apps/docs/pages/docs/v2/Components/image.en-US.mdx

@@ -0,0 +1,31 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+
+# Image
+
+Wrapper around `Image` component from `react-native`, it accepts every props from react native `Image` component.
+
+## Import
+
+```js
+import { Image } from "@ficus-ui/native";
+```
+
+## Usage
+
+<CodeEditor code={`<Image
+  h={200}
+  w={300}
+  borderRadius={10}
+  source={{
+    uri:
+      'https://www.picturethisai.com/wiki-image/1080/153400456440184865.jpeg',
+  }}
+/>`} />
+
+## Props
+
+Extends every `Box` and from react native `Image` component : https://reactnative.dev/docs/image#props

apps/examples/app/components-v2/Box.tsx

@@ -232,14 +232,14 @@ const BoxComponent = () => {
         </ExampleSection>
 
         <ExampleSection name="background image">
-          <Box
-            as="Image"
+          <Box           
             mt="sm"
             borderRadius="md"
             h={150}
-            source={{
+            bgImg={{
               uri: 'https://venngage-wordpress.s3.amazonaws.com/uploads/2018/09/Monochrome-Type-Simple-Background-Image.jpg',
             }}
+
           />
         </ExampleSection>
       </ScrollBox>

apps/examples/app/components-v2/Image.tsx

@@ -0,0 +1,24 @@
+import { Box, Image, SafeAreaBox, Text } from '@ficus-ui/native';
+
+
+const ImageComponent = () => {
+  return (
+    <SafeAreaBox style={{ flex: 1 }}>
+      <Text mx="xl" fontSize="4xl">
+        Image component
+      </Text>
+      <Box mx="xl" mt="lg">
+        <Image
+          h={200}
+          w={300}
+          borderRadius={10}
+          source={{
+            uri: 'https://www.picturethisai.com/wiki-image/1080/153400456440184865.jpeg',
+          }}
+        />
+      </Box>
+    </SafeAreaBox>
+  );
+};
+
+export default ImageComponent;

apps/examples/app/items-v2.ts

@@ -10,6 +10,7 @@ import BadgeComponent from './components-v2/Badge';
 import TouchableHighlightComponent from './components-v2/TouchableHighlight';
 import TouchableOpacityComponent from './components-v2/TouchableOpacity';
 import TouchableWithoutFeedbackComponent from './components-v2/TouchableWithoutFeedback';
+import ImageComponent from '@/app/components-v2/Image';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -29,4 +30,5 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'TouchableHighlight', onScreenName: 'TouchableHighlight', component: TouchableHighlightComponent },
   { navigationPath: 'TouchableOpacity', onScreenName: 'TouchableOpacity', component: TouchableOpacityComponent },
   { navigationPath: 'TouchableWithoutFeedback', onScreenName: 'TouchableWithoutFeedback', component: TouchableWithoutFeedbackComponent },
+  { navigationPath: 'Image', onScreenName: 'Image', component: ImageComponent },
 ];

packages/components/src/box/index.tsx

@@ -1,12 +1,27 @@
-import { type NativeFicusProps, ficus } from '../system';
+import { ImageSourcePropType } from 'react-native';
 
-// TODO: Improve Box as Image API from V1
-export interface BoxProps extends NativeFicusProps<'View'> {}
+import { type NativeFicusProps, ficus, forwardRef } from '../system';
 
-export const Box = ficus('View');
+interface BoxOptions {
+  bgImg?: ImageSourcePropType;
+  bgMode?: 'contain' | 'cover' | 'stretch' | 'repeat';
+}
 
-export const Circle = ficus('View', {
-  baseStyle: {
-    borderRadius: 'full',
-  },
+export interface BoxProps extends NativeFicusProps<'View'>, BoxOptions {}
+
+/**
+ * Boxs help you easily create flexible and automatically distributed layouts
+ *
+ * You can Box elements in the horizontal or vertical direction,
+ * and apply a space or/and divider between each element.
+ *
+ */
+export const Box = forwardRef<BoxProps, 'View'>((props, ref) => {
+  const { bgImg, bgMode, ...rest } = props;
+  if (bgImg) {
+    return (
+      <ficus.Image ref={ref} source={bgImg} resizeMode={bgMode} {...rest} />
+    );
+  }
+  return <ficus.View ref={ref} {...rest} />;
 });

packages/components/src/flex/index.tsx

@@ -1,6 +1,5 @@
 import { type NativeFicusProps, ficus } from '../system';
 
-// TODO: Improve Box as Image API from V1
 export interface FlexProps extends NativeFicusProps<'View'> {}
 
 export const Flex = ficus('View', {

packages/components/src/image/image.spec.tsx

@@ -0,0 +1,30 @@
+import { renderWithTheme as render } from '@test-utils';
+
+import { Image } from '.';
+
+jest.mock('react-native-toast-message', () => 'Toast');
+
+describe('ImageComponent', () => {
+  it('renders correctly with given source and alt text', () => {
+    const testSource = { uri: 'https://example.com/test-image.jpg' };
+    const testAlt = 'Test Image';
+
+    const { getByLabelText } = render(
+      <Image testID="image-component" source={testSource} alt={testAlt} />
+    );
+
+    const image = getByLabelText(testAlt);
+    expect(image).toBeTruthy();
+  });
+
+  it('applies the correct image source', () => {
+    const testSource = { uri: 'https://example.com/test-image.jpg' };
+
+    const { getByTestId } = render(
+      <Image testID="image-component" source={testSource} alt="Sample Image" />
+    );
+
+    const image = getByTestId('image-component');
+    expect(image.props.source).toEqual(testSource);
+  });
+});

packages/components/src/image/index.tsx

@@ -0,0 +1,5 @@
+import { type NativeFicusProps, ficus } from '../system';
+
+export interface ImageProps extends NativeFicusProps<'Image'> {}
+
+export const Image = ficus('Image');

packages/components/src/index.ts

@@ -7,5 +7,6 @@ export * from './safe-area-box';
 export * from './center';
 export * from './badge';
 export * from './touchables';
+export * from './image';
 
 export { ThemeProvider } from '@ficus-ui/theme';