From 82303cc355bc8d692dad68bc290058c59813a93e Mon Sep 17 00:00:00 2001 From: Hein Rutjes Date: Thu, 29 Aug 2019 13:15:48 +0200 Subject: [PATCH 1/5] docs: added development para to readme & cleaned up readme --- README.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 957b91c..9cc458a 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,10 @@ Native shared element transition *"primitives"* for react-native 💫 This library in itself is not a Navigation- or Router library. Instead, it provides a set of comprehensive full native building blocks for performing shared element transitions in Router- or Transition libraries. If you are looking [for the React Navigation binding, you can find it here](https://github.com/IjzerenHein/react-navigation-sharedelement). -# WORK IN PROGRESS - not ready yet - ![MagicMoveGif](set-ios.gif) ![MagicMoveGif](set-android.gif) + ## Motivation Shared-element transitions add **shine** to your app but can be hard to do in practise. @@ -27,9 +26,17 @@ This library solves that problem through an all native implementation which is v - [X] Cross-fade transitions - [X] Clipping reveal transitions + +## Under development + +This library is under active development. The iOS and Android implementations are mostly done, which exception of some edge cases. +The library also aims to support the `web` platform with an optimized DOM implementation. That development hasn't started yet. + + ## Index - [Motivation](#motivation) +- [Under development](#under-development) - [Installation](#installation) - [Basic usage](#basic-usage) - [How it works](#how-it-works) @@ -43,7 +50,6 @@ This library solves that problem through an all native implementation which is v - [SharedElementResize](#sharedelementresize) - [SharedElementAlign](#sharedelementalign) - [Example app](#example-app) -- [Todo](#todo) - [License](#license) - [Credits](#credits) @@ -52,7 +58,7 @@ This library solves that problem through an all native implementation which is v `yarn add react-native-shared-element` -Link the native code (TODO: Update for auto-linking) +Link the native code (TODO: Support for auto-linking) `react-native link react-native-shared-element` @@ -172,6 +178,7 @@ The following animation-types are available. | `move` | Moves the start- element to the end position | | `fade` | Cross-fades between the start- and end elements | + #### SharedElementResize | Resize | Description | @@ -181,6 +188,7 @@ The following animation-types are available. | `clip` | Do not resize, but clip the content to the size of the other content. This option is for instance useful in combination with `` components, where you want to reveal more text. | | `none` | Do not resize the content. When combined with `fade`, this creates a plain cross-fade effect without any resizing or clipping | + #### SharedElementAlign The following alignment options are available. @@ -194,13 +202,12 @@ When `auto` is selected, the default alignment strategy is used, which is `cente The example app is located in [`./Example`](./Example) and serves as an exploration and testing tool. It features a simple stack router which implements the shared element primitives. -## Todo - ## License Shared element transition library is licensed under [The MIT License](./LICENSE.txt). + ## Credits This project is supported by amazing people from [Expo.io](https://expo.io) From 3226dbc12307a78d509cd4c97d88976476709221 Mon Sep 17 00:00:00 2001 From: Hein Rutjes Date: Thu, 29 Aug 2019 13:39:23 +0200 Subject: [PATCH 2/5] docs: added additional transition effect docs --- README.md | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 9cc458a..434acdb 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ The library also aims to support the `web` platform with an optimized DOM implem - [Props](#props) - [SharedElementTransition](#sharedelementtransition) - [Props](#props-1) - - [Animations](#animations) + - [Transitions effects](#transitions-effects) - [SharedElementAnimation](#sharedelementanimation) - [SharedElementResize](#sharedelementresize) - [SharedElementAlign](#sharedelementalign) @@ -166,9 +166,20 @@ The `` component executes a shared element transition n | `debug` | `boolean` | Renders debug overlays for diagnosing measuring and animations | | `onMeasure` | `function` | Event handler that is called when nodes have been measured and snapshotted | -### Animations +### Transitions effects -The following animation-types are available. +The transition effect can be controlled using the `animation`, `resize` and `align` props. +In most cases you should leave these to their default values for the best possible results. + +If however the start- element and end elements are visually different, then it can make +sense to choose different values. For instance, if you are transitioning from a `` +with a `white` color to a `` with a `black` color, then using `animation="fade"` will +create a cross-fade between them. + +Another case is when you have a single-line of `` in the start- view and a full +description in the end- view. A `stretch` effect would in this case not look good, because +the end- element is much larger in size compared the start- element. +In this case you can use `resize="clip"` and `align="left-top"` to create a text reveal effect. #### SharedElementAnimation @@ -181,18 +192,16 @@ The following animation-types are available. #### SharedElementResize -| Resize | Description | -| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `auto` | Automatically selects the default resize behavior. For images this will create a best possible transition based on the `resizeMode` that is configured on the image. For other kinds of views, this will default to `stretch`. | -| `stretch` | Stretches the element to the same shape and size of the other element. If the aspect-ratio of the content differs, you may see stretched. In that case consider one of the other resize options. | -| `clip` | Do not resize, but clip the content to the size of the other content. This option is for instance useful in combination with `` components, where you want to reveal more text. | -| `none` | Do not resize the content. When combined with `fade`, this creates a plain cross-fade effect without any resizing or clipping | +| Resize | Description | +| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `auto` | Automatically selects the default resize behavior. For images this will perform the best possible transition based on the `resizeMode` of the image. For other kinds of views, this will default to `stretch`. | +| `stretch` | Stretches the element to the same shape and size of the other element. If the aspect-ratio of the content differs, you may see stretching. In that case consider the `clip` or `none` resize options. | +| `clip` | Do not resize, but clip the content to the size of the other content. This option is for instance useful in combination with `` components, where you want to reveal more text. | +| `none` | Do not resize the content. When combined with `fade`, this creates a plain cross-fade effect without any resizing or clipping | #### SharedElementAlign -The following alignment options are available. - `auto`, `left-center`, `left-top`, `left-right`, `right-center`, `right-top`, `right-right`, `center-top` `center-center`, `center-bottom` When `auto` is selected, the default alignment strategy is used, which is `center-center`. From 9204d39a3117df54389c93fd39d4f59e8fc5d506 Mon Sep 17 00:00:00 2001 From: Hein Rutjes Date: Fri, 30 Aug 2019 16:47:56 +0200 Subject: [PATCH 3/5] fix: fixed react-navigation demo due to API changes in the binding --- Example/src/screens/ReactNavigationScreen.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Example/src/screens/ReactNavigationScreen.js b/Example/src/screens/ReactNavigationScreen.js index 7ff4080..0fcd2b1 100644 --- a/Example/src/screens/ReactNavigationScreen.js +++ b/Example/src/screens/ReactNavigationScreen.js @@ -2,7 +2,7 @@ import * as React from "react"; import { View } from "react-native"; import { Icon } from "../components"; -import { createSharedElementTransitioner } from "react-navigation-sharedelement"; +import { createSharedElementStackNavigator } from "react-navigation-sharedelement"; import { createAppContainer } from "@react-navigation/native"; import { createStackNavigator } from "react-navigation-stack"; import { createBottomTabNavigator } from "react-navigation-tabs"; @@ -38,7 +38,7 @@ function isTabBarVisible(navigation: any): boolean { } } -const stackNavigator = createSharedElementTransitioner( +const stackNavigator = createSharedElementStackNavigator( createStackNavigator, { Stack: MainScreen, @@ -57,7 +57,7 @@ const stackNavigator = createSharedElementTransitioner( } ); -const modalNavigator = createSharedElementTransitioner( +const modalNavigator = createSharedElementStackNavigator( createStackNavigator, { Modal: MainScreen, @@ -76,7 +76,7 @@ const modalNavigator = createSharedElementTransitioner( } ); -const fadeNavigator = createSharedElementTransitioner( +const fadeNavigator = createSharedElementStackNavigator( createStackNavigator, { Fade: MainScreen, From f7d5f56ba0f830d28fddb62532450e8877cae9a7 Mon Sep 17 00:00:00 2001 From: Hein Rutjes Date: Fri, 30 Aug 2019 16:51:53 +0200 Subject: [PATCH 4/5] fix(android): fixed transition not visible when app was too busy --- .../sharedelement/RNSharedElementTransition.java | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransition.java b/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransition.java index 128e45b..f834664 100644 --- a/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransition.java +++ b/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransition.java @@ -107,15 +107,10 @@ protected void onLayout(boolean changed, int left, int top, int right, int botto // Wait for the whole layout pass to have completed before // requesting the layout and content - UIManagerModule uiManager = ((ThemedReactContext)getContext()).getNativeModule(UIManagerModule.class); - uiManager.addUIBlock(new UIBlock() { - public void execute (NativeViewHierarchyManager nvhm) { - requestStylesAndContent(true); - mInitialLayoutPassCompleted = true; - updateLayout(); - updateNodeVisibility(); - } - }); + requestStylesAndContent(true); + mInitialLayoutPassCompleted = true; + updateLayout(); + updateNodeVisibility(); } } From b123564b73fa04feb7b21134be64f3333c6880c0 Mon Sep 17 00:00:00 2001 From: Hein Rutjes Date: Fri, 30 Aug 2019 16:52:30 +0200 Subject: [PATCH 5/5] 0.4.2 --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f488cad..89f60aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## [0.4.2](https://github.com/IjzerenHein/react-native-shared-element/compare/v0.4.1...v0.4.2) (2019-08-30) + + +### Bug Fixes + +* fixed react-navigation demo due to API changes in the binding ([9204d39](https://github.com/IjzerenHein/react-native-shared-element/commit/9204d39)) +* **android:** fixed transition not visible when app was too busy ([f7d5f56](https://github.com/IjzerenHein/react-native-shared-element/commit/f7d5f56)) + + + ## [0.4.1](https://github.com/IjzerenHein/react-native-shared-element/compare/v0.4.0...v0.4.1) (2019-08-29) diff --git a/package.json b/package.json index 012e948..7fb7ff0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-shared-element", - "version": "0.4.1", + "version": "0.4.2", "description": "Native shared element transition primitives for react-native 💫", "author": "IjzerenHein ", "keywords": [