@one-am/react-native-simple-image-slider 1.0.0-beta.5 → 1.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -29
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -54,8 +54,14 @@ import {
|
|
|
54
54
|
SliderFullScreen,
|
|
55
55
|
SliderCloseButton,
|
|
56
56
|
SliderDescription,
|
|
57
|
+
useSlider,
|
|
57
58
|
} from '@one-am/react-native-simple-image-slider';
|
|
58
59
|
|
|
60
|
+
function PhotoDescription() {
|
|
61
|
+
const { currentIndex } = useSlider();
|
|
62
|
+
return <Text style={{ color: '#fff' }}>Photo {currentIndex + 1}</Text>;
|
|
63
|
+
}
|
|
64
|
+
|
|
59
65
|
function Gallery() {
|
|
60
66
|
const images = [
|
|
61
67
|
{ key: '1', source: require('./photo1.jpg') },
|
|
@@ -70,16 +76,14 @@ function Gallery() {
|
|
|
70
76
|
<SliderCorner position="bottom-left">
|
|
71
77
|
<SliderPageCounter />
|
|
72
78
|
</SliderCorner>
|
|
73
|
-
<SliderFullScreen>
|
|
74
|
-
<SliderContent enablePinchToZoom />
|
|
75
|
-
<SliderCloseButton />
|
|
76
|
-
<SliderDescription
|
|
77
|
-
render={(item, index) => (
|
|
78
|
-
<Text style={{ color: '#fff' }}>Photo {index + 1}</Text>
|
|
79
|
-
)}
|
|
80
|
-
/>
|
|
81
|
-
</SliderFullScreen>
|
|
82
79
|
</Slider>
|
|
80
|
+
<SliderFullScreen>
|
|
81
|
+
<SliderContent enablePinchToZoom />
|
|
82
|
+
<SliderCloseButton />
|
|
83
|
+
<SliderDescription>
|
|
84
|
+
<PhotoDescription />
|
|
85
|
+
</SliderDescription>
|
|
86
|
+
</SliderFullScreen>
|
|
83
87
|
</SliderProvider>
|
|
84
88
|
);
|
|
85
89
|
}
|
|
@@ -217,10 +221,10 @@ Description overlay for full-screen mode. Must be inside `SliderFullScreen`.
|
|
|
217
221
|
|
|
218
222
|
#### Props
|
|
219
223
|
|
|
220
|
-
| Prop
|
|
221
|
-
|
|
|
222
|
-
| `
|
|
223
|
-
| `style`
|
|
224
|
+
| Prop | Type | Default | Description |
|
|
225
|
+
| ---------- | ---------------------- | ------------ | -------------------------------------------------------- |
|
|
226
|
+
| `children` | `ReactNode` | **required** | Content to display (use useSlider() for dynamic content) |
|
|
227
|
+
| `style` | `StyleProp<ViewStyle>` | - | Container style |
|
|
224
228
|
|
|
225
229
|
---
|
|
226
230
|
|
|
@@ -393,12 +397,10 @@ function App() {
|
|
|
393
397
|
return (
|
|
394
398
|
<SliderProvider data={images} imageAspectRatio={16 / 9}>
|
|
395
399
|
<ImageGrid />
|
|
396
|
-
<
|
|
397
|
-
<
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
</SliderFullScreen>
|
|
401
|
-
</Slider>
|
|
400
|
+
<SliderFullScreen>
|
|
401
|
+
<SliderContent enablePinchToZoom />
|
|
402
|
+
<SliderCloseButton />
|
|
403
|
+
</SliderFullScreen>
|
|
402
404
|
</SliderProvider>
|
|
403
405
|
);
|
|
404
406
|
}
|
|
@@ -512,8 +514,14 @@ import {
|
|
|
512
514
|
SliderFullScreen,
|
|
513
515
|
SliderCloseButton,
|
|
514
516
|
SliderDescription,
|
|
517
|
+
useSlider,
|
|
515
518
|
} from '@one-am/react-native-simple-image-slider';
|
|
516
519
|
|
|
520
|
+
function PictureDescription() {
|
|
521
|
+
const { currentIndex } = useSlider();
|
|
522
|
+
return <Text style={{ color: '#ffffff' }}>Picture {currentIndex + 1}</Text>;
|
|
523
|
+
}
|
|
524
|
+
|
|
517
525
|
<SliderProvider
|
|
518
526
|
data={photos.map((photo, index) => ({
|
|
519
527
|
source: photo,
|
|
@@ -526,16 +534,16 @@ import {
|
|
|
526
534
|
<SliderCorner position="bottom-left">
|
|
527
535
|
<SliderPageCounter />
|
|
528
536
|
</SliderCorner>
|
|
529
|
-
<SliderFullScreen>
|
|
530
|
-
<SliderContent enablePinchToZoom />
|
|
531
|
-
<SliderCloseButton>
|
|
532
|
-
<CustomIcon />
|
|
533
|
-
</SliderCloseButton>
|
|
534
|
-
<SliderDescription
|
|
535
|
-
render={(_, index) => <Text style={{ color: '#ffffff' }}>Picture {index}</Text>}
|
|
536
|
-
/>
|
|
537
|
-
</SliderFullScreen>
|
|
538
537
|
</Slider>
|
|
538
|
+
<SliderFullScreen>
|
|
539
|
+
<SliderContent enablePinchToZoom />
|
|
540
|
+
<SliderCloseButton>
|
|
541
|
+
<CustomIcon />
|
|
542
|
+
</SliderCloseButton>
|
|
543
|
+
<SliderDescription>
|
|
544
|
+
<PictureDescription />
|
|
545
|
+
</SliderDescription>
|
|
546
|
+
</SliderFullScreen>
|
|
539
547
|
</SliderProvider>;
|
|
540
548
|
```
|
|
541
549
|
|
|
@@ -621,7 +629,7 @@ The following props from `SimpleImageSlider` are removed or replaced:
|
|
|
621
629
|
| `onFullScreenChange` | Now on `<SliderProvider>` |
|
|
622
630
|
| `fullScreenEnabled` | Use `<SliderFullScreen>` as a child |
|
|
623
631
|
| `pageCounterPosition` | Use `<SliderCorner position="..."><SliderPageCounter />` |
|
|
624
|
-
| `renderFullScreenDescription` | Use `<SliderDescription
|
|
632
|
+
| `renderFullScreenDescription` | Use `<SliderDescription>` with children + useSlider() |
|
|
625
633
|
| `FullScreenCloseButtonIcon` | Use `<SliderCloseButton>` with custom children |
|
|
626
634
|
| `TopLeftComponent` | Use `<SliderCorner position="top-left">` |
|
|
627
635
|
| `TopRightComponent` | Use `<SliderCorner position="top-right">` |
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@one-am/react-native-simple-image-slider",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.6",
|
|
4
|
+
"source": "src",
|
|
4
5
|
"description": "A simple and performant image slider made with FlashList. Includes a full screen gallery component with gesture support.",
|
|
5
6
|
"main": "./lib/commonjs/index.js",
|
|
6
7
|
"module": "./lib/module/index.js",
|