From 926b55e69b988fd9b1a05c4dd89fac0f6ff5cd6e Mon Sep 17 00:00:00 2001 From: Flash Date: Fri, 29 Nov 2019 03:42:30 +0200 Subject: [PATCH] Fix RN 0.60+ warnings fixes #78 #98 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🐞 Fix bridge.imageLoader is deprecated #92 * 🐞 Fix deprecated imports --- index.js | 187 ++++++++++++++++++++++++------------------- index.tsx | 13 +-- ios/MerryPhotoView.m | 3 +- 3 files changed, 110 insertions(+), 93 deletions(-) diff --git a/index.js b/index.js index a955992..b978b1a 100644 --- a/index.js +++ b/index.js @@ -1,98 +1,119 @@ import * as React from "react"; -import { requireNativeComponent, processColor, Platform, View } from "react-native"; +import { + requireNativeComponent, + processColor, + Platform, + View +} from "react-native"; import * as PropTypes from "prop-types"; -const resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource"); -const ImageSourcePropType = require("react-native/Libraries/Image/ImageSource"); +import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource"; +import ImageSourcePropType from "react-native/Libraries/DeprecatedPropTypes/DeprecatedImageSourcePropType"; class MerryPhotoView extends React.Component { - constructor() { - super(...arguments); - /** - * Handle UIColor conversions - * @param data Photo[] - */ - this.processor = (data) => { - if (data && data.length) { - return data.map(o => { - const d = { ...o }; - if (typeof o.summaryColor === "string") { - d.summaryColor = processColor(o.summaryColor); - } - if (typeof o.titleColor === "string") { - d.titleColor = processColor(o.titleColor); - } - // resolve assets - d.source = resolveAssetSource(o.source); - return d; - }); - } - return data; - }; - this.onChange = (event) => { - const { onChange } = this.props; - if (onChange) { - const { target, ...rest } = event.nativeEvent; - onChange(rest); - } - }; + constructor() { + super(...arguments); + /** + * Handle UIColor conversions + * @param data Photo[] + */ + this.processor = data => { + if (data && data.length) { + return data.map(o => { + const d = { ...o }; + if (typeof o.summaryColor === "string") { + d.summaryColor = processColor(o.summaryColor); + } + if (typeof o.titleColor === "string") { + d.titleColor = processColor(o.titleColor); + } + // resolve assets + d.source = resolveAssetSource(o.source); + return d; + }); + } + return data; + }; + this.onChange = event => { + const { onChange } = this.props; + if (onChange) { + const { target, ...rest } = event.nativeEvent; + onChange(rest); + } + }; + } + render() { + // nothing + if (this.props.visible === false) { + return null; } - render() { - // nothing - if (this.props.visible === false) { - return null; - } - const { visible, data, initial, ...props } = this.props; - const dataCopy = [...data]; - const transformData = this.processor(dataCopy); - // initial - let startPosition = initial; - if (initial < 0) { - startPosition = 0; - } - if (initial > dataCopy.length) { - startPosition = dataCopy.length; - } - return (); + const { visible, data, initial, ...props } = this.props; + const dataCopy = [...data]; + const transformData = this.processor(dataCopy); + // initial + let startPosition = initial; + if (initial < 0) { + startPosition = 0; } + if (initial > dataCopy.length) { + startPosition = dataCopy.length; + } + return ( + + ); + } } MerryPhotoView.propTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - source: Platform.OS === "ios" - ? ImageSourcePropType - : PropTypes.oneOfType([ + data: PropTypes.arrayOf( + PropTypes.shape({ + source: + Platform.OS === "ios" + ? ImageSourcePropType + : PropTypes.oneOfType([ + PropTypes.shape({ + uri: PropTypes.string, + headers: PropTypes.objectOf(PropTypes.string) + }), + // Opaque type returned by require('./image.jpg') + PropTypes.number, + // Multiple sources + PropTypes.arrayOf( PropTypes.shape({ - uri: PropTypes.string, - headers: PropTypes.objectOf(PropTypes.string) - }), - // Opaque type returned by require('./image.jpg') - PropTypes.number, - // Multiple sources - PropTypes.arrayOf(PropTypes.shape({ - uri: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number - })) + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number + }) + ) ]), - title: PropTypes.string, - summary: PropTypes.string, - titleColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - summaryColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - })).isRequired, - visible: PropTypes.bool, - initial: PropTypes.number.isRequired, - hideStatusBar: PropTypes.bool, - hideCloseButton: PropTypes.bool, - hideShareButton: PropTypes.bool, - onDismiss: PropTypes.func.isRequired, - onChange: PropTypes.func, - shareText: PropTypes.string, - ...View.propTypes + title: PropTypes.string, + summary: PropTypes.string, + titleColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + summaryColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + }) + ).isRequired, + visible: PropTypes.bool, + initial: PropTypes.number.isRequired, + hideStatusBar: PropTypes.bool, + hideCloseButton: PropTypes.bool, + hideShareButton: PropTypes.bool, + onDismiss: PropTypes.func.isRequired, + onChange: PropTypes.func, + shareText: PropTypes.string, + ...View.propTypes }; MerryPhotoView.defaultProps = { - visible: false + visible: false }; -var RNMerryPhotoView = requireNativeComponent("MerryPhotoView", MerryPhotoView, { +var RNMerryPhotoView = requireNativeComponent( + "MerryPhotoView", + MerryPhotoView, + { nativeOnly: { - onChange: true + onChange: true } -}); + } +); export default MerryPhotoView; diff --git a/index.tsx b/index.tsx index f56be80..101f7cc 100644 --- a/index.tsx +++ b/index.tsx @@ -9,8 +9,8 @@ import { ViewProperties } from "react-native"; import * as PropTypes from "prop-types"; -const resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource"); -const ImageSourcePropType = require("react-native/Libraries/Image/ImageSource"); +import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource"; +import ImageSourcePropType from "react-native/Libraries/DeprecatedPropTypes/DeprecatedImageSourcePropType"; /** * Photo data @@ -61,12 +61,7 @@ export interface MerryPhotoViewPorps { * When viewer has dismissed but you still needs to update the visible state */ onDismiss: () => void; - onChange?: ( - data: { - index: number; - photo: Photo; - } - ) => void; + onChange?: (data: { index: number; photo: Photo }) => void; } class MerryPhotoView extends React.Component { @@ -163,7 +158,7 @@ class MerryPhotoView extends React.Component { } return ( #import @implementation MerryPhotoView { @@ -158,7 +159,7 @@ - (void)updatePhotoAtIndex:(NYTPhotosViewController*)photosViewController MerryPhoto* currentPhoto = [self.dataSource.photos objectAtIndex:current]; MerryPhotoData* d = self.reactPhotos[current]; - [_bridge.imageLoader loadImageWithURLRequest:d.source.request + [[_bridge moduleForClass:[RCTImageLoader class]] loadImageWithURLRequest:d.source.request size:d.source.size scale:d.source.scale clipped:YES