A react native cached, animated, and auto chooses the best-resolution image for the current screen.

Overview

A react native cached, animated and auto chooses the best-resolution image for the current screen.

This is a simple react native image component that

  • enable image caching (save to cache directory).
  • add loading animation while the image is loading.
  • add error placeholder if image loading has any errors.
  • also wrap the https://github.com/expo/react-native-responsive-image so it can choose the correct image size for loading

Installation

yarn add @ngnclht/rn-cached-image

Import it with:

import RNCachedImage from ' @ngnclht/rn-cached-image';

Demo: Loading animation and caching

Loading animation and caching

Demo: Loading failed:

Error placeholder

Usage

RNCachedImage accepts the same props as Image, and some new props. For multiple sources, we have a new prop called sources. The sources prop is an object whose keys are pixel ratios (that is, screen scales like "2" or "3"). Its values are Image sources to display on screens with the respective pixel ratio.

Multiple sources:

<RNCachedImage
  sources={{
    1: { uri: 'https://example.com/icon-1x.png' },
    2: { uri: 'https://example.com/icon-2x.png' },
    3: { uri: 'https://example.com/icon-3x.png' },
  }}
  // (optional) force ResponsiveImage to load a specified pixel ratio
  preferredPixelRatio={2}
/>

Caching

  <RNCachedImage
    style={{ 
        // some style
    }}
    animationOnLoadEndType='fade' // we support 'shrink', 'explode' and 'fade'
    shouldCachedImage={true} //  to enable caching or not
    maxAgeInHours={72} // max age of the cache file, by default it is 72 hours (3 days)
    source={{ uri: localSource }} // if you don't like the multiple sources, just use this prop as usual 
    sources={{
        1: { uri: 'https://example.com/icon-1x.png' },
        2: { uri: 'https://example.com/icon-2x.png' },
        3: { uri: 'https://example.com/icon-3x.png' },
    }}
    animationWhileLoading={true} // enable animation while loading
    reuseView={true} // allow update the view
    placeholderColor={"#e0e5e5"} // animation's color for using while it is loading
    errorPlaceholderSource={require('./your-image.png')} // the image will be used to show user when image loading failed
  />
You might also like...

Simple Javascript implementation of the k-means algorithm, for node.js and the browser

#kMeans.js Simple Javascript implementation of the k-means algorithm, for node.js and the browser ##Installation npm install kmeans-js ##Example (JS)

Aug 19, 2022

Unsupervised machine learning with multivariate Gaussian mixture model which supports both offline data and real-time data stream.

Gaussian Mixture Model Unsupervised machine learning with multivariate Gaussian mixture model which supports both offline data and real-time data stre

Oct 7, 2022

Clustering algorithms implemented in Javascript for Node.js and the browser

Clustering.js ####Clustering algorithms implemented in Javascript for Node.js and the browser Examples License Copyright (c) 2013 Emil Bay github@tixz

Aug 19, 2022

An NLP library for building bots, with entity extraction, sentiment analysis, automatic language identify, and so more

An NLP library for building bots, with entity extraction, sentiment analysis, automatic language identify, and so more

NLP.js If you're looking for the version 3 docs, you can find them here Version 3 "NLP.js" is a general natural language utility for nodejs. Currently

Dec 29, 2022

Fork, customize and deploy your Candy Machine v2 super quickly

Fork, customize and deploy your Candy Machine v2 super quickly

Candy Machine V2 Frontend This is a barebones implementation of Candy Machine V2 frontend, intended for users who want to quickly get started selling

Oct 24, 2022

Super-Resolution-CNN - web server for super-resolution CNN

Super-Resolution-CNN - web server for super-resolution CNN

Web Server for Image Super-Resolution This project showcases the Super-Resolution CNN (SRCNN). The model is pretrained following this tutorial. The or

Jan 3, 2022

local storage wrapper for both react-native and browser. Support size controlling, auto expiring, remote data auto syncing and getting batch data in one query.

