react-native-shared-element - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0-alpha.0

android/build/outputs/logs/manifest-merger-debug-report.txt

 -- Merging decision tree log ---
 manifest
-ADDED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+ADDED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
 	package
-		ADDED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:3:11-50
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
+		ADDED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:3:11-50
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
 	android:versionName
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-		ADDED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+		ADDED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
 	android:versionCode
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-		ADDED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+		ADDED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:1-5:12
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
 	xmlns:android
-		ADDED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml:2:11-69
+		ADDED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml:2:11-69
 uses-sdk
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml reason: use-sdk injection requested
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml reason: use-sdk injection requested
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
 	android:targetSdkVersion
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-		ADDED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+		ADDED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
 	android:minSdkVersion
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-		ADDED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
-		INJECTED from /Users/hein/repos/react/react-native-shared-element/android/src/main/AndroidManifest.xml
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+		ADDED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml
+		INJECTED from /Users/hein/repos/Hein/react-native-shared-element/android/src/main/AndroidManifest.xml

build/index.js

 export * from "./SharedElement";
 export * from "./SharedElementTransition";
+export * from "./types";
 //# sourceMappingURL=index.js.map

build/RNSharedElementTransitionView.d.ts

@@ -1,1 +0,1 @@
-export declare const RNSharedElementTransitionView: any;
+export declare const RNSharedElementTransitionView: import("react-native").HostComponent<unknown> | undefined;

build/RNSharedElementTransitionView.js

@@ -6,4 +6,4 @@ import { requireNativeComponent, NativeModules } from "react-native";
         imageResolvers: [
-            "RNPhotoView.MWTapDetectingImageView" // react-native-photo-view
-        ].map(path => path.split("."))
+            "RNPhotoView.MWTapDetectingImageView", // react-native-photo-view
+        ].map((path) => path.split(".")),
     });
@@ -10,0 +10,0 @@ }

build/RNSharedElementTransitionView.web.js

 import * as React from "react";
 import { View, findNodeHandle } from "react-native";
-import { RNSharedElementTransition } from "./web/index.web";
+import { RNSharedElementTransition, } from "./web/index.web";
 export class RNSharedElementTransitionView extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            transition: new RNSharedElementTransition()
-        };
-        this.onSetRef = (ref) => {
-            if (!ref)
-                return;
-            const element = ref ? findNodeHandle(ref) : null;
-            const { transition } = this.state;
-            transition.element = element;
-        };
-    }
+    state = {
+        transition: new RNSharedElementTransition(),
+    };
     static getDerivedStateFromProps(props, state) {
@@ -36,7 +26,14 @@ const { startNode, endNode, animation, resize, align, nodePosition } = props;
     }
+    onSetRef = (ref) => {
+        if (!ref)
+            return;
+        const element = ref ? findNodeHandle(ref) : null;
+        const { transition } = this.state;
+        transition.element = element;
+    };
     render() {
         // console.log("RNSharedElementTransitionView.render");
-        return <View ref={this.onSetRef}/>;
+        return React.createElement(View, { ref: this.onSetRef });
     }
 }
 //# sourceMappingURL=RNSharedElementTransitionView.web.js.map

build/SharedElement.js

@@ -10,3 +10,3 @@ import * as React from "react";
             isParent: isParent || false,
-            parentInstance
+            parentInstance,
         }
@@ -16,12 +16,2 @@ : null;
 export class SharedElement extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._node = null;
-        this.onSetRef = (ref) => {
-            this._node = nodeFromRef(ref, true, this);
-            if (this.props.onNode) {
-                this.props.onNode(this._node);
-            }
-        };
-    }
     componentDidUpdate(prevProps) {
@@ -32,8 +22,15 @@ if (!prevProps.onNode && this.props.onNode && this._node) {
     }
+    _node = null;
+    onSetRef = (ref) => {
+        this._node = nodeFromRef(ref, true, this);
+        if (this.props.onNode) {
+            this.props.onNode(this._node);
+        }
+    };
     render() {
         const { onNode, //eslint-disable-line @typescript-eslint/no-unused-vars
         ...otherProps } = this.props;
-        return <View ref={this.onSetRef} collapsable={false} {...otherProps}/>;
+        return React.createElement(View, { ref: this.onSetRef, collapsable: false, ...otherProps });
     }
 }
 //# sourceMappingURL=SharedElement.js.map

