diff --git a/README.md b/README.md index becd124..d47103c 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,35 @@ render() { //... ``` +## :tada: Toolbar usage example + +Sometimes you would want some custom touchable elements with your image component. This is the way you can use touchable elements. You can add custom styles, etc. To style image container use ```imageContainerStyle``` prop. + +```javascript +import SmartGallery from "react-native-smart-gallery"; + +//... +render() { + return ( + ( + + console.log('toolbar button pressed')} + > + Toolbar button + + + )} + /> + ); +} +//... +``` +
--- diff --git a/__tests__/ReactNativeSmartGallery-test.js b/__tests__/ReactNativeSmartGallery-test.js index 6bf4c52..4b576e4 100644 --- a/__tests__/ReactNativeSmartGallery-test.js +++ b/__tests__/ReactNativeSmartGallery-test.js @@ -1,13 +1,40 @@ -import "react-native"; +import { View, TouchableOpacity, Text } from "react-native"; import React from "react"; import { data } from "./mocks/dataMock"; -import SmartGallery from "../src"; +import SmartGallery from "../src/index"; // Note: test renderer must be required after react-native. import renderer from "react-test-renderer"; -it("React Native Smart Gallery renders correctly", () => { - renderer.create(); +describe("React Native Smart Gallery", () => { + it("should render correctly", () => { + renderer.create(); + }); + + it("should render toolbar correctly", () => { + const r = renderer.create( ( + + jest.fn()} + > + Toolbar button + + + )} + />); + expect(JSON.stringify(r.toJSON())).toMatch(new RegExp("Toolbar button")); + }); + + it("should consume image container styles", () => { + const r = renderer.create(); + expect(r.toJSON()) + .toHaveProperty("props.imageContainerStyle.backgroundColor", "#f1f2f3"); + }); }); diff --git a/src/index.js b/src/index.js index 19f9ff0..3a8f2d7 100644 --- a/src/index.js +++ b/src/index.js @@ -55,6 +55,8 @@ export default class SmartGallery extends PureComponent { renderItem: PropTypes.func, errorComponent: PropTypes.func, scrollViewProps: PropTypes.object, + toolbarItem: PropTypes.func, + imageContainerStyle: PropTypes.object, }; static defaultProps = { @@ -67,7 +69,11 @@ export default class SmartGallery extends PureComponent { scrollViewProps: {}, onEndReachedThreshold: 0.5, loadMinimal: true, - loadMinimalSize: 2 + loadMinimalSize: 2, + toolbarItem: undefined, + imageContainerStyle: { + flex: 0.8 + } }; imageRefs = new Map(); @@ -302,65 +308,68 @@ export default class SmartGallery extends PureComponent { onTransformGestureReleased, onSwipeUpReleased, onSwipeDownReleased, onDoubleTapStartReached, onDoubleTapEndReached, resizeMode, enableResistance, enableScale, maxScale, enableTranslate, resistantStrHorizontal, resistantStrVertical, maxOverScrollDistance, errorComponent, - renderItem, style + renderItem, style, toolbarItem, imageContainerStyle } = this.props; return ( - { - onViewTransformed && - onViewTransformed(transform, index); - }} - onPinchTransforming={(transform) => { - onPinchTransforming && - onPinchTransforming(transform, index); - }} - onPinchStartReached={(transform) => { - onPinchStartReached && - onPinchStartReached(transform, index); - }} - onPinchEndReached={(transform) => { - onPinchEndReached && - onPinchEndReached(transform, index); - }} - onTransformGestureReleased={(transform) => { - // need the "return" here because the - // return value is checked in ViewTransformer - return onTransformGestureReleased && - onTransformGestureReleased(transform, index); - }} - onSwipeUpReleased={(transform) => { - onSwipeUpReleased && - onSwipeUpReleased(transform, index); - }} - onSwipeDownReleased={(transform) => { - onSwipeDownReleased && - onSwipeDownReleased(transform, index); - }} - onDoubleTapStartReached={(transform) => { - onDoubleTapStartReached && - onDoubleTapStartReached(transform, index); - }} - onDoubleTapEndReached={(transform) => { - onDoubleTapEndReached && - onDoubleTapEndReached(transform, index); - }} - ref={(ref) => { this.imageRefs.set(index, ref); }} - key={`innerImage#${item.key || index}`} - errorComponent={errorComponent} - imageComponent={renderItem} - image={item} - index={index} - enableScale={enableScale} - maxScale={maxScale} - enableTranslate={enableTranslate} - enableResistance={enableResistance} - resistantStrHorizontal={resistantStrHorizontal} - resistantStrVertical={resistantStrVertical} - maxOverScrollDistance={maxOverScrollDistance} - resizeMode={resizeMode} - style={style} - /> + + { + onViewTransformed && + onViewTransformed(transform, index); + }} + onPinchTransforming={(transform) => { + onPinchTransforming && + onPinchTransforming(transform, index); + }} + onPinchStartReached={(transform) => { + onPinchStartReached && + onPinchStartReached(transform, index); + }} + onPinchEndReached={(transform) => { + onPinchEndReached && + onPinchEndReached(transform, index); + }} + onTransformGestureReleased={(transform) => { + // need the "return" here because the + // return value is checked in ViewTransformer + return onTransformGestureReleased && + onTransformGestureReleased(transform, index); + }} + onSwipeUpReleased={(transform) => { + onSwipeUpReleased && + onSwipeUpReleased(transform, index); + }} + onSwipeDownReleased={(transform) => { + onSwipeDownReleased && + onSwipeDownReleased(transform, index); + }} + onDoubleTapStartReached={(transform) => { + onDoubleTapStartReached && + onDoubleTapStartReached(transform, index); + }} + onDoubleTapEndReached={(transform) => { + onDoubleTapEndReached && + onDoubleTapEndReached(transform, index); + }} + ref={(ref) => { this.imageRefs.set(index, ref); }} + key={`innerImage#${item.key || index}`} + errorComponent={errorComponent} + imageComponent={renderItem} + image={item} + index={index} + enableScale={enableScale} + maxScale={maxScale} + enableTranslate={enableTranslate} + enableResistance={enableResistance} + resistantStrHorizontal={resistantStrHorizontal} + resistantStrVertical={resistantStrVertical} + maxOverScrollDistance={maxOverScrollDistance} + resizeMode={resizeMode} + style={style} + /> + + {toolbarItem ? toolbarItem(item, index) : null} ); } @@ -420,7 +429,7 @@ export default class SmartGallery extends PureComponent { this._galleryViewPager = component; }} scrollViewStyle={this.props.scrollViewStyle} - scrollEnabled={false} + scrollEnabled={this.props.toolbarItem ? true : false} renderItem={this.renderPage} data={images} {...gestureResponder}