Skip to content

Commit 93f6a13

Browse files
Q1w1NQ1w1N
committed
chore: cleanup docs and example
1 parent d14ad92 commit 93f6a13

File tree

15 files changed

+739
-204
lines changed

15 files changed

+739
-204
lines changed

‎README.md‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
1+
[![mit licence][license-badge]][license]
2+
[![npm][npm]][npm-url]
3+
4+
Easy way to add shimmer placeholders that conform to parent component size and continuosly animate between children.
5+
6+
| Android | iOS |
7+
| -------------------------------------------- | -------------------------------- |
8+
| ![android](./docs/android.gif 'Android gif') | ![ios](./docs/ios.gif 'iOS gif') |
9+
110
## Getting Started
211

12+
This library requires [reanimated](https://docs.swmansion.com/react-native-reanimated/)
13+
314
```sh
415
npm install react-native-fast-shimmer
516
```
@@ -8,15 +19,13 @@ npm install react-native-fast-shimmer
819

920
```js
1021
import { Shimmer, ShimmerProvider } from 'react-native-fast-shimmer';
22+
import { Easing } from 'react-native-reanimated';
1123

1224
export default function App() {
1325
return (
1426
<ShimmerProvider duration={1000}>
1527
<View>
16-
<Shimmer style={styles.shimmerMain} />
17-
</View>
18-
<View>
19-
<Shimmer style={styles.shimmerMain} />
28+
<Shimmer style={styles.shimmerMain} easing={Easing.linear} speed={1} />
2029
</View>
2130
</ShimmerProvider>
2231
);
@@ -27,12 +36,14 @@ export default function App() {
2736

2837
#### `Shimmer` Component
2938

30-
| Prop | Type | Default | Description |
31-
|-------------------|------------------------------------|----------------------------------------------|----------------------------------------------------|
32-
| `style` | `ViewStyle` or `ViewStyle[]` | `undefined` | Custom styles for the Shimmer container. |
33-
| `linearGradients` | `string[]` | `['transparent', '#FFFFFF30', 'transparent']` | Array of colors for the linear gradient animation. |
34-
| `gradientStart` | `{ x: number; y: number }` | `{ x: 0, y: 0.5 }` | Start coordinates for the linear gradient. |
35-
| `gradientEnd` | `{ x: number; y: number }` | `{ x: 1, y: 0.5 }` | End coordinates for the linear gradient. |
39+
| Prop | Type | Default | Description |
40+
| ----------------- | ----------------------------- | --------------------------------------------- | ------------------------------------------------------- |
41+
| `style` | `ViewStyle` or `ViewStyle[]` | `undefined` | Custom styles for the Shimmer container. |
42+
| `linearGradients` | `string[]` | `['transparent', '#FFFFFF30', 'transparent']` | Array of colors for the linear gradient animation. |
43+
| `easing` | `EasingFunction` (reanimated) | `Easing.linear` | Easing for shimmer time interpolation |
44+
| `speed` | `number` | `1` | Speed param for multiplying speed of individual shimmer |
45+
| `gradientStart` | `{ x: number; y: number }` | `{ x: 0, y: 0.5 }` | Start coordinates for the linear gradient. |
46+
| `gradientEnd` | `{ x: number; y: number }` | `{ x: 1, y: 0.5 }` | End coordinates for the linear gradient. |
3647

3748
## Contributing
3849

@@ -49,3 +60,10 @@ Made with [create-react-native-library](https://github.com/callstack/react-nativ
4960
## Made with ❤️ at Callstack
5061

5162
react-native-fast-shimmer is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [[email protected]](mailto:[email protected]) if you need any help with these or just want to say hi!
63+
64+
<!-- badges -->
65+
66+
[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=fast-shimmers&utm_term=readme-with-love
67+
[license-badge]: https://img.shields.io/npm/l/react-native-fast-shimmer?style=for-the-badge
68+
[license]: https://github.com/callstack/react-native-fast-shimmer/blob/main/LICENSE
69+
[npm-url]: https://npmjs.com/package/react-native-fast-shimmer

‎docs/android.gif‎

3.97 MB
Loading

‎docs/ios.gif‎

2.8 MB
Loading

‎example/app.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"expo": {
33
"name": "example",
44
"slug": "example",
5+
"scheme": "fastshimmer.example",
56
"version": "1.0.0",
67
"orientation": "portrait",
78
"icon": "./assets/icon.png",
@@ -25,6 +26,7 @@
2526
},
2627
"web": {
2728
"favicon": "./assets/favicon.png"
28-
}
29+
},
30+
"plugins": ["expo-router"]
2931
}
3032
}

‎example/package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-fast-shimmer-example",
33
"version": "1.0.0",
4-
"main": "index.js",
4+
"main": "expo-router/entry",
55
"scripts": {
66
"start": "expo start",
77
"android": "expo start --android",
@@ -11,14 +11,17 @@
1111
"dependencies": {
1212
"@expo/metro-runtime": "~4.0.1",
1313
"expo": "~52.0.46",
14+
"expo-constants": "~17.0.8",
1415
"expo-linear-gradient": "^14.1.4",
16+
"expo-linking": "~7.0.5",
17+
"expo-router": "~4.0.21",
1518
"expo-status-bar": "~2.0.1",
1619
"react": "18.3.1",
1720
"react-dom": "18.3.1",
1821
"react-native": "0.76.9",
19-
"react-native-linear-gradient": "^2.8.3",
2022
"react-native-reanimated": "~3.16.1",
21-
"react-native-svg": "^15.12.0",
23+
"react-native-safe-area-context": "4.12.0",
24+
"react-native-screens": "~4.4.0",
2225
"react-native-web": "~0.19.13"
2326
},
2427
"devDependencies": {

‎example/src/App.tsx‎

Lines changed: 0 additions & 172 deletions
This file was deleted.

‎example/src/app/(tabs)/_layout.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import FontAwesome from '@expo/vector-icons/FontAwesome';
2+
import { Tabs } from 'expo-router';
3+
import { useCallback } from 'react';
4+
5+
export default function TabLayout() {
6+
const renderBarIcon = useCallback(
7+
(name: keyof typeof FontAwesome.glyphMap) => {
8+
return ({ color }: { color: string }) => (
9+
<FontAwesome size={28} name={name} color={color} />
10+
);
11+
},
12+
[]
13+
);
14+
15+
return (
16+
<Tabs
17+
screenOptions={{
18+
tabBarActiveTintColor: 'blue',
19+
headerShown: false,
20+
}}
21+
>
22+
<Tabs.Screen
23+
name="index"
24+
options={{
25+
title: 'Shimmers',
26+
tabBarIcon: renderBarIcon('home'),
27+
}}
28+
/>
29+
</Tabs>
30+
);
31+
}

‎example/src/app/(tabs)/index.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { ShimmerProvider } from 'react-native-fast-shimmer';
2+
import { StyleSheet, SafeAreaView } from 'react-native';
3+
import { AvatarShimmers } from '../../components/AvatarShimmers';
4+
import { LongShimmers } from '../../components/LongShimmers';
5+
import { ShimmerConfigs } from '../../components/ShimmerConfigs';
6+
7+
export default function ShimmersShowcase() {
8+
return (
9+
<SafeAreaView style={styles.container}>
10+
<ShimmerConfigs />
11+
<ShimmerProvider duration={3000}>
12+
<LongShimmers />
13+
<AvatarShimmers />
14+
</ShimmerProvider>
15+
</SafeAreaView>
16+
);
17+
}
18+
19+
const styles = StyleSheet.create({
20+
container: {
21+
flex: 1,
22+
display: 'flex',
23+
gap: 12,
24+
height: '100%',
25+
width: '100%',
26+
},
27+
});

‎example/src/app/_layout.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Stack } from 'expo-router';
2+
3+
export default function Layout() {
4+
return (
5+
<Stack>
6+
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
7+
</Stack>
8+
);
9+
}

0 commit comments

Comments
 (0)