build/SharedElementTransition.d.ts

@@ -52,3 +52,3 @@ import * as React from "react";
 };
-export declare const RNAnimatedSharedElementTransitionView: Animated.AnimatedComponent<any> | undefined;
+export declare const RNAnimatedSharedElementTransitionView: Animated.AnimatedComponent<import("react-native").HostComponent<unknown>> | undefined;
 export declare class SharedElementTransition extends React.Component<SharedElementTransitionProps, StateType> {
@@ -59,3 +59,3 @@ static prepareNode(node: SharedElementNode | null): any;
         end: {};
-        SharedElementComponent: Animated.AnimatedComponent<any> | undefined;
+        SharedElementComponent: Animated.AnimatedComponent<import("react-native").HostComponent<unknown>> | undefined;
         animation: string;
@@ -62,0 +62,0 @@ resize: string;

build/SharedElementTransition.js

 import * as React from "react";
-import { View, Text, Animated, Dimensions, StyleSheet, processColor, Platform } from "react-native";
+import { View, Text, Animated, Dimensions, StyleSheet, processColor, Platform, } from "react-native";
 import { RNSharedElementTransitionView } from "./RNSharedElementTransitionView";
@@ -8,3 +8,3 @@ const NativeAnimationType = new Map([
     ["fade-in", 2],
-    ["fade-out", 3]
+    ["fade-out", 3],
 ]);
@@ -15,3 +15,3 @@ const NativeResizeType = new Map([
     ["clip", 2],
-    ["none", 3]
+    ["none", 3],
 ]);
@@ -28,3 +28,3 @@ const NativeAlignType = new Map([
     ["center-center", 8],
-    ["center-bottom", 9]
+    ["center-bottom", 9],
 ]);
@@ -36,3 +36,3 @@ const debugColors = {
     startAncestor: "#E88F82",
-    endAncestor: "#FFDC8F"
+    endAncestor: "#FFDC8F",
 };
@@ -43,3 +43,3 @@ const debugStyles = StyleSheet.create({
         backgroundColor: "black",
-        opacity: 0.3
+        opacity: 0.3,
     },
@@ -49,3 +49,3 @@ text: {
         marginTop: 3,
-        fontSize: 10
+        fontSize: 10,
     },
@@ -55,4 +55,4 @@ box: {
         borderWidth: 1,
-        borderStyle: "dashed"
-    }
+        borderStyle: "dashed",
+    },
 });
@@ -63,27 +63,2 @@ export const RNAnimatedSharedElementTransitionView = RNSharedElementTransitionView
 export class SharedElementTransition extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.onMeasureNode = (event) => {
-            const { nativeEvent } = event;
-            const { onMeasure } = this.props;
-            this.setState({
-                [`${nativeEvent.node}`]: nativeEvent
-            });
-            // console.log("onMeasure: ", nativeEvent);
-            if (onMeasure) {
-                onMeasure(event);
-            }
-        };
-        if (!props.SharedElementComponent &&
-            !SharedElementTransition.isNotAvailableWarningShown) {
-            SharedElementTransition.isNotAvailableWarningShown = true;
-            if (Platform.OS === "android" || Platform.OS === "ios") {
-                console.warn("RNSharedElementTransition is not available, did you forget to link `react-native-shared-element` into your project?");
-            }
-            else {
-                console.warn("RNSharedElementTransition is not available on this platform");
-            }
-        }
-    }
     static prepareNode(node) {
@@ -109,6 +84,40 @@ let nodeStyle = {};
                 isParent: node.isParent,
-                nodeStyle
+                nodeStyle,
             }
             : undefined;
     }
