Skip to content

Commit 3b5b68c

Browse files
mmusaibmmusaib
committed
Repository Initialized
1 parent afc98cf commit 3b5b68c

File tree

5 files changed

+276
-2
lines changed

5 files changed

+276
-2
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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

Lines changed: 116 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,116 @@
1-
# react-native-skeleton-loading
2-
React Native's Skeleton Loading Component
1+
| | | | | |
2+
| --------------------------------------- | -------- | ---------- |---------- |---------- |
3+
| <a href="https://www.npmjs.com/package/react-native-dropdown-country-picker">![NPM VERSION](https://img.shields.io/npm/v/react-native-dropdown-country-picker?style=for-the-badge)</a> | <a href="https://www.npmjs.com/package/react-native-dropdown-country-picker">![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-dropdown-country-picker?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge)</a> | <a href="https://github.com/mmusaib/react-native-dropdown-country-picker/stargazers">![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-dropdown-country-picker?label=Give%20Us%20A%20Star&style=for-the-badge)</a> | <a href="https://www.youtube.com/channel/UCSwIR2KBHiqiProH3Me8IZQ">![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS&style=for-the-badge)</a> | <a href="https://www.npmjs.com/package/react-native-dropdown-country-picker">![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-dropdown-country-picker?color=%232CA215&style=for-the-badge)</a>
4+
5+
<h1 align="center">
6+
🏳️‍🌈 React Native Skeleton Loading
7+
</h1>
8+
9+
<div align="center">
10+
11+
🟢 React Native Dropdown Country Picker Similar as HTML Select List. It's not a modal.
12+
13+
<a href="https://twitter.com/_mmusaib" target="_blank"></a>
14+
<img src="https://i.imgur.com/sLjgFRR.gif" width="400" />
15+
</div>
16+
17+
18+
19+
<h4>Light Weight and <b>Robust</b> Country Picker So Far.</h4>
20+
21+
- Equivalent to React Native Stock Component
22+
- Use the styles of your choice
23+
- Search the countries seamlessly
24+
- Option to add customizable input mobile field next to the Picker
25+
- Zero dependencies
26+
27+
28+
29+
# Compatibility
30+
31+
32+
| iOS | Android | Web | Expo |
33+
--------|---------|-----|------|
34+
| ✅ | ✅ | ✅ | ✅ |
35+
36+
37+
38+
39+
# 🔌 Installation
40+
41+
```sh
42+
$ npm install react-native-dropdown-country-picker
43+
44+
```
45+
46+
OR
47+
48+
```sh
49+
$ yarn add react-native-dropdown-country-picker
50+
```
51+
52+
53+
# 😎 Displaying the country picker
54+
```jsx
55+
import CountryCodeDropdownPicker from 'react-native-dropdown-country-picker'
56+
57+
const App = () => {
58+
const [selected, setSelected] = React.useState('+91');
59+
const [country, setCountry] = React.useState('');
60+
const [phone, setPhone] = React.useState('');
61+
62+
return(
63+
<CountryCodeDropdownPicker
64+
selected={selected}
65+
setSelected={setSelected}
66+
setCountryDetails={setCountry}
67+
phone={phone}
68+
setPhone={setPhone}
69+
countryCodeTextStyles={{fontSize: 13}}
70+
/>
71+
)
72+
73+
};
74+
```
75+
76+
77+
78+
For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-dropdown-country-picker)
79+
80+
# ⭐ Props for the component
81+
| Name | Type | Description | Default |
82+
| ---- | ---- | ----------- | ----------- |
83+
| selected | state var | The default selected country dial code stored in state variable | N/A
84+
| setSelected | Function | setState function to set the selected state variable | N/A
85+
| setCountryDetails | Function | setState function to set additional country details in respective state variable (Optional) | N/A
86+
| phone | state var | state variable if you want to display phone number field (Optional) | N/A
87+
| setPhone | Funtion | setState function to set the phone state variable (Optional) | N/A
88+
| countryCodeContainerStyles | style Object | style object to style the country code container (Optional) | N/A
89+
| countryCodeTextStyles | style object | style object to style the text inside country code container (Optional) | N/A
90+
| phoneStyles | style object | style object to style the text input of phone field (Optional) | N/A
91+
| searchIcon | string | URL of the icon if you want to replace the search icon (Optional) | N/A
92+
| closeIcon | string | URL of the icon if you want to replace the close icon (Optional) | N/A
93+
| searchStyles | style object | style object to style the search input field (Optional) | N/A
94+
| dropdownStyles | style object | style object to style the dropdown container (Optional) | N/A
95+
| dropdownTextStyles | style object | style object to style the text inside dropdown container (Optional) | N/A
96+
97+
98+
99+
100+
101+
102+
# ▶️ Watch Tutorial Video -->
103+
104+
[![Watch video](https://i.imgur.com/QcWCHk9.png)](https://www.youtube.com/watch?v=ZstelmTWhjw)
105+
106+
107+
<!-- For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)
108+
109+
110+
111+
112+
113+
114+
115+
116+

‎index.d.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
export interface SkeletonLoading {
3+
/**
4+
* background of the loader componenet
5+
*/
6+
background: string,
7+
8+
/**
9+
* highlight color of the loader component
10+
*/
11+
highlight: string
12+
}

‎index.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from "react";
2+
import { View, StyleSheet } from "react-native";
3+
import MaskedView from "@react-native-masked-view/masked-view";
4+
import { LinearGradient } from "expo-linear-gradient";
5+
import Reanimated,{ useSharedValue, withRepeat, useAnimatedStyle, withTiming, interpolate } from "react-native-reanimated";
6+
7+
8+
interface SkeletonProps {
9+
/**
10+
* background of the loader componenet
11+
*/
12+
background: string,
13+
14+
/**
15+
* highlight color of the loader component
16+
*/
17+
highlight: string
18+
}
19+
20+
21+
const SkeletonLoading: React.FC<SkeletonProps> = ({
22+
children,
23+
background,
24+
highlight
25+
}) => {
26+
27+
const [layout, setLayout] = React.useState();
28+
const shared = useSharedValue(0);
29+
30+
const animStyle = useAnimatedStyle(() => {
31+
const x = interpolate( shared.value, [0, 1], [layout ? -layout.width : 0, layout ? layout.width : 0], )
32+
return {
33+
transform: [ { translateX: x }, ]
34+
}
35+
});
36+
37+
React.useEffect(() => {
38+
shared.value = withRepeat(
39+
withTiming(1, { duration: 1000 }),
40+
Infinity,
41+
);
42+
43+
}, []);
44+
45+
46+
if (!layout) {
47+
return (
48+
<View onLayout={event => setLayout(event.nativeEvent.layout)}>
49+
{children}
50+
</View>
51+
);
52+
}
53+
54+
55+
return(
56+
<MaskedView
57+
maskElement={children}
58+
style={{ width: layout.width, height: layout.height }}
59+
>
60+
<View style={[styles.container, { backgroundColor: background }]} />
61+
62+
<Reanimated.View
63+
style={[StyleSheet.absoluteFill, animStyle]}
64+
>
65+
<MaskedView
66+
style={StyleSheet.absoluteFill}
67+
maskElement={
68+
<LinearGradient
69+
start={{ x: 0, y: 0 }}
70+
end={{ x: 1, y: 0 }}
71+
style={StyleSheet.absoluteFill}
72+
colors={['transparent', 'black', 'transparent']}
73+
/>
74+
}
75+
>
76+
<View style={[ StyleSheet.absoluteFill, { backgroundColor: highlight } ]} />
77+
</MaskedView>
78+
</Reanimated.View>
79+
</MaskedView>
80+
)
81+
}
82+
83+
const styles = StyleSheet.create({
84+
container: {
85+
flexGrow: 1,
86+
overflow: 'hidden'
87+
}
88+
})
89+
90+
export default SkeletonLoading;

‎package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "react-native-skeleton-loading",
3+
"version": "1.0.0",
4+
"description": "Smooth Skeleton Loader For expo and react-native. It is built on the top of react-native-reanimated v3, making it ectremely smooth and flawless.",
5+
"main": "index.tsx",
6+
"types": "index.d.ts",
7+
"scripts": {
8+
"test": "echo \"Error: no test specified\" && exit 1"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/mmusaib/react-native-skeleton-loading.git"
13+
},
14+
"dependencies": {
15+
"react-native-reanimated": "~3.3.0",
16+
"expo-linear-gradient": "~12.3.0",
17+
"@react-native-masked-view/masked-view": "0.2.9"
18+
},
19+
"keywords": [
20+
"skeleton",
21+
"expo",
22+
"react-native",
23+
"skeleton-loader",
24+
"expo-skeleton-loader",
25+
"react-native-skeleton-loader",
26+
"skeleton-loading",
27+
"loading",
28+
"react-native-skeleton-loading",
29+
"expo-skeleton-loading"
30+
],
31+
"author": "Muhammad Musaib",
32+
"license": "MIT",
33+
"bugs": {
34+
"url": "https://github.com/mmusaib/react-native-skeleton-loading/issues"
35+
},
36+
"homepage": "https://github.com/mmusaib/react-native-skeleton-loading#readme"
37+
}

0 commit comments

Comments
 (0)