!PRs Welcomeprs-badgeprs
!Build Statusbuild-badgebuild
!MIT Licenselicense-badgelicense
!versionversion-badgepackage !downloadsdownloads-badgenpmtrends
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.
!versionversion-badgepackage !downloadsdownloads-badgenpmtrends
🎣 @kevinwolf/use-expo-asset-loader
React Hook to load and cache assets when using ExpoThe 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>
);
}
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.