51 lines
1002 B
JavaScript
51 lines
1002 B
JavaScript
import { useMemo, useState } from "react";
|
|
import { Image } from "react-native";
|
|
import { ActivityIndicator } from "react-native-paper";
|
|
|
|
const ImageLoader = ({ style, source, ...props }) => {
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const handleLoadStart = () => {
|
|
setLoading(true);
|
|
};
|
|
|
|
const handleLoadEnd = () => {
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleLoad = () => {
|
|
setLoading(false);
|
|
};
|
|
|
|
const memorizedImage = useMemo(
|
|
() => (
|
|
<Image
|
|
{...props}
|
|
style={style}
|
|
source={source}
|
|
//onLoadStart={handleLoadStart}
|
|
onLoadEnd={handleLoadEnd}
|
|
onLoad={handleLoad}
|
|
/>
|
|
),
|
|
[source]
|
|
);
|
|
if (loading)
|
|
return (
|
|
<>
|
|
<ActivityIndicator
|
|
style={{
|
|
...style,
|
|
position: "absolute",
|
|
alignSelf: "center",
|
|
margin: 12,
|
|
}}
|
|
/>
|
|
{memorizedImage}
|
|
</>
|
|
);
|
|
return memorizedImage;
|
|
};
|
|
|
|
export default ImageLoader;
|