A cross-platform, performant image component for React Native and Expo with Web support
The "expo-image" npm package serves as a robust solution for developers looking to enhance image components in their React Native and Expo applications, with added support for web environments. This module is specifically designed to optimize image handling, making it a vital tool for creating seamless, high-performance applications across multiple platforms. One of the standout features of "expo-image" is its ability to provide enhanced performance and additional capabilities beyond the standard React Native Image component. This includes better handling of image caching and a more efficient rendering lifecycle, which are crucial for mobile applications where performance and quick load times are essential.
To get started with using "expo-image" in your projects, you can simply run the command 'npm install expo-image'. This command installs the package and integrates it into your application, allowing you to leverage its advanced features with minimal setup. Once installed, "expo-image" can be used to replace the default Image component in React Native, offering a more performant and feature-rich alternative. Developers can thus focus more on crafting their application’s functionality and user experience, rather than worrying about the complexities of image optimization.
The benefits of using "expo-image" extend beyond just performance enhancements. This package also supports a wide range of image formats and provides greater control over how images are displayed and managed within an application. Additionally, "expo-image" is maintained by the Expo team, ensuring it stays up-to-date with the latest developments in the React Native framework and the JavaScript ecosystem at large. This ongoing support makes "expo-image" a reliable choice for developers looking to build robust, high-quality applications that stand the test of time and technology advancements.
Core dependencies of this npm package and its dev dependencies.
eslint, jsc-android, node-gyp, prettier, yarn-deduplicate
A README file for the expo-image code repository. View Code
A cross-platform, performant image component for React Native and Expo.
object-fit
and object-position
properties (see contentFit
and contentPosition
props)SDWebImage
and Glide
under the hoodFormat | Android | iOS | Web |
---|---|---|---|
WebP | ✅ | ✅ | ✅ |
PNG / APNG | ✅ | ✅ | ✅ |
AVIF | ✅ | ✅ | ⏳ ~87% adoption |
HEIC | ✅ | ✅ | ❌ not adopted yet |
JPEG | ✅ | ✅ | ✅ |
GIF | ✅ | ✅ | ✅ |
SVG | ✅ | ✅ | ✅ |
ICO | ✅ | ✅ | ✅ |
ICNS | ❌ | ✅ | ❌ |
For managed Expo projects, follow the installation instructions in the API documentation for the latest stable release.
For bare React Native projects, you must ensure that you have installed and configured the expo
package before continuing.
npx expo install expo-image
Run npx pod-install
after installing the npm package.
No additional setup necessary.
Contributions are very welcome! Please refer to guidelines described in the contributing guide.