react-native-storage This is a local storage wrapper for both react native apps (using AsyncStorage) and web apps (using localStorage). ES6 syntax, pr

Dec 16, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

Jan 4, 2023

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | 简体中文 Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

Dec 30, 2022

Adds links to Discogs pages from various sites. Auto search for music on torrent and other sites. Does multi auto-search on Artist/Discography pages. Auto search local HDDs/filelists using Voidtools Everything search engine.

Discogs Scout: Adds links to Discogs pages from various sites. Auto search for music on torrent and other sites. Does multi auto-search on Artist/Disc

Dec 27, 2022

A remote nodejs Cached sqlite Database Server, for you to have your perfect MAP Cache Saved and useable remotely.

A remote nodejs Cached sqlite Database Server, for you to have your perfect MAP Cache Saved and useable remotely.

A remote nodejs Cached sqlite Database Server, for you to have your perfect MAP Cache Saved and useable remotely. Easy Server and Client Creations, fast, stores the Cache before stopping and restores it again! it uses ENMAP

Dec 18, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

Jan 21, 2022

A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YAML support designed to be easy to set up and use

A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YAML support designed to be easy to set up and use

About A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YML

Dec 28, 2022

A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch screens with a resolution of 1024x600 connected to a Raspberry Pi.

EDStatusPanel A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch scr

Oct 4, 2022

IAM policy actions autocomplete, documentation & wildcard resolution

IAM policy actions autocomplete, documentation & wildcard resolution

IAM Legend AWS IAM actions autocomplete, documentation and wildcard resolution for Visual Studio Code. Supports Serverless Framework, AWS SAM, CloudFo

Dec 28, 2022
Releases(1.0.1)
Owner
Nam Nguyen
I am unstoppable, I am writing Typescript, Elixir!
Nam Nguyen
JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js

face-api.js JavaScript face recognition API for the browser and nodejs implemented on top of tensorflow.js core (tensorflow/tfjs-core) Click me for Li

Vincent Mühler 14.6k Jan 2, 2023
architecture-free neural network library for node.js and the browser

Synaptic Important: Synaptic 2.x is in stage of discussion now! Feel free to participate Synaptic is a javascript neural network library for node.js a

Juan Cazala 6.9k Dec 27, 2022
A JavaScript deep learning and reinforcement learning library.

neurojs is a JavaScript framework for deep learning in the browser. It mainly focuses on reinforcement learning, but can be used for any neural networ

Jan 4.4k Jan 4, 2023
A WebGL accelerated JavaScript library for training and deploying ML models.

TensorFlow.js TensorFlow.js is an open-source hardware-accelerated JavaScript library for training and deploying machine learning models. ⚠️ We recent

null 16.9k Jan 4, 2023
Train and test machine learning models for your Arduino Nano 33 BLE Sense in the browser.

Tiny Motion Trainer Train and test IMU based TFLite models on the Web Overview Since 2009, coders have created thousands of experiments using Chrome,

Google Creative Lab 59 Nov 21, 2022
Interactive digital art with head-coupled perspective effect using Three.js and TensorFlow.js

Interactive digital frame with head-tracking using Three.js & TensorFlow.js Using TensorFlow.js and Three.js, this project is a prototype of an intera

Charlie 61 Dec 12, 2022
Visualizer for neural network, deep learning, and machine learning models

Netron is a viewer for neural network, deep learning and machine learning models. Netron supports ONNX, TensorFlow Lite, Caffe, Keras, Darknet, Paddle

Lutz Roeder 21k Jan 5, 2023
Run XGBoost model and make predictions in Node.js

XGBoost-Node eXtreme Gradient Boosting Package in Node.js XGBoost-Node is a Node.js interface of XGBoost. XGBoost is a library from DMLC. It is design

暖房 / nuan.io 31 Nov 15, 2022
Bayesian bandit implementation for Node and the browser.

#bayesian-bandit.js This is an adaptation of the Bayesian Bandit code from Probabilistic Programming and Bayesian Methods for Hackers, specifically d3

null 44 Aug 19, 2022