Just playn

Example/App.js

@@ -20,6 +20,7 @@ import TransitionsSequence from './transitions/sequence';
 import TransitionsShuffle from './transitions/shuffle';
 import TransitionsProgress from './transitions/progress';
 import TransitionsTicket from './transitions/ticket';
+import TransitionsFancyPants from './transitions/fancyPants';
 
 import InteractablePlayground, {
   SCREENS as INTERACTABLE_SCREENS,
@@ -72,6 +73,10 @@ const SCREENS = {
     screen: TransitionsTicket,
     title: 'Transitions – flight ticket demo',
   },
+  transitionsFancyPants: {
+    screen: TransitionsFancyPants,
+    title: 'Transitions – fancy pants',
+  },
 };
 
 class MainScreen extends React.Component {
@@ -118,7 +123,7 @@ const ExampleApp = createStackNavigator(
     ...INTERACTABLE_SCREENS,
   },
   {
-    initialRouteName: 'Main',
+    initialRouteName: 'transitionsFancyPants',
   }
 );
 

Example/transitions/fancyPants.js

@@ -0,0 +1,220 @@
+import React, { useState, useRef } from 'react';
+import {
+  Text,
+  View,
+  StyleSheet,
+  Button,
+  StatusBar,
+  TextInput,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { Transitioning, Transition } from 'react-native-reanimated';
+import {} from 'react-native-paper';
+
+function Row({ label, editing, value, onValueChange, startEditing, blur }) {
+  return (
+    <View style={styles.row}>
+      <Text style={styles.label}>{label}</Text>
+      {editing ? (
+        <TextInput
+          autoFocus
+          style={styles.value}
+          keyboardType="decimal-pad"
+          value={value}
+          onChangeText={onValueChange}
+          onBlur={blur}
+        />
+      ) : (
+        <TouchableWithoutFeedback onPress={startEditing}>
+          <Text style={styles.value}>{value}</Text>
+        </TouchableWithoutFeedback>
+      )}
+    </View>
+  );
+}
+
+function FancyPants() {
+  const [value, changeValue] = useState('10.80');
+  const [editing, setEditing] = useState(false);
+  const ref = useRef();
+
+  const startEditing = () => {
+    ref.current.animateNextTransition();
+    setEditing(true);
+  };
+
+  const blur = () => {
+    ref.current.animateNextTransition();
+    setEditing(false);
+  };
+
+  const transition = (
+    <Transition.Sequence>
+      <Transition.Together>
+        <Transition.Out type="fade" />
+        <Transition.In type="fade" />
+      </Transition.Together>
+      <Transition.Change interpolation="easeInOut" />
+    </Transition.Sequence>
+  );
+
+  return (
+    <Transitioning.View ref={ref} transition={transition} style={{ flex: 1 }}>
+      <View style={editing ? styles.editor : styles.card}>
+        <Row
+          label="Food"
+          startEditing={startEditing}
+          blur={blur}
+          editing={editing}
+          value={value}
+          onValueChange={changeValue}
+        />
+        <View style={styles.bar} />
+        <View style={styles.row}>
+          <Text style={styles.summary}>Sum</Text>
+          <Text style={styles.editValue}>10.80</Text>
+        </View>
+        {!editing && (
+          <Text style={styles.description}>
+            Make sure to check your order before sending. Once sent your credit
+            card will be charged and you will never get your money back.
+          </Text>
+        )}
+      </View>
+      <View style={styles.button}>
+        <Text style={styles.buttonText}>Send</Text>
+      </View>
+    </Transitioning.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'white',
+    margin: 20,
+    marginTop: 30,
+    borderRadius: 3,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    padding: 20,
+    // flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    backgroundColor: '#C5D8F8',
+    alignSelf: 'center',
+    height: 40,
+    width: 100,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontWeight: 'bold',
+    fontFamily: 'Menlo',
+    color: '#0E2146',
+  },
+  editor: {
+    backgroundColor: 'white',
+    // shadowColor: '#000',
+    // shadowOffset: {
+    //   width: 0,
+    //   height: 2,
+    // },
+    // shadowOpacity: 0.25,
+    // shadowRadius: 3.84,
+    // elevation: 5,
+    padding: 20,
+    height: '100%',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    fontWeight: 'bold',
+  },
+  value: {
+    color: '#B5B9C0',
+    fontFamily: 'Menlo',
+  },
+  description: {
+    color: '#B5B9C0',
+    fontSize: 12,
+    fontFamily: 'Menlo',
+    marginTop: 20,
+  },
+  summary: {
+    color: '#B5B9C0',
+    fontWeight: 'bold',
+    fontFamily: 'Menlo',
+  },
+  label: {
+    fontWeight: 'bold',
+    fontFamily: 'Menlo',
+    color: '#0E2146',
+  },
+  editValue: {
+    fontFamily: 'Menlo',
+    color: '#0E2146',
+  },
+  bar: {
+    height: StyleSheet.hairlineWidth,
+    alignSelf: 'stretch',
+    marginVertical: 10,
+    backgroundColor: '#EDECED',
+  },
+  text: {
+    fontSize: 16,
+    margin: 10,
+  },
+});
+
+// function Sequence() {
+//   const transition = (
+//     <Transition.Together>
+//       <Transition.Out type="scale" durationMs={1500} />
+//       <Transition.Change interpolation="easeInOut" />
+//       <Transition.In type="fade" />
+//     </Transition.Together>
+//   );
+
+//   let [showText, setShowText] = useState(true);
+//   const ref = useRef();
+
+//   return (
+//     <Transitioning.View
+//       ref={ref}
+//       transition={transition}
+//       style={styles.centerAll}>
+//       <Button
+//         title="show or hide"
+//         color="#FF5252"
+//         onPress={() => {
+//           ref.current.animateNextTransition();
+//           setShowText(!showText);
+//         }}
+//       />
+//       {showText && (
+//         <View
+//           style={{
+//             backgroundColor: '#ff5252',
+//             margin: 10,
+//             padding: 150,
+//             paddingHorizontal: 120,
+//           }}>
+//           <Text style={{ color: 'white' }}>Who</Text>
+//           <Text style={{ color: 'white' }}>dis?</Text>
+//         </View>
+//       )}
+//     </Transitioning.View>
+//   );
+// }
+
+export default FancyPants;

Example/transitions/sequence.js

@@ -4,11 +4,11 @@ import { Transitioning, Transition } from 'react-native-reanimated';
 
 function Sequence() {
   const transition = (
-    <Transition.Sequence>
-      <Transition.Out type="scale" />
+    <Transition.Together>
+      <Transition.Out type="scale" durationMs={1500} />
       <Transition.Change interpolation="easeInOut" />
-      <Transition.In type="fade" />
-    </Transition.Sequence>
+      <Transition.In type="circle" />
+    </Transition.Together>
   );
 
   let [showText, setShowText] = useState(true);
@@ -28,7 +28,16 @@ function Sequence() {
         }}
       />
       {showText && (
-        <Text style={styles.text}>Tap the above button to hide me</Text>
+        <View
+          style={{
+            backgroundColor: '#ff5252',
+            margin: 10,
+            padding: 150,
+            paddingHorizontal: 120,
+          }}>
+          <Text style={{ color: 'white' }}>Who</Text>
+          <Text style={{ color: 'white' }}>dis?</Text>
+        </View>
       )}
     </Transitioning.View>
   );

android/src/main/java/android/support/transition/InteractiveTransition.java

@@ -0,0 +1,24 @@
+package android.support.transition;
+
+import android.view.ViewGroup;
+
+import java.util.ArrayList;
+
+public class InteractiveTransition extends TransitionSet {
+
+  @Override
+  protected void createAnimators(ViewGroup sceneRoot,
+                                 TransitionValuesMaps startValues,
+                                 TransitionValuesMaps endValues,
+                                 ArrayList<TransitionValues> startValuesList,
+                                 ArrayList<TransitionValues> endValuesList) {
+    super.createAnimators(sceneRoot, startValues, endValues, startValuesList, endValuesList);
+  }
+
+  @Override
+  protected void runAnimators() {
+
+    super.runAnimators();
+  }
+}
+

android/src/main/java/com/swmansion/reanimated/transitions/CircularReveal.java

@@ -0,0 +1,57 @@
+package com.swmansion.reanimated.transitions;
+
+import android.animation.Animator;
+import android.os.Build;
+import android.os.Handler;
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
+import android.support.annotation.RequiresApi;
+import android.support.transition.Transition;
+import android.support.transition.TransitionManager;
+import android.support.transition.TransitionValues;
+import android.support.transition.Visibility;
+import android.view.View;
+import android.view.ViewAnimationUtils;
+import android.view.ViewGroup;
+
+import com.facebook.react.bridge.UiThreadUtil;
+
+public class CircularReveal extends Visibility {
+
+  public CircularReveal() {
+    setMode(Visibility.MODE_IN);
+  }
+
+  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
+  @Override
+  public Animator onAppear(ViewGroup sceneRoot,
+                           View view,
+                           TransitionValues startValues,
+                           TransitionValues endValues) {
+    int x = 0; //sceneRoot.getRight();
+    int y = 0; //sceneRoot.getBottom();
+//    Transition.
+
+    int startRadius = 0;
+    int endRadius = (int) Math.hypot(view.getWidth(), view.getHeight());
+
+    Animator animator = ViewAnimationUtils.createCircularReveal(view, x, y, startRadius, endRadius);
+    animator.setDuration(1500);
+    return animator;
+  }
+
+  @Nullable
+  @Override
+  public Animator createAnimator(@NonNull ViewGroup sceneRoot, @Nullable TransitionValues startValues, @Nullable TransitionValues endValues) {
+    final Animator animator = super.createAnimator(sceneRoot, startValues, endValues);
+    if (animator != null) {
+//      new Handler().postDelayed(new Runnable() {
+//        @Override
+//        public void run() {
+//          animator.pause();
+//        }
+//      }, 500);
+    }
+    return animator;
+  }
+}

