Skip to content
This repository has been archived by the owner on Feb 27, 2023. It is now read-only.

add topRightView to TopBar for customizing right button on TopBar and zooming photo #20

Closed
wants to merge 35 commits into from
Closed

add topRightView to TopBar for customizing right button on TopBar and zooming photo #20

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
e7ade2d
add onTopRight to TopBar for customing right button on TopBar
ksti Sep 13, 2016
75f2644
try to fix the top right layout
ksti Sep 13, 2016
3805642
try to silence the PropTypes warning
ksti Sep 13, 2016
558520f
update RN to 0.32.0, and the PropTypes warning cleared
ksti Sep 13, 2016
2b3ad7c
try to add in zooming ability of photo
ksti Sep 14, 2016
8730d11
when start load photo update the transformable view state
ksti Sep 14, 2016
ba1f009
update the example
ksti Sep 14, 2016
7ab943b
when _onScroll(e) called, if e.nativeEvent.layoutMeasurement.width ==…
ksti Sep 18, 2016
9866a87
add _triggerTopBarStatus function to set the currentIndex and current…
ksti Sep 18, 2016
af0d10e
add _triggerTopBarStatus when _updatePageIndex(index)
ksti Sep 18, 2016
01621e7
create a new branch 'createResponder' for gesture responder
ksti Sep 18, 2016
0c69fed
use Gallery success
ksti Sep 20, 2016
edd052f
fix bug Gallery initialPage not working
ksti Sep 20, 2016
34202d6
when prevProps.mediaList.length !== this.props.mediaList.length , thi…
ksti Sep 21, 2016
96f0ee2
Update README.md
ksti Sep 21, 2016
f20c9d4
Update README.md
ksti Sep 21, 2016
ce6844b
onTopRight call back isFullScreen and mediaList
ksti Sep 21, 2016
a2a1922
add the missing refs: this.refs.fullScreenContainer --> this.fullScre…
ksti Sep 21, 2016
8c5fb2c
update package.json
ksti Sep 21, 2016
484d6af
update package.json
ksti Sep 21, 2016
eb51788
for test
ksti Sep 21, 2016
fc8b550
test failed, backup.
ksti Sep 21, 2016
427494d
when update page index such as form openPage function calling, should…
ksti Sep 21, 2016
4cb3273
load(force)
ksti Sep 26, 2016
83287ce
_onPageSelected force load
ksti Sep 26, 2016
75da655
should confirm whether using gallery
ksti Oct 8, 2016
18bc9bf
update Example
ksti Oct 8, 2016
d104f1a
add forceLoadPhoto props
ksti Nov 1, 2016
bf0946d
fix bug on rn0.39
ksti Dec 12, 2016
0cb8b8e
update Example for newest RN version
ksti Dec 12, 2016
5e45ee8
add feature of notSupportedError
ksti Dec 15, 2016
41f9750
isSupported justify by lowercase
ksti Dec 18, 2016
0539de7
DS_Store
ksti Dec 18, 2016
87937f1
default is supported when mimeTypeOrExt is missed
ksti Feb 14, 2017
c6495c6
avoid undefined crash
ksti Jan 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified lib/.DS_Store
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions lib/FullScreenContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ export default class FullScreenContainer extends React.Component {
lazyLoad
useCircleProgress={useCircleProgress}
uri={media.photo}
transformable={true}
displaySelectionButtons={displaySelectionButtons}
selected={media.selected}
onSelection={(isSelected) => {
Expand Down
49 changes: 39 additions & 10 deletions lib/media/Photo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@ export default class Photo extends Component {
*/
resizeMode: PropTypes.string,

/*
* if transformable then photo can be zoomed
*/
transformable: PropTypes.bool,

/*
* these values are set to image and it's container
* screen width and height are used if those are not defined
Expand Down Expand Up @@ -83,6 +88,7 @@ export default class Photo extends Component {
thumbnail: false,
lazyLoad: false,
selected: false,
transformable: false,
};

constructor(props) {
Expand All @@ -103,6 +109,14 @@ export default class Photo extends Component {
}

load() {
if (this.transformableImage) {
const viewTransformer = this.transformableImage.getViewTransformerInstance();
viewTransformer && viewTransformer.setState({
scale: 1,
translateX: 0,
translateY: 0,
});
};
if (!this.state.uri) {
this.setState({
uri: this.props.uri,
Expand Down Expand Up @@ -219,7 +233,7 @@ export default class Photo extends Component {
}

render() {
const { resizeMode, width, height } = this.props;
const { resizeMode, width, height, transformable } = this.props;
const screen = Dimensions.get('window');
const { uri, error } = this.state;

Expand All @@ -241,15 +255,30 @@ export default class Photo extends Component {
return (
<View style={[styles.container, sizeStyle]}>
{error ? this._renderErrorIcon() : this._renderProgressIndicator()}
<TransformableImage
{...this.props}
style={[styles.image, sizeStyle]}
source={source}
onProgress={this._onProgress}
onError={this._onError}
onLoad={this._onLoad}
resizeMode={resizeMode}
/>
{
transformable ? (
<TransformableImage
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

used this lib "react-native-transformable-image", but this has a few of conflict on pan gesture when scrolling, because it's implemented by scroll view too!

{...this.props}
ref={ref => this.transformableImage = ref}
style={[styles.image, sizeStyle]}
source={source}
onProgress={this._onProgress}
onError={this._onError}
onLoad={this._onLoad}
resizeMode={resizeMode}
/>
) : (
<Image
{...this.props}
style={[styles.image, sizeStyle]}
source={source}
onProgress={this._onProgress}
onError={this._onError}
onLoad={this._onLoad}
resizeMode={resizeMode}
/>
)
}
{this._renderSelectionButton()}
</View>
);
Expand Down