├── .github
└── FUNDING.yml
├── LICENSE
├── README.md
├── babel.config.js
├── index.d.ts
├── index.tsx
├── package-lock.json
└── package.json
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
12 | polar: # Replace with a single Polar username
13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
14 | thanks_dev: # Replace with a single thanks.dev username
15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
16 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 mmusaib
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | | | | | | |
2 | | --------------------------------------- | -------- | ---------- |---------- |---------- |
3 | |  |  |  |  | 
4 |
5 |
20 |
21 | - Design skeleton loading screen of your choice
22 | - Pass colors of your choice
23 | - Powered by Reanimated 3
24 | - Make your apps professional in UI/UX
25 |
26 |
27 |
28 |
29 | # Compatibility
30 |
31 |
32 | | iOS | Android | React Native Cli |
33 | --------|---------|------|
34 | | ✅ | ✅ | ✅ |
35 |
36 |
37 | # Expo Equivalent
38 | For Expo Loader [(Click Here)](https://github.com/mmusaib/expo-skeleton-loading)
39 |
40 |
41 |
42 | # 🔌 Installation
43 |
44 | ```sh
45 | $ npm install react-native-skeleton-loading
46 |
47 | ```
48 |
49 | OR
50 |
51 | ```sh
52 | $ yarn add react-native-skeleton-loading
53 | ```
54 |
55 | # Setup
56 | This package is based on react-natve-reanimated 3 so according to their documentation,
57 | you need to initialize that in babel.config.js. To do that stop the metro bundler and
58 | then add following line of code to the return object of babel.config.js
59 |
60 | ```js
61 | plugins: ['react-native-reanimated/plugin']
62 | ```
63 |
64 | After adding the line of code, start the bundler or project with --clear tag like,
65 |
66 | ```sh
67 | npx expo start --clear
68 | ```
69 | This will clear the bundler cache and you are ready to go.
70 |
71 |
72 |
73 | # 😎 Displaying the skeleton loading
74 | All you need is to just import the skeleton loading component, and in between the
75 | closing and ending tags, you can design the UI of your skeleton loading screen
76 | as shown in the code snippet below:
77 |
78 | ```jsx
79 | import SkeletonLoading from 'react-native-skeleton-loading'
80 |
81 | const App = () => {
82 |
83 | return(
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | )
96 |
97 | };
98 | ```
99 |
100 |
101 |
102 | For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-skeleton-loading?platform=android)
103 |
104 | # ⭐ Props for the component
105 | | Name | Type | Description |
106 | | ---- | ----------- | ----------- |
107 | | background | hex color string | Hex color string for the background of loading component
108 | | highlight | hex color string | Hex color string for the highlight of loading component
109 |
110 |
111 |
112 |
113 | # 💲 Would you like to support me?
114 |
115 | If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.
116 |
15 |