A spiritual successor to `react-native-fast-image` and a drop-in component for images in React Native.
npm install react-native-flash-image> ⚠️ 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.
> 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).
``sh`
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:`
diff`
# 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:`
diff`
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:
`diff`
#include
#include
+ #include
2. Add component descriptor to a shared provider registry:
`diff
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
return providerRegistry;
}
`
`js
import { FlashImage } from "react-native-flash-image";
``
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT