ClipAnimation.js

import React from "react";
import {
  View,
  SafeAreaView,
  Text,
  Dimensions,
  StyleSheet,
  TouchableWithoutFeedback
} from "react-native";
import Svg, {
  Rect,
  ClipPath,
  Circle,
  G,
  Defs,
  TSpan,
  Text as SText
} from "react-native-svg";
import Animated, { Easing } from "react-native-reanimated";
import TouchableOpacityG from "./TouchableSvg";

const {
  Clock,
  Value,
  set,
  startClock,
  stopClock,
  clockRunning,
  eq,
  timing,
  cond,
  interpolate,
  block,
  debug
} = Animated;

const { width } = Dimensions.get("window");

const wWidth = width - 40;

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

function runTiming(value, activeDest, inactiveDest, status) {
  const clock = new Clock();

  const state = {
    finished: new Value(0),
    position: value,
    time: new Value(0),
    frameTime: new Value(0)
  };

  const config = {
    duration: 1200,
    easing: Easing.inOut(Easing.ease)
  };

  const activeConfig = { ...config, toValue: activeDest };
  const inactiveConfig = { ...config, toValue: inactiveDest, duration: 400 };

  return block([
    cond(clockRunning(clock), 0, [
      // If the clock isn't running we reset all the animation params and start the clock
      set(state.finished, 0),
      set(state.time, 0),
      set(state.position, value),
      set(state.frameTime, 0),
      startClock(clock)
    ]),
    // we run the step here that is going to update position
    cond(
      eq(status, true),
      [timing(clock, state, activeConfig)],
      [timing(clock, state, inactiveConfig)]
    ),
    cond(state.finished, debug("stop clock", stopClock(clock))),
    state.position
  ]);
}

class ClipAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.expanded = new Value(false);

    this.animationControl = runTiming(new Value(0), 1, 0, this.expanded);

    this.r = interpolate(this.animationControl, {
      inputRange: [0, 1],
      outputRange: [25, 500]
    });
  }

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <TouchableWithoutFeedback onPress={() => this.expanded.setValue(false)}>
          <View style={{ padding: 20, flex: 1 }}>
            <View
              style={{
                flex: 1
              }}
            >
              <View>
                <Svg height="300" width="100%">
                  <ClipPath id="clip">
                    <AnimatedCircle
                      cx={wWidth - 25}
                      cy={25}
                      r={this.r}
                      fill="#ddd"
                    />
                  </ClipPath>
                  <Rect
                    width="100%"
                    height="240"
                    fill="blue"
                    rx="10"
                    clipPath="url(#clip)"
                    onPress={() => this.expanded.setValue(true)}
                  />
                  <SText
                    y="30"
                    fontSize="20"
                    fill="#fff"
                    fontWeight="bold"
                    x={wWidth - 28}
                  >
                    i
                  </SText>

                  <SText
                    y="100"
                    fontSize="50"
                    fill="#fff"
                    fontWeight="bold"
                    x={30}
                  >
                    Hello
                  </SText>

                  <SText
                    y="150"
                    fontSize="20"
                    fill="#fff"
                    fontWeight="500"
                    x={20}
                  >
                    <TSpan x="10" dx="20">
                      This is a Text to inform you
                    </TSpan>
                    <TSpan x="10" dy="30" dx="20">
                      something important .
                    </TSpan>
                  </SText>
                </Svg>
              </View>

              <View>
                <Text
                  style={{
                    color: "blue",
                    fontWeight: "800",
                    fontSize: 45,
                    textAlign: "center"
                  }}
                >
                  {"Clip\nAnimation"}
                </Text>
              </View>
              <View />
            </View>
          </View>
        </TouchableWithoutFeedback>
      </SafeAreaView>
    );
  }
}

export default ClipAnimation;