🎣 @kevinwolf/use-expo-asset-loader

React Hook to load and cache assets when using Expo

The problem

Caching assets in Expo can be a little verbose and repetitive task if you maintain more than one project at the same time.

This solution

This package export a single hook that abstracts the process of preloading and caching the assetts you need on your Expo application.

Installation

This package is distributed via NPM. Install it as a dependency on your project.

yarn add @kevinwolf/use-expo-asset-loader

IMPORTANT: Make sure you have installed react@>=16.8.0 to use React Hooks.

Usage

import React from "react";
import { ScrollView, Text, Image } from "react-native";
import { AppLoading } from "expo";
import useExpoAssetLoader from "@kevinwolf/use-expo-asset-loader";

const images = [
  require("./assets/images/local-image.png"),
  "https://images.pexels.com/photos/2157841/pexels-photo-2157841.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
  "https://images.pexels.com/photos/2108227/pexels-photo-2108227.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
  "https://images.pexels.com/photos/2123337/pexels-photo-2123337.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];

const fonts = {
  roboto: require("./assets/fonts/roboto.ttf")
};

export default function App() {
  const resourceLoader = useAssetLoader({ images, fonts });

  if (!resourceLoader.isReady) {
    return <AppLoading {...resourceLoader.getAppLoadingProps()} />;
  }

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="always"
      contentContainerStyle={{ alignItems: "center", paddingVertical: 20 }}
    >
      <Text style={{ fontFamily: "roboto" }}>Images</Text>
      {images.map(image => (
        <Image
          key={image}
          source={typeof image === "string" ? { uri: image } : image}
          style={{ height: 200, marginTop: 20, width: "100%" }}
        />
      ))}
    </ScrollView>
  );
}

Contributors

Kevin Wolf 💻 📖 🚇

If you have any question, suggestion or recommendation, please open an issue about it.

If you decided you want to introduce something to the project, please read the contribution guidelines first.

License

MIT