3

I am trying to implement scaling View with Opacity togather through React native reanimated v2, but not able to contol withRepeat ...

Below code is just Perform scaling withRepeat but not Opacity. How to control Opacity + Scaling of view withRepeat ... Want to apply scaling and Opacity both on view in loop/Repeat.

import React, { useState } from 'react';
import { View, TouchableWithoutFeedback } from 'react-native';
import Animated,
{ withRepeat, useSharedValue, interpolate, useAnimatedStyle, useDerivedValue, withTiming }
  from 'react-native-reanimated'

import Styles from './Styles';

function LoopApp() {
  const [state, setState] = useState(0);

  const scaleAnimation = useSharedValue(1);
  const animationOpacityView = useSharedValue(1);

  scaleAnimation.value = withRepeat(withTiming(2.5, { duration: 2000 }), -1, true);
  //animationOpacityView.value = withRepeat(0, -1, true);

  const debug = useDerivedValue(() => {
   // console.log(scaleAnimation.value);
    return scaleAnimation.value;
  });

  const growingViewStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scaleAnimation.value }],
      opacity: withTiming(animationOpacityView.value, {
        duration: 1500
      }, () => {
        animationOpacityView.value = 0.99
      })
    };
  });

  return (
    <View style={Styles.container}>
      <Animated.View style={[Styles.viewStyle, growingViewStyle]} />
    </View>
  );
}

export default LoopApp;

Style.js

import {DevSettings, Dimensions, I18nManager} from 'react-native';
import Constants from '../../common/Constants';

const Screen = {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
};

export default {
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  viewStyle: {
    backgroundColor: '#19a35c',
    width: Screen.width * 0.0364,
    height: Screen.width * 0.0364,
    borderRadius: 100,
  },
};
Azhar
  • 20,500
  • 38
  • 146
  • 211

0 Answers0