react-native-flash-image

🦸‍♂️ FlashImage

⚠️ CAUTION: This package is still a work-in-progress and isn't recommended for production use as of yet.

FlashImage is a spiritual successor to @DylanVann's react-native-fast-image package.

It is built with the new React Native architecture in mind and mostly acts as a drop-in replacement for React Native's standard Image component. However, availability of props may vary and some features such as class methods are going to be missing.

Under the hood, it uses Nuke on iOS and Coil on Android.

Installation

react-native-flash-image will only work with react-native@0.69 and higher. Older versions are not supported and won't work due to the required changes in React Native core (#33743).

npm i react-native-flash-image
npx pod-install

Autolinking on Android doesn’t work with the new architecture out of the box, therefore you need to do the following steps:

1. Open the android/app/src/main/jni/Android.mk file and update the file as it follows:

       # If you wish to add a custom TurboModule or Fabric component in your app you
       # will have to include the following autogenerated makefile.
       # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
   
   +   include $(NODE_MODULES_DIR)/react-native-flash-image/android/build/generated/source/codegen/jni/Android.mk
       include $(CLEAR_VARS)

2. In the same file above, go to the LOCAL_SHARED_LIBRARIES setting and add the following line:

       libreact_codegen_rncore \
   +   libreact_codegen_rnflashimage \
       libreact_debug \

3. Open the android/app/src/main/jni/MainComponentsRegistry.cpp file and update the file as it follows:

   1. Add the import:

          #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
          #include <react/renderer/components/rncore/ComponentDescriptors.h>
      +   #include <react/renderer/components/rnflashimage/ComponentDescriptors.h>

   2. Add component descriptor to a shared provider registry:

          auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
      
          // Custom Fabric Components go here. You can register custom
          // components coming from your App or from 3rd party libraries here.
      -   //
      -   // providerRegistry->add(concreteComponentDescriptorProvider<
      -   //        AocViewerComponentDescriptor>());
      + 
      +   providerRegistry->add(concreteComponentDescriptorProvider<FlashImageViewComponentDescriptor>());
          return providerRegistry;
      }

Usage

import { FlashImage } from "react-native-flash-image";

<FlashImage source="https://loremflickr.com/320/240" />

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT