How can we make an animated strike through on react native text?

Question

I have a todo list, each list item has a check box. When I check the box, an animated strike-through effect should show from left to right. How to do that?

score 7 · Accepted Answer · answered Dec 12 '20 at 07:59

7

Unfortunately, you can't animate strike directly but I used some tricks to achieve the same effect.

import React from 'react';
import { Animated, Easing, Text, View, StyleSheet } from 'react-native';

export default function App() {
  const ref = React.useRef(View.prototype);
  const animatedValue = React.useRef(new Animated.Value(0)).current;

  const [textWidth, setTextWidth] = React.useState(0);
  const [textHeight, setTextHeight] = React.useState(0);

  React.useEffect(() => {
    ref.current.measure((x, y, w, h) => {
      setTextWidth(w);
      setTextHeight(h);
      animateStrike();
    });
  }, []);

  const animateStrike = () => {
    Animated.timing(animatedValue, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();
  };

  const strikeWidth = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, textWidth],
    extrapolate: 'clamp',
  });

  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.text} ref={ref}>
          Some Dummy Text
        </Text>
        <Animated.View
          style={[
            styles.strike,
            { width: strikeWidth, top: textHeight / 2 + 1 },
          ]}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
  },
  strike: {
    position: 'absolute',
    height: 2,
    backgroundColor: 'red',
  },
});

You can check the demo here.

answered Dec 12 '20 at 07:59

Leri Gogsadze

2,958
2
15
24

I dont know why this code is not working in my local machine – Supriya Gorai Dec 12 '20 at 15:30
@SupriyaGorai Did you check snack? – Leri Gogsadze Dec 12 '20 at 16:00
@SupriyaGorai I'm glad. Thanks. Good luck. – Leri Gogsadze Dec 12 '20 at 17:55
@J.Dow how can I reset the animation again? like I have a checkbox when clicking on the check box the animation is done correctly. but when I am unchecking the checkbox and check again the animation is not showing, it is showing like a normal strike through – Supriya Gorai Dec 12 '20 at 18:34
@J.Done check this - https://snack.expo.io/@supu/414e51 – Supriya Gorai Dec 12 '20 at 18:46
@SupriyaGorai How can you handle unchecking? – Leri Gogsadze Dec 12 '20 at 18:49
Inside **handleCheckBox** function before everything write following `if (!isChecked) animatedValue.setValue(0);`. – Leri Gogsadze Dec 12 '20 at 18:57
I updated your [snack](https://snack.expo.io/bon-JmV89). – Leri Gogsadze Dec 12 '20 at 18:58
Thank you so much. Can you please suggest any course or youtube to learn react-native animation ? – Supriya Gorai Dec 13 '20 at 03:33
1

@SupriyaGorai [This](https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae) helped me when I was a beginner. If you prefer to react-native-reanimated then [this](https://codedaily.io/courses/7/React-Native-Reanimated-Fundamentals) is a good starting point. – Leri Gogsadze Dec 13 '20 at 09:23

score 0 · Answer 2 · answered Dec 12 '20 at 08:18

There is no way to achieve strikethough text with animation but you can customize it with the way like it's doing here Text animation with CSS - strike through line

You can create custom horizontal ProgressBar and animate it with absolute on Text so It might look the same you want.

How can we make an animated strike through on react native text?

2 Answers2

Linked