@kevinwolf/use-expo-asset-loader
v1.0.0
Published
React Hook to load and cache assets when using Expo
Downloads
3
Readme
🎣 @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
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.