+    static defaultProps = {
+        start: {},
+        end: {},
+        SharedElementComponent: RNAnimatedSharedElementTransitionView,
+        animation: "move",
+        resize: "auto",
+        align: "auto",
+    };
+    constructor(props) {
+        super(props);
+        if (!props.SharedElementComponent &&
+            !SharedElementTransition.isNotAvailableWarningShown) {
+            SharedElementTransition.isNotAvailableWarningShown = true;
+            if (Platform.OS === "android" || Platform.OS === "ios") {
+                console.warn("RNSharedElementTransition is not available, did you forget to link `react-native-shared-element` into your project?");
+            }
+            else {
+                console.warn("RNSharedElementTransition is not available on this platform");
+            }
+        }
+    }
+    state = {};
+    static isNotAvailableWarningShown = false;
+    onMeasureNode = (event) => {
+        const { nativeEvent } = event;
+        const { onMeasure } = this.props;
+        this.setState({
+            [`${nativeEvent.node}`]: nativeEvent,
+        });
+        // console.log("onMeasure: ", nativeEvent);
+        if (onMeasure) {
+            onMeasure(event);
+        }
+    };
     renderDebugOverlay() {
@@ -118,3 +127,3 @@ if (!this.props.debug) {
         }
-        return <View style={debugStyles.overlay}/>;
+        return React.createElement(View, { style: debugStyles.overlay });
     }
@@ -135,55 +144,49 @@ renderDebugLayer(name) {
         const color = debugColors[name];
-        return (<View style={StyleSheet.absoluteFill}>
-        {isContentDifferent ? (<View style={[
-            debugStyles.box,
-            {
-                left: layout.contentX,
-                top: layout.contentY,
-                width: layout.contentWidth,
-                height: layout.contentHeight,
-                borderColor: color,
-                opacity: 0.5
-            }
-        ]}>
-            <Text style={[debugStyles.text, { color }]}>Content</Text>
-          </View>) : (undefined)}
-        <View style={[
-            debugStyles.box,
-            {
-                left: layout.x,
-                top: layout.y,
-                width: layout.width,
-                height: layout.height,
-                borderColor: color,
-                borderRadius: style.borderRadius || 0
-            }
-        ]}>
-          <Text style={[
-            debugStyles.text,
-            { color, marginTop: Math.max((style.borderRadius || 0) - 7, 3) }
-        ]}>
-            {name}
-          </Text>
-        </View>
-        <View style={{
-            position: "absolute",
-            overflow: "hidden",
-            left: layout.visibleX,
-            top: layout.visibleY,
-            width: layout.visibleWidth,
-            height: layout.visibleHeight
-        }}>
-          <View style={[
-            {
-                position: "absolute",
-                left: layout.x - layout.visibleX,
-                top: layout.y - layout.visibleY,
-                width: layout.width,
-                height: layout.height,
-                borderRadius: style.borderRadius || 0,
-                backgroundColor: isFullScreen ? "transparent" : color + "80"
-            }
-        ]}/>
-        </View>
-      </View>);
+        return (React.createElement(View, { style: StyleSheet.absoluteFill },
+            isContentDifferent ? (React.createElement(View, { style: [
+                    debugStyles.box,
+                    {
+                        left: layout.contentX,
+                        top: layout.contentY,
+                        width: layout.contentWidth,
+                        height: layout.contentHeight,
+                        borderColor: color,
+                        opacity: 0.5,
+                    },
+                ] },
+                React.createElement(Text, { style: [debugStyles.text, { color }] }, "Content"))) : undefined,
+            React.createElement(View, { style: [
+                    debugStyles.box,
+                    {
+                        left: layout.x,
+                        top: layout.y,
+                        width: layout.width,
+                        height: layout.height,
+                        borderColor: color,
+                        borderRadius: style.borderRadius || 0,
+                    },
+                ] },
+                React.createElement(Text, { style: [
+                        debugStyles.text,
+                        { color, marginTop: Math.max((style.borderRadius || 0) - 7, 3) },
+                    ] }, name)),
+            React.createElement(View, { style: {
+                    position: "absolute",
+                    overflow: "hidden",
+                    left: layout.visibleX,
+                    top: layout.visibleY,
+                    width: layout.visibleWidth,
+                    height: layout.visibleHeight,
+                } },
+                React.createElement(View, { style: [
+                        {
+                            position: "absolute",
+                            left: layout.x - layout.visibleX,
+                            top: layout.y - layout.visibleY,
+                            width: layout.width,
+                            height: layout.height,
+                            borderRadius: style.borderRadius || 0,
+                            backgroundColor: isFullScreen ? "transparent" : color + "80",
+                        },
+                    ] }))));
     }
