Content Loader aka Content Placeholder for React Native

Customizable react native content loader for React-Native apps.

No need for external dependencies, it only use View component from react-native. For styling, you can use "barebone" stylesheet from react-native or you can use third party libraries like Nativewind (TailwindCSS for react-native)

Preview

Support

Buy me a coffe at:

BuyMeACoffee

Saweria

Installation

Step 1.

npm install @casteasoft/react-native-content-loader --save

or

yarn add @casteasoft/react-native-content-loader

Step 2.

And now you are ready to use it in your code. See example below.

Basic example

1const ProfileImage = withViewLoader(View)
2
3<ProfileImage style={{width: 120, height: 120}} isLoading={isLoading}>
4  <Image resizeMode="cover" source={{uri: "http://localhost:3000/avatars/cipto.jpg"}} style={{width:"100%", height:"100%"}} />
5</ProfileImage>
6
7// or using explicit conditional statement
8{
9  isLoading ? <ProfileImage style={{width: 120, height: 120}} isLoading={isLoading} /> : <View style={{width: 120, height: 120}} isLoading={isLoading}><Image resizeMode="cover" source={{uri: "http://localhost:3000/avatars/cipto.jpg"}} style={{width:"100%", height:"100%"}} />
10</View>
11}
12

Live advanced example

Fiddle it around on codesanbox . You prefer expo snack? I've got you, here is yummy expo snack

Advanced example using Nativewind

1
2import { View, Text, TouchableOpacity, Image } from "react-native";
3import { withViewLoader } from "@casteasoft/react-native-content-loader";
4import { styled } from "nativewind";
5
6
7 /* =============================
8  *  Content Loader Examples @casteasoft/react-native-content-loader
9  #  , styling using Nativewind
10  * ============================ */
11
12export const ContentLoader = () => {
13 return <View >
14      {/* Button for toggling isLoading state */}
15      <ToggleLoadingBtn
16        onPress={() => {
17          setIsLoading(!isLoading);
18        }}
19      >
20        <ToggleLoadingText>
21          {isLoading ? "Loading ..." : "Completed"}
22        </ToggleLoadingText>
23      </ToggleLoadingBtn>
24
25      {/* Profile Details */}
26      <ProfileContainer>
27        <ProfileHeaderContainer>
28          <ProfileHeaderImageContainer isLoading={isLoading}>
29            <ProfileHeaderImage
30              resizeMode="cover"
31              source={{ uri: "http:/localhost:3000/sceneries/tandur_padi.jpg" }}
32            />
33          </ProfileHeaderImageContainer>
34          <ProfileImageContainer isLoading={isLoading}>
35            <ProfileImage
36              resizeMode="cover"
37              source={{ uri: "http:/localhost:3000/avatars/elena.jpg" }}
38            />
39          </ProfileImageContainer>
40
41          <ProfileImageBackground />
42        </ProfileHeaderContainer>
43
44        <BioParagraph
45          {...{ isLoading }}
46          className="mx-auto mt-10 w-80"
47          numberOfLines={4}
48          loaderColorStyle={{ backgroundColor: "#1e3a8a" }}
49        >
50          <Text>
51            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum totam
52            corrupti necessitatibus quasi dolores eos laboriosam cum!
53            Consequatur, laudantium sit facere vitae et nisi dolorum
54            accusantium, iure laborum, asperiores veniam.
55          </Text>
56        </BioParagraph>
57
58        {/*  Styling content loader with style prop only  */}
59        {isLoading ? (
60          <BioParagraph
61            {...{ isLoading }}
62            numberOfLines={4}
63            style={{
64              marginLeft: "auto",
65              marginRight: "auto",
66              marginTop: 16,
67              width: 320,
68            }}
69          />
70        ) : (
71          <View className="mx-auto mt-4 w-80">
72            <Text>
73              Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
74              totam corrupti necessitatibus quasi dolores eos laboriosam cum!
75              Consequatur, laudantium sit facere vitae et nisi dolorum
76              accusantium, iure laborum, asperiores veniam.
77            </Text>
78          </View>
79        )}
80      </ProfileContainer>
81      {/* End of Profile Details */}
82</View>
83
84/** =============================
85 *  Styled Components using Nativewind
86 *  =============================
87 */
88const ViewWithLoader = withViewLoader(View);
89
90const ToggleLoadingBtn = styled(
91  TouchableOpacity,
92  `items-center self-center justify-center px-4 py-2 mx-4 my-2 bg-gray-900 rounded-lg w-36`
93);
94const ToggleLoadingText = styled(Text, `text-lg text-white text-font-semibold`);
95
96const ProfileContainer = styled(View, `flex flex-col w-full`);
97
98const ProfileHeaderContainer = styled(
99  View,
100  `relative flex flex-col items-center mx-auto w-80`
101);
102
103const ProfileHeaderImageContainer = styled(ViewWithLoader, `w-full h-32`);
104
105const ProfileHeaderImage = styled(Image, `w-full h-full`);
106
107const ProfileImageContainer = styled(
108  ViewWithLoader,
109  `absolute z-20 w-16 h-16 border-2 border-gray-100 rounded-full top-24`
110);
111
112const ProfileImage = styled(Image, `w-full h-full rounded-full`);
113
114const ProfileImageBackground = styled(
115  View,
116  `absolute w-16 h-16 border-2 border-gray-100 rounded-full bg-gray-50 top-24`
117);
118const BioParagraph = ViewWithLoader;
119

Available Properties

If you use a third party library like Nativewind, the tailwind class will be transformed into an array of style object, therefore there is no className property, for example:

mx-auto mt-4 w-80 will be transformed into [{marginLeft: "auto", marginRight: "auto"}, {marginTop: 16}, {width: 320}]

Property name	Description
duration	: number (default: 3000)
bottomtValue	: minimum value for opacity (default: 0.1)
topValue	: maxmum value for opacity (default: 1)
children	: children element to be displayed
isLoading	: boolean
numberOfLines	: number (the number of paragraph lines)
style	: StyleProp<ViewStyle>
loaderColorStyle	: StyleProp<ViewStyle>, only backgroundColor
	(default: { backgroundColor: "#111827" })

Changelog

Please see the releases tab for the changelog information.

License

MIT

Authors

• Cipto Hadi