Blinking animation

[MatteoBuffo]

Hello. My goal is to have what is reported in the image below:

Steps:

• there is a component with backgroundColor: transparent
• the user presses a button;
• the component now has backgroundColor: yellow;
• after a delay (e.g. 500 ms), the component background is reset to transparent.

Is it possible to implement this mechanism?

I think the code would should be an advanced version of this:

const myValue = useSharedValue(false);
const myStyle = useAnimatedStyle(() => {
	return {
		backgroundColor: withTiming(myValue.value ? "yellow" : "transparent", {})
	};
});

...

<MyComponent style={myStyle}/>

Something like this:

const myValue = useSharedValue(false);
const myValueDerived = useDerivedValue(() => {
	if(myValue.value){
		setTimeout(() => {
			myValue.value = false
		}, 500)
	}
	return myValue
})
const myStyle = useAnimatedStyle(() => {
	return {
		backgroundColor: withTiming(myValueDerived ? "yellow" : "transparent", {})
	};
});

...

<MyComponent style={myStyle}/>

but it crashes. Any ideas on this?

[sssajjad007]

hi.
This is simple solution for your question.

import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import React from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
} from 'react-native-reanimated';

export function Onclick() {
  const toggle = useSharedValue(0);
  const activeStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: withDelay(
        500,
        withTiming(toggle.value === 1 ? 'yellow' : 'transparent'),
      ),
    };
  });
  return (
    <View style={styles.container}>
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          toggle.value = 1;
          setTimeout(() => {
            toggle.value = 0;
          }, 500);
        }}>
        <Animated.View style={[styles.button, activeStyle]}>
          <Text style={{color: 'black'}}>{'My component'}</Text>
        </Animated.View>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 120,
    height: 60,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
  },
});

There are better ways to solve this question. Notif me, if you are interested ✌️

[MatteoBuffo]

Thanks, it works like a charm!