@@ -197,31 +200,18 @@ render() {
         }
-        return (<View style={StyleSheet.absoluteFill}>
-        <SharedElementComponent startNode={{
-            node: SharedElementTransition.prepareNode(start.node),
-            ancestor: SharedElementTransition.prepareNode(start.ancestor)
-        }} endNode={{
-            node: SharedElementTransition.prepareNode(end.node),
-            ancestor: SharedElementTransition.prepareNode(end.ancestor)
-        }} nodePosition={position} animation={NativeAnimationType.get(animation)} 
-        // @ts-ignore
-        resize={NativeResizeType.get(resize)} 
-        // @ts-ignore
-        align={NativeAlignType.get(align)} onMeasureNode={debug ? this.onMeasureNode : onMeasure} 
-        // style={debug && style ? [debugStyles.content, style] : style}
-        {...otherProps}/>
-        
-        {this.renderDebugLayer("startNode")}
-        {this.renderDebugLayer("endNode")}
-      </View>);
+        return (React.createElement(View, { style: StyleSheet.absoluteFill },
+            React.createElement(SharedElementComponent, { startNode: {
+                    node: SharedElementTransition.prepareNode(start.node),
+                    ancestor: SharedElementTransition.prepareNode(start.ancestor),
+                }, endNode: {
+                    node: SharedElementTransition.prepareNode(end.node),
+                    ancestor: SharedElementTransition.prepareNode(end.ancestor),
+                }, nodePosition: position, animation: NativeAnimationType.get(animation), 
+                // @ts-ignore
+                resize: NativeResizeType.get(resize), 
+                // @ts-ignore
+                align: NativeAlignType.get(align), onMeasureNode: debug ? this.onMeasureNode : onMeasure, ...otherProps }),
+            this.renderDebugLayer("startNode"),
+            this.renderDebugLayer("endNode")));
     }
 }
-SharedElementTransition.defaultProps = {
-    start: {},
-    end: {},
-    SharedElementComponent: RNAnimatedSharedElementTransitionView,
-    animation: "move",
-    resize: "auto",
-    align: "auto"
-};
-SharedElementTransition.isNotAvailableWarningShown = false;
 //# sourceMappingURL=SharedElementTransition.js.map

build/types.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=types.js.map

build/web/Color.web.js

@@ -16,3 +16,3 @@ export function parseColor(color) {
             p(cache[3], 16) * 17,
-            1
+            1,
         ];
@@ -19,0 +19,0 @@ // Checks for rgba and converts string to

build/web/Rect.web.js

 export class Rect {
+    x = 0;
+    y = 0;
+    width = 0;
+    height = 0;
+    static empty = new Rect();
     constructor(source) {
-        this.x = 0;
-        this.y = 0;
-        this.width = 0;
-        this.height = 0;
         if (source) {
@@ -21,3 +22,2 @@ this.x = source.x;
 }
-Rect.empty = new Rect();
 //# sourceMappingURL=Rect.web.js.map

build/web/RNSharedElementContent.web.js

 import { Rect } from "./Rect.web";
 export class RNSharedElementContent {
+    element;
+    size;
     constructor(element, size) {
@@ -8,3 +10,3 @@ this.element = element;
     static getSize(element) {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             if (element.style.backgroundImage) {
@@ -17,3 +19,3 @@ const img = document.createElement("img");
                         width: img.width,
-                        height: img.height
+                        height: img.height,
                     }));
@@ -30,3 +32,3 @@ };
                 width: element.clientWidth || 0,
-                height: element.clientHeight || 0
+                height: element.clientHeight || 0,
             }));
@@ -75,3 +77,3 @@ });
             width,
-            height
+            height,
         });
@@ -78,0 +80,0 @@ }

build/web/RNSharedElementNode.web.js

@@ -5,10 +5,13 @@ import { RNSharedElementContent } from "./RNSharedElementContent.web";
 export class RNSharedElementNode {
+    domNode;
+    ancestorDomNode;
+    isParent;
+    hideRefCount = 0;
+    hideOpacity = null;
+    refCount = 1;
+    styleCache = null;
+    styleCallbacks = null;
+    contentCache = null;
+    contentCallbacks = null;
     constructor(domNode, isParent, ancestorDomNode) {
-        this.hideRefCount = 0;
-        this.hideOpacity = null;
-        this.refCount = 1;
-        this.styleCache = null;
-        this.styleCallbacks = null;
-        this.contentCache = null;
-        this.contentCallbacks = null;
         this.domNode = domNode;
@@ -75,3 +78,3 @@ this.isParent = isParent;
         }
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             this.styleCallbacks = this.styleCallbacks || [];
@@ -103,3 +106,3 @@ this.styleCallbacks.push(resolve);
             width: rect.width,
-            height: rect.height
+            height: rect.height,
         });
@@ -116,3 +119,3 @@ // Create style
         this.styleCallbacks = null;
-        callbacks.forEach(callback => callback(style));
+        callbacks.forEach((callback) => callback(style));
         return true;
@@ -123,3 +126,3 @@ }
             return this.contentCache;
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             if (this.contentCallbacks)
@@ -152,3 +155,3 @@ return;
         this.contentCallbacks = null;
-        callbacks.forEach(callback => callback(content));
+        callbacks.forEach((callback) => callback(content));
         return true;
@@ -155,0 +158,0 @@ }

build/web/RNSharedElementNodeManager.web.js

 import { RNSharedElementNode } from "./RNSharedElementNode.web";
 export class RNSharedElementNodeManager {
-    constructor() {
-        this.nodes = new Map();
-    }
+    nodes = new Map();
+    static instance;
     static getInstance() {
@@ -7,0 +6,0 @@ if (!RNSharedElementNodeManager.instance) {

build/web/RNSharedElementStyle.web.js

@@ -17,2 +17,6 @@ import { parseColor, interpolateColor } from "./Color.web";
 export class RNSharedElementStyle {
+    layout;
+    style;
+    opacity;
+    backgroundColor;
     constructor(layout, style) {
@@ -29,3 +33,3 @@ this.layout = layout;
             width: interpolate(layout1.width, layout2.width, position),
-            height: interpolate(layout1.height, layout2.height, position)
+            height: interpolate(layout1.height, layout2.height, position),
         });
@@ -38,3 +42,3 @@ }
             opacity: interpolate(style1.opacity, style2.opacity, position),
-            backgroundColor: interpolateColor(style1.backgroundColor, style2.backgroundColor, position)
+            backgroundColor: interpolateColor(style1.backgroundColor, style2.backgroundColor, position),
         });
@@ -41,0 +45,0 @@ }

build/web/RNSharedElementTransition.web.js

@@ -8,20 +8,18 @@ import { RNSharedElementContent } from "./RNSharedElementContent.web";
 import { Rect } from "./Rect.web";
-import { RNSharedElementAnimation, RNSharedElementResize, RNSharedElementAlign } from "./types";
+import { RNSharedElementAnimation, RNSharedElementResize, RNSharedElementAlign, } from "./types";
 export class RNSharedElementTransition {
-    constructor() {
-        this.items = [
-            new RNSharedElementTransitionItem(RNSharedElementNodeManager.getInstance(), "start"),
-            new RNSharedElementTransitionItem(RNSharedElementNodeManager.getInstance(), "end")
-        ];
-        this.animation = RNSharedElementAnimation.Move;
-        this.resize = RNSharedElementResize.Auto;
-        this.align = RNSharedElementAlign.Auto;
-        this.nodePosition = 0;
-        this.element = null;
-        this.layout = Rect.empty;
-        this.views = [null, null];
-    }
+    items = [
+        new RNSharedElementTransitionItem(RNSharedElementNodeManager.getInstance(), "start"),
+        new RNSharedElementTransitionItem(RNSharedElementNodeManager.getInstance(), "end"),
+    ];
+    animation = RNSharedElementAnimation.Move;
+    resize = RNSharedElementResize.Auto;
+    align = RNSharedElementAlign.Auto;
+    nodePosition = 0;
+    element = null;
+    layout = Rect.empty;
+    views = [null, null];
     destroy() {
         this.element = null;
-        this.items.forEach(item => (item.node = null));
+        this.items.forEach((item) => (item.node = null));
     }
@@ -40,6 +38,6 @@ setNode(end, node, ancestor) {
     requestStylesAndContent() {
-        this.items.forEach(item => {
+        this.items.forEach((item) => {
             if (item.needsStyle) {
                 item.needsStyle = false;
-                item.node.requestStyle().then(style => {
+                item.node.requestStyle().then((style) => {
                     item.style = style;
@@ -51,3 +49,3 @@ this.updateLayout();
                 item.needsContent = false;
-                item.node.requestContent().then(content => {
+                item.node.requestContent().then((content) => {
                     item.content = content;
@@ -61,3 +59,3 @@ this.updateLayout();
         const { items, animation } = this;
-        items.forEach(item => {
+        items.forEach((item) => {
             let hidden = !!(item.style && item.content);
@@ -76,3 +74,3 @@ if (hidden &&
     updateLayout() {
-        const { element, items, nodePosition, animation /*, animation, resize, align*/ } = this;
+        const { element, items, nodePosition, animation /*, animation, resize, align*/, } = this;
         if (!element)
@@ -79,0 +77,0 @@ return;

build/web/RNSharedElementTransitionItem.web.js

 export class RNSharedElementTransitionItem {
+    _hidden = false;
+    name;
+    _node = null;
+    _nodeManager;
+    needsStyle = false;
+    style = null;
+    needsContent = false;
+    content = null;
     constructor(nodeManager, name) {
-        this._hidden = false;
-        this._node = null;
-        this.needsStyle = false;
-        this.style = null;
-        this.needsContent = false;
-        this.content = null;
         this._nodeManager = nodeManager;
@@ -10,0 +12,0 @@ this.name = name;

build/web/RNSharedElementView.web.js

 import { Rect } from "./Rect.web";
-import { RNSharedElementAlign, RNSharedElementResize } from "./types";
+import { RNSharedElementAlign, RNSharedElementResize, } from "./types";
 function initElement(element) {
@@ -29,13 +29,11 @@ const { style } = element;
 export class RNSharedElementView {
-    constructor() {
-        this.parentLayout = Rect.empty;
-        this.element = initElement(document.createElement("div"));
-        this.layout = Rect.empty;
-        this.style = null;
-        this.originalLayout = Rect.empty;
-        this._contentElement = null;
-        this.contentLayout = Rect.empty;
-        this.resize = RNSharedElementResize.Auto;
-        this.align = RNSharedElementAlign.Auto;
-    }
+    parentLayout = Rect.empty;
+    element = initElement(document.createElement("div"));
+    layout = Rect.empty;
+    style = null;
+    originalLayout = Rect.empty;
+    _contentElement = null;
+    contentLayout = Rect.empty;
+    resize = RNSharedElementResize.Auto;
+    align = RNSharedElementAlign.Auto;
     get contentElement() {
@@ -113,3 +111,3 @@ return this._contentElement;
     updateLayoutForResize() {
-        const { layout, parentLayout, element, contentLayout, originalLayout, align, resize } = this;
+        const { layout, parentLayout, element, contentLayout, originalLayout, align, resize, } = this;
         const { x, y, width, height } = layout;
@@ -131,3 +129,3 @@ // Update size
             return;
-        let { x: contentX, y: contentY, width: contentWidth, height: contentHeight } = contentLayout;
+        let { x: contentX, y: contentY, width: contentWidth, height: contentHeight, } = contentLayout;
         // Get content size
@@ -134,0 +132,0 @@ let overflow = "hidden";

package.json

 {
   "name": "react-native-shared-element",
-  "version": "0.7.0",
+  "version": "0.8.0-alpha.0",
   "description": "Native shared element transition primitives for react-native 💫",
@@ -45,12 +45,12 @@ "main": "build/index.js",
   "devDependencies": {
-    "@commitlint/config-conventional": "^8.3.4",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.17",
-    "commitlint": "^8.3.5",
-    "conventional-changelog-cli": "^2.0.31",
-    "eslint": "^6.8.0",
-    "expo-module-scripts": "^1.2.0",
-    "prettier": "^1.19.1"
+    "@commitlint/config-conventional": "^13.1.0",
+    "@types/react": "^17.0.15",
+    "@types/react-native": "^0.64.12",
+    "commitlint": "^13.1.0",
+    "conventional-changelog-cli": "^2.1.1",
+    "eslint": "^7.32.0",
+    "expo-module-scripts": "^2.0.0",
+    "prettier": "^2.3.2"
   },
   "dependencies": {}
 }

README.md

@@ -134,3 +134,3 @@ # react-native-shared-element <!-- omit in toc -->
 You typically do not use this component directly, but instead use a Router or Transition-engine which provides a higher-level API.
-See [`./Example/src/components/Router.js`](./Example/src/components/Router.js) for an example implementation of a simple stack router using
+See [`./example/src/components/Router.tsx`](./example/src/components/Router.tsx) for an example implementation of a simple stack router using
 shared element transitions.
@@ -210,3 +210,4 @@
 
-- The main example & test app is located in [`./Example`](./Example) and serves as an exploration and testing tool. It features a custom stack router which implements the shared element primitives. It also implements the react-navigation binding and serves as a testing tool for that.
+- The main example & test app is located in [`./example`](./example) and serves as an exploration and testing tool. It features a custom stack router which implements the shared element primitives. It also implements the react-navigation binding and serves as a testing tool for that.
+- [Demo app for react-navigation](https://github.com/IjzerenHein/react-navigation-shared-element/tree/main/example)
 - [Simple demo app using RN60 and the react-navigation binding](https://github.com/IjzerenHein/react-navigation-shared-element-rn60demo)
@@ -213,0 +214,0 @@

src/web/Color.web.ts

@@ -18,3 +18,3 @@ export type Color = number[];
       p(cache[3], 16) * 17,
-      1
+      1,
     ];
@@ -21,0 +21,0 @@ // Checks for rgba and converts string to

src/web/RNSharedElementContent.web.ts

@@ -14,3 +14,3 @@ import { Rect } from "./Rect.web";
   static getSize(element: IHTMLElement): Promise<Rect | null> {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       if (element.style.backgroundImage) {
@@ -24,3 +24,3 @@ const img = document.createElement("img");
               width: img.width,
-              height: img.height
+              height: img.height,
             })
@@ -39,3 +39,3 @@ );
           width: element.clientWidth || 0,
-          height: element.clientHeight || 0
+          height: element.clientHeight || 0,
         })
@@ -87,5 +87,5 @@ );
       width,
-      height
+      height,
     });
   }
 }

src/web/RNSharedElementNode.web.ts

@@ -100,3 +100,3 @@ import { RNSharedElementContent } from "./RNSharedElementContent.web";
     }
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       this.styleCallbacks = this.styleCallbacks || [];
@@ -128,3 +128,3 @@ this.styleCallbacks.push(resolve);
       width: rect.width,
-      height: rect.height
+      height: rect.height,
     });
@@ -147,3 +147,3 @@
     this.styleCallbacks = null;
-    callbacks.forEach(callback => callback(style));
+    callbacks.forEach((callback) => callback(style));
     return true;
@@ -155,3 +155,3 @@ }
 
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       if (this.contentCallbacks) return;
@@ -187,5 +187,5 @@ this.contentCallbacks = this.contentCallbacks || [];
     this.contentCallbacks = null;
-    callbacks.forEach(callback => callback(content));
+    callbacks.forEach((callback) => callback(content));
     return true;
   }
 }

src/web/RNSharedElementStyle.web.ts

@@ -42,3 +42,3 @@ import { Color, parseColor, interpolateColor } from "./Color.web";
       width: interpolate(layout1.width, layout2.width, position),
-      height: interpolate(layout1.height, layout2.height, position)
+      height: interpolate(layout1.height, layout2.height, position),
     });
@@ -64,3 +64,3 @@ }
         position
-      )
+      ),
     });
@@ -67,0 +67,0 @@ }

src/web/RNSharedElementTransition.web.ts

@@ -13,3 +13,3 @@ import { RNSharedElementContent } from "./RNSharedElementContent.web";
   RNSharedElementAlign,
-  IHTMLElement
+  IHTMLElement,
 } from "./types";
@@ -26,3 +26,3 @@
       "end"
-    )
+    ),
   ];
@@ -39,3 +39,3 @@ public animation: RNSharedElementAnimation = RNSharedElementAnimation.Move;
     this.element = null;
-    this.items.forEach(item => (item.node = null));
+    this.items.forEach((item) => (item.node = null));
   }
@@ -65,6 +65,6 @@
   private requestStylesAndContent() {
-    this.items.forEach(item => {
+    this.items.forEach((item) => {
       if (item.needsStyle) {
         item.needsStyle = false;
-        item.node!.requestStyle().then(style => {
+        item.node!.requestStyle().then((style) => {
           item.style = style;
@@ -76,3 +76,3 @@ this.updateLayout();
         item.needsContent = false;
-        item.node!.requestContent().then(content => {
+        item.node!.requestContent().then((content) => {
           item.content = content;
@@ -87,3 +87,3 @@ this.updateLayout();
     const { items, animation } = this;
-    items.forEach(item => {
+    items.forEach((item) => {
       let hidden = !!(item.style && item.content);
@@ -111,3 +111,3 @@ if (
       nodePosition,
-      animation /*, animation, resize, align*/
+      animation /*, animation, resize, align*/,
     } = this;
@@ -114,0 +114,0 @@ if (!element) return;

src/web/RNSharedElementView.web.ts

@@ -6,3 +6,3 @@ import { RNSharedElementStyle } from "./RNSharedElementStyle.web";
   RNSharedElementAlign,
-  RNSharedElementResize
+  RNSharedElementResize,
 } from "./types";
@@ -141,3 +141,3 @@
       align,
-      resize
+      resize,
     } = this;
@@ -164,3 +164,3 @@ const { x, y, width, height } = layout;
       width: contentWidth,
-      height: contentHeight
+      height: contentHeight,
     } = contentLayout;
@@ -167,0 +167,0 @@

src/web/types.ts

@@ -22,3 +22,3 @@ export interface IRect {
   FadeIn = 2,
-  FadeOut = 3
+  FadeOut = 3,
 }
@@ -30,3 +30,3 @@
   Clip = 2,
-  None = 3
+  None = 3,
 }
@@ -44,3 +44,3 @@
   CenterCenter = 8,
-  CenterBottom = 9
+  CenterBottom = 9,
 }

No alert changes

Improved metrics

Total package byte prevSize

1356357

42.5%

Number of package files

214

15.68%

Lines of code

4730

0.42%

Number of lines in readme file

222

0.45%

No dependency changes