Fix RN 0.60+ warnings fixes #78 #98

* 🐞 Fix bridge.imageLoader is deprecated #92 * 🐞 Fix deprecated imports
merryjs · Nov 29, 2019 · 926b55e · 926b55e
1 parent 471a4e0
commit 926b55e
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 93 deletions.
diff --git 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 (<RNMerryPhotoView {...props} initial={startPosition} data={transformData} onChange={this.onChange}/>);
+    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 (
+      <RNMerryPhotoView
+        {...props}
+        initial={startPosition}
+        data={transformData}
+        onChange={this.onChange}
+      />
+    );
+  }
 }
 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
@@ -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<MerryPhotoViewPorps, any> {
@@ -163,7 +158,7 @@ class MerryPhotoView extends React.Component<MerryPhotoViewPorps, any> {
     }
     return (
       <RNMerryPhotoView
-        {...props as any}
+        {...(props as any)}
         initial={startPosition}
         data={transformData}
         onChange={this.onChange}

diff --git a/ios/MerryPhotoView.m b/ios/MerryPhotoView.m
@@ -1,5 +1,6 @@
 //  Created by react-native-create-bridge
 #import "MerryPhotoView.h"
+#import <React/RCTImageLoader.h>
 #import <Foundation/Foundation.h>
 
 @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