### Setup and Run React Native Fast Image Example App Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/docs/development.md This snippet provides a step-by-step guide to prepare the development environment and execute the example application for `react-native-fast-image`. It covers essential prerequisites like Node.js and Java versions, Yarn setup, dependency installation, and platform-specific commands for Android and iOS. ```bash Make sure you’re running on node 18+ and Java 21 # This package Using Yarn 3.6.4 corepack enable # Check (Should return 3.6.4) yarn -v # If version listed is not 3.6.4 corepack prepare yarn@3.6.4 --activate # In the repo root folder. # Install dependencies. yarn # Android yarn example android # iOS # Install pod dependency cd ReactNativeFastImageExample/ios bundle install pod install # Go to root folder cd ../.. yarn example ios ``` -------------------------------- ### Start Example Server Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Navigates to the example server directory, installs its dependencies, and then starts the local development server. ```bash cd ReactNativeFastImageExampleServer yarn yarn start ``` -------------------------------- ### Start React Native Metro Bundler Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/ReactNativeFastImageExample/README.md Commands to initiate the Metro JavaScript bundler, which is a crucial step for serving your React Native application's JavaScript code. This process should be run from the root directory of your project. ```bash # using npm npm start # OR using Yarn yarn start ``` -------------------------------- ### Run Example App (Android) Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Navigates to the example application directory, installs its dependencies, and then runs the app on an Android emulator or device. ```bash cd ReactNativeFastImageExample yarn yarn android ``` -------------------------------- ### Run Example App (iOS) Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Navigates to the iOS specific directory, installs Ruby dependencies via Bundler, installs CocoaPods dependencies, returns to the main example directory, and then runs the app on an iOS simulator or device. ```bash cd ios bundle install bundle exec pod install cd .. yarn ios ``` -------------------------------- ### Run React Native App on iOS Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/ReactNativeFastImageExample/README.md Commands to build and launch the React Native application on an iOS simulator or a connected iOS device. It is required that the Metro Bundler is actively running in a separate terminal. ```bash # using npm npm run ios # OR using Yarn yarn ios ``` -------------------------------- ### Run React Native App on Android Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/ReactNativeFastImageExample/README.md Commands to build and launch the React Native application on an Android emulator or a connected Android device. Ensure the Metro Bundler is already running in a separate terminal session. ```bash # using npm npm run android # OR using Yarn yarn android ``` -------------------------------- ### Verify Yarn Version Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Checks the installed Yarn package manager version to ensure it matches the project's requirements (e.g., 3.6.4). ```bash yarn -v ``` -------------------------------- ### Common React Native Troubleshooting Shell Commands Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/docs/troubleshooting.md A collection of common shell commands used to resolve various issues in React Native projects. These steps often help in fixing build errors, dependency problems, and caching issues by cleaning up project artifacts and reinstalling components. ```Shell rm -rf node_modules && yarn ``` ```Shell watchman watch-del-all ``` ```Shell react-native start --reset-cache ``` ```Shell rm -rf ios/build ``` ```Shell cd ios && pod repo update ``` ```Shell cd ios && pod install ``` -------------------------------- ### Basic Usage of FastImage Component in React Native Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md An example demonstrating how to import and use the FastImage component in a React Native application. It shows how to set the image source, including URI, headers for authorization, and priority, as well as resize mode. This snippet illustrates a typical image display scenario. ```jsx import FastImage from "@d11/react-native-fast-image"; import * as React from "react"; const YourImage = () => ( ); ``` -------------------------------- ### Install FastImage in React Native Project Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md Instructions for adding the FastImage library to your React Native project using either Yarn or npm. This step is essential before using the component in your application. Requires React Native 0.60.0 or higher. ```bash yarn add @d11/react-native-fast-image cd ios && pod install ``` ```bash npm install @d11/react-native-fast-image cd ios && pod install ``` -------------------------------- ### Run Project Tests Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Executes the project's test suite to verify that changes haven't introduced regressions and that new features work as expected. ```bash yarn test ``` -------------------------------- ### Clone Forked Repository Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Clones the user's forked repository from GitHub to the local machine and navigates into the project directory. ```bash git clone https://github.com/YOUR_USERNAME/react-native-fast-image.git cd react-native-fast-image ``` -------------------------------- ### Create New Feature Branch Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Creates and switches to a new Git branch, typically named after the feature being developed, to isolate changes from the main branch. ```bash git checkout -b feature/your-feature-name ``` -------------------------------- ### Run Code Linter Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Executes the project's linter to check for code style violations and potential errors, ensuring code consistency. ```bash yarn lint ``` -------------------------------- ### FastImage Component Properties Reference Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md Comprehensive documentation of all configurable properties for the `FastImage` React Native component, including details on image source, caching, priority, resize modes, and various lifecycle callbacks. ```APIDOC FastImage Properties: source: object Description: Source for the remote image. Accepts an object with sub-properties like `uri`, `headers`, `priority`, and `cache`. Properties: uri: string Description: The URL to load the image from. e.g., "https://unsplash.it/400/400?image=1". headers: object Description: Headers to load the image with, e.g., { Authorization: "someAuthToken" }. priority: FastImage.priority Description: Load priority. Values: - FastImage.priority.low - FastImage.priority.normal (Default) - FastImage.priority.high cache: FastImage.cacheControl Description: Cache control. Values: - FastImage.cacheControl.immutable (Default) - FastImage.cacheControl.web - FastImage.cacheControl.cacheOnly defaultSource: number Description: An asset loaded with `require()` or `import`. Note: on Android, `defaultSource` does not work in debug mode. resizeMode: FastImage.resizeMode Description: Resize mode. Values: - FastImage.resizeMode.contain - FastImage.resizeMode.cover (Default) - FastImage.resizeMode.stretch - FastImage.resizeMode.center onLoadStart: function Description: Callback when the image starts to load. onProgress: (event: OnProgressEvent) => void Description: Callback when the image is loading, with `event.nativeEvent.loaded` and `event.nativeEvent.total` bytes. onLoad: (event: OnLoadEvent) => void Description: Callback when the image is successfully loaded, with `event.nativeEvent.width` and `event.nativeEvent.height` values. onError: function Description: Callback when an error occurs in loading the image or the source is malformed (empty or `null`). onLoadEnd: function Description: Callback when the image finishes loading, regardless of success or failure. style: ViewStyle Description: Style for the image component, supports `borderRadius`. fallback: boolean Description: If `true`, it will fall back to using `Image`. This still applies styles and layout as with `FastImage`. tintColor: number or string Description: Color tint for all non-transparent pixels in the image. ``` -------------------------------- ### Add Upstream Remote Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/CONTRIBUTING.md Adds the original project repository as an 'upstream' remote, allowing for easy synchronization with the main project. ```bash git remote add upstream https://github.com/dream-sports-labs/react-native-fast-image.git ``` -------------------------------- ### Proposed Preload API Signature for React Native Fast Image Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/docs/roadmap.md A proposed signature for the `preload` method, including parameters for an array of image URIs and other options, and returning a Promise that resolves with an array of objects containing the cache path for each image. ```APIDOC .preload(images: {uri, ...otherOptions}[]): Promise<[{path: string}]> ``` -------------------------------- ### Define Project-Wide Android Build Properties in Gradle Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/docs/other-android-versions.md This Groovy code snippet demonstrates how to define project-wide properties within your root `build.gradle` file. These properties (e.g., `compileSdkVersion`, `targetSdkVersion`, `minSdkVersion`) allow for centralized management of Android SDK and library versions, which is recommended for consistency across modules and libraries like React Native Fast Image. ```groovy buildscript {...} allprojects {...} /** + Project-wide Gradle configuration properties */ ext { // You can use any of these to change project-wide versions: // compileSdkVersion = 26 // targetSdkVersion = 26 // minSdkVersion = 16 // buildToolsVersion = "26.0.3" // supportLibVersion = "27.1.1" // glideVersion = "4.7.1" } ``` -------------------------------- ### FastImage Static Method: preload Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md Preloads images into the cache for faster display when they are subsequently rendered. Accepts an array of image source objects. ```APIDOC Method: FastImage.preload(sources: object[]) Description: Preloads images for faster display when they are rendered. Parameters: sources: object[] - An array of image source objects, e.g., [{ uri: "https://unsplash.it/400/400?image=1" }] Returns: void ``` ```javascript FastImage.preload([{ uri: "https://unsplash.it/400/400?image=1" }]) ``` -------------------------------- ### ProGuard Configuration for FastImage and Glide Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md ProGuard rules necessary for projects using FastImage, especially when Glide is involved, to prevent code obfuscation from breaking the image loading functionality. These rules ensure that essential classes and methods from FastImage and Glide are preserved during the build process. ```proguard -keep public class com.dylanvann.fastimage.* {*;} -keep public class com.dylanvann.fastimage.** {*;} -keep public class * implements com.bumptech.glide.module.GlideModule -keep public class * extends com.bumptech.glide.module.AppGlideModule -keep public enum com.bumptech.glide.load.ImageHeaderParser$** { **[] $VALUES; public *; } ``` -------------------------------- ### FastImage Static Method: clearDiskCache Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md Clears all images from the disk cache, useful for managing storage space. ```APIDOC Method: FastImage.clearDiskCache(): Promise Description: Clears all images from the disk cache. Returns: Promise ``` -------------------------------- ### FastImage Component Property: testID Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md An optional string ID for testing purposes, commonly used with `react-test-renderer`. ```APIDOC Property: testID Type: string Description: Optional ID for testing, such as with react-test-renderer. ``` -------------------------------- ### FastImage Static Method: clearMemoryCache Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/README.md Clears all images from the in-memory cache, freeing up device memory. ```APIDOC Method: FastImage.clearMemoryCache(): Promise Description: Clears all images from the memory cache. Returns: Promise ``` -------------------------------- ### Exclude AppGlideModule in Android Gradle Build Source: https://github.com/dream-sports-labs/react-native-fast-image/blob/main/docs/app-glide-module.md This Gradle configuration snippet should be added to your `android/build.gradle` file. It sets a project extension property `excludeAppGlideModule` to `true`, which signals the `@d11/react-native-fast-image` package to prevent its `AppGlideModule` from being included during the build process. This is necessary when your application already uses Glide with its own `AppGlideModule` to avoid conflicts. ```gradle project.ext { excludeAppGlideModule = true } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.