android/src/main/java/com/swmansion/reanimated/transitions/Scale.java

@@ -3,10 +3,16 @@ package com.swmansion.reanimated.transitions;
 import android.animation.Animator;
 import android.animation.AnimatorSet;
 import android.animation.ObjectAnimator;
+import android.animation.TimeAnimator;
+import android.animation.ValueAnimator;
+import android.os.Handler;
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
 import android.support.transition.Transition;
 import android.support.transition.TransitionListenerAdapter;
 import android.support.transition.TransitionValues;
 import android.support.transition.Visibility;
+import android.util.Log;
 import android.view.View;
 import android.view.ViewGroup;
 
@@ -54,21 +60,22 @@ public class Scale extends Visibility {
     }
 
     view.setScaleX(startScaleX);
-    view.setScaleY(startScaleY);
+//    view.setScaleY(startScaleY);
 
-    AnimatorSet animator = new AnimatorSet();
-    animator.playTogether(
-            ObjectAnimator.ofFloat(view, View.SCALE_X, startScaleX, endScaleX),
-            ObjectAnimator.ofFloat(view, View.SCALE_Y, startScaleY, endScaleY));
-    addListener(new TransitionListenerAdapter() {
-      @Override
-      public void onTransitionEnd(Transition transition) {
-        view.setScaleX(initialScaleX);
-        view.setScaleY(initialScaleY);
-        transition.removeListener(this);
-      }
-    });
-    return animator;
+//    AnimatorSet animator = new AnimatorSet();
+//    animator.playTogether(
+//            ObjectAnimator.ofFloat(view, View.SCALE_X, startScaleX, endScaleX),
+//            ObjectAnimator.ofFloat(view, View.SCALE_Y, startScaleY, endScaleY));
+//    addListener(new TransitionListenerAdapter() {
+//      @Override
+//      public void onTransitionEnd(Transition transition) {
+//        view.setScaleX(initialScaleX);
+//        view.setScaleY(initialScaleY);
+//        transition.removeListener(this);
+//      }
+//    });
+//    return animator;
+    return ObjectAnimator.ofFloat(view, View.SCALE_X, startScaleX, endScaleX);
   }
 
   @Override
@@ -80,4 +87,34 @@ public class Scale extends Visibility {
   public Animator onDisappear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
     return createAnimation(view, 1f, 0f, startValues);
   }
+
+  @Nullable
+  @Override
+  public Animator createAnimator(@NonNull ViewGroup sceneRoot, @Nullable TransitionValues startValues, @Nullable TransitionValues endValues) {
+    Animator animator = super.createAnimator(sceneRoot, startValues, endValues);
+    if (animator != null && animator instanceof ValueAnimator) {
+      final ValueAnimator valueAnimator = (ValueAnimator) animator;
+      new Handler().postDelayed(new Runnable() {
+        @Override
+        public void run() {
+          valueAnimator.pause();
+        }
+      }, 1000);
+      new Handler().postDelayed(new Runnable() {
+        @Override
+        public void run() {
+          valueAnimator.resume();
+          valueAnimator.setCurrentPlayTime(800);
+          valueAnimator.pause();
+        }
+      }, 2500);
+      new Handler().postDelayed(new Runnable() {
+        @Override
+        public void run() {
+          valueAnimator.resume();
+        }
+      }, 5000);
+    }
+    return animator;
+  }
 }

android/src/main/java/com/swmansion/reanimated/transitions/TransitionUtils.java

@@ -1,6 +1,7 @@
 package com.swmansion.reanimated.transitions;
 
 import android.support.transition.Fade;
+import android.support.transition.InteractiveTransition;
 import android.support.transition.SidePropagation;
 import android.support.transition.Slide;
 import android.support.transition.Transition;
@@ -23,6 +24,10 @@ class TransitionUtils {
   static @Nullable Transition inflate(ReadableMap config) {
     String type = config.getString("type");
     if ("group".equals(type)) {
+//      Transition group = inflateGroup(config);
+//      InteractiveTransition interactive = new InteractiveTransition();
+//      interactive.addTransition(group);
+//      return interactive;
       return inflateGroup(config);
     } else if ("in".equals(type)) {
       return inflateIn(config);
@@ -101,6 +106,8 @@ class TransitionUtils {
       return null;
     } else if ("fade".equals(type)) {
       return new Fade(Fade.IN | Fade.OUT);
+    } else if ("circle".equals(type)) {
+      return new CircularReveal();
     } else if ("scale".equals(type)) {
       return new Scale();
     } else if ("slide-top".equals(type)) {