react-native-media-cache

🚩 FastImage, FastVideo performant React Native image component.

Installation

npm install --save react-native-media-cache

Now we need to install react-native-video and react-native-fs.

Usage

import * as React from 'react';

import { StyleSheet, View } from 'react-native';
import { CacheImage, CacheVideo } from 'react-native-media-cache';

export default function App() {
  return (
    <View style={styles.container}>
      {/* cache Image */}
      <CacheImage
        style={styles.image}
        source={{
          uri: 'https://thumbs.dreamstime.com/b/closeup-portrait-muscular-man-workout-barbell-gym-brutal-bodybuilder-athletic-six-pack-perfect-abs-shoulders-55122231.jpg',
        }}
        resizeMode="cover"
      />
      {/* cache Video */}
      <CacheVideo
        style={styles.image}
        source={{
          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        }}
        resizeMode="cover"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: { height: 500, width: 500 },
});

// ...

Contributing

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

License

Apache

---

Adopting at scale

react-native-atom-template is provided as is, I work on it in my free time.

If you're integrating react-native-atom-template , consider funding this project and contact me to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating VisionCamera and/or Frame Processors, and more.