Avatar integrate with react-native-fast-image

[Alice-space]

Description

It would be great to include react-native-fast-image in image-related components for better image experience

Problem Statement

It would be great to include react-native-fast-image in image-related components for better image experience

Proposed Solution or API

It would be great to include react-native-fast-image in image-related components for better image experience

Alternatives

No response

Additional Information

No response

[Viraj-10]

Hi @Alice-space, Thanks for the suggestion adding react-native-fast-image in native-base would add one more dependency to the library. if you are facing some issues with Avatar please let us know, we will try to fix it ASAP.

[Alice-space]

yeah, but I mean can you provide an interface to render image using custom image component instead of react native default one. @Viraj-10

And thank you for your excellent work. This is a great lib that I use in my app.

[Viraj-10]

Hi @Alice-space, Thanks for the reply we will consider it while planning future sprints.

[focux]

I'd love this as well. It's okay for me if you don't support fast-image out of the box but it'd be good to have an interface to replace the image component for any we want.

Edit:
If anyone wants to replace the react native Image component for FastImage, here is a patch that does it:

diff --git a/src/components/primitives/Image/index.tsx b/src/components/primitives/Image/index.tsx
index edd15a80fee681fc89f5f30a805b4aebf06af322..951e61f2c39ee4189633b6f078f51e645efe8052 100644
--- a/src/components/primitives/Image/index.tsx
+++ b/src/components/primitives/Image/index.tsx
@@ -1,12 +1,13 @@
 import React, { useState, memo, forwardRef, useCallback, useRef } from 'react';
 import { Image as RNImage } from 'react-native';
+import FastImage from "react-native-fast-image";
 import Text from '../Text';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
 import type { IImageProps } from './types';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { makeStyledComponent } from '../../../utils/styled';
 
-const StyledImage = makeStyledComponent(RNImage);
+const StyledImage = makeStyledComponent(FastImage);
 
 const Image = memo(
   forwardRef((props: IImageProps, ref: any) => {

[wernst]

+1 for this, we do some homebrewed caching of images and being able to use our image own components with NB's avatar would be awesome

[joseortiz9]

+1 for this, would be a nice feature. Looking forward to try it!

[frzkn]

Is there any way official way to do this without needing to patch the package?