import React, { useState, useEffect } from "react"; import { View, Text, ActivityIndicator } from "react-native"; import tailwind from "twrnc"; const tw = (styles, customStyles = {}, name) => { const custom = name ? customStyles[name] : ""; return tailwind`${styles} ${custom}`; }; export const Loading = (props) => { const { isLoading, styles, children, color, skelton } = props; if (isLoading) { return ( <View style={tw( "flex-1 w-full flex justify-center items-center", styles, "container" )} > {skelton ? ( skelton ) : ( <ActivityIndicator color={color || tw("text-gray-500").color} /> )} </View> ); } else if (children) { return <>{children}</>; } else { return <></>; } }; export const timeout = async (ms: number) => { return new Promise((resolve) => { setTimeout(() => { resolve(true); }, ms); }); }; export default function App() { const [isLoading, SetIsLoading] = useState(true); const fetching = async () => { await timeout(3000); SetIsLoading(false); }; useEffect(() => { fetching(); }, []); return ( <View style={tw("flex-1 w-full p-4 flex justify-center items-center")}> <View style={tw("flex-1 w-full")}> <Text style={tw("font-bold text-2xl pb-2 px-2")}>Default Loader</Text> <Loading isLoading={isLoading}> <View style={tw("w-full py-2 flex items-center justify-center flex-1")} > <Text style={tw("font-bold text-2xl")}>Done!</Text> </View> </Loading> </View> <View style={tw("flex-1 w-full")}> <Text style={tw("font-bold text-2xl pb-2 px-2")}>Skelton Loader</Text> <Loading isLoading={isLoading} skelton={ <View style={tw( "w-full p-2 flex flex-1 border border-gray-200 shadow rounded" )} > <Text style={tw("font-bold text-2xl h-8 bg-gray-100")}></Text> <Text style={tw("mt-2 text-xs font-medium h-24 bg-gray-100")} ></Text> </View> } > <View style={tw( "w-full p-2 flex flex-1 border border-gray-200 shadow rounded" )} > <Text style={tw("font-bold text-2xl")}>Header</Text> <Text style={tw("mt-2 text-xs font-medium")}> Eaque ipsa quae ab illo inventore veritatis et quasi. Laboris nisi ut aliquip ex ea commodo consequat. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </Text> </View> </Loading> </View> </View> ); }