How to draw a line with animation by React Native - react-native

Question

I have some graphs and need to show the drawing path.
In the iOS, i can stroke the graph in CALayer with CABasicAnimation
How to do animation for stroking in React Native

Answer 1

To render an animated Line in a chart, you can use a charts library. One of the simplest and best-documented charts libraries in react native is - react-native-gifted-charts
It will not only make the animations easy to implement, but also let you easily customise and beautify your chart. Here is an animated Line chart made using this library. And below is the code for the same-
import { LineChart } from "react-native-gifted-charts"
const App = () => {
const lineData = [
{value: 0, dataPointText: '0'},
{value: 20, dataPointText: '20'},
{value: 18, dataPointText: '18'},
{value: 40, dataPointText: '40'},
{value: 36, dataPointText: '36'},
{value: 60, dataPointText: '60'},
{value: 54, dataPointText: '54'},
{value: 85, dataPointText: '85'}
];
return (
<View style={{backgroundColor: '#1A3461'}}>
<LineChart
initialSpacing={0}
data={lineData}
spacing={30}
textColor1="yellow"
textShiftY={-8}
textShiftX={-10}
textFontSize={13}
thickness={5}
hideRules
hideYAxisText
yAxisColor="#0BA5A4"
showVerticalLines
verticalLinesColor="rgba(14,164,164,0.5)"
xAxisColor="#0BA5A4"
color="#0BA5A4"
/>
</View>
);
};

Answer 2

it is an old question but I post the answer for the reference. You can use Animated from "react-native". you have to consider three directions: Horizontal, Vertical and diagonal. I added the comments to clarify the code
import React, { ReactElement, useRef, useEffect } from "react";
import { StyleSheet, Animated } from "react-native";
// size prop is to determine the size of graph
export default function Line({ size }): ReactElement {
// Pythagorean theorem to calculate the diagonal height
const diagonalHeight = Math.sqrt(Math.pow(size, 2) + Math.pow(size, 2));
// if we dont use ref, animation will be reinitialized everytime we rerender the component
// we want animation to be rendered when component reredners so we use useeffect
const animationRef = useRef<Animated.Value>(new Animated.Value(0));
useEffect(() => {
// timing is a linear animation
Animated.timing(animationRef.current, {
toValue: 1,
duration: 700,
// true might not work with the all properties that you need to animate. true might improve animation performance
useNativeDriver: false
}).start();
}, []);
return (
<>
{conditionForVerticalDisplay && (
// if we are using Animated, it has to be inside Animated.View not View
<Animated.View
style={[
// you can pass multiple style objects
{
// interpolate maps the animated value to another value
height: animationRef.current.interpolate({
inputRange: [0, 1],
outputRange: ["0%", "100%"]
})
}
]}
></Animated.View>
)}
{conditionForHorizontalDisplay && (
<Animated.View
style={[
{
height: animationRef.current.interpolate({
inputRange: [0, 1],
outputRange: ["0%", "100%"]
})
}
]}
></Animated.View>
)}
{ conditionForDiagonalDisplay && (
<Animated.View
style={[
{
height: diagonalHeight,
transform: [
{
// negative will shift it upward.
// translateY: -(diagonalHeight - size) / 2
translateY: animationRef.current.interpolate({
inputRange: [0, 1],
outputRange: [size / 2, -(diagonalHeight - size) / 2]
})
},
{
rotateZ: conditionToPosOrNegDiagonal === "MAIN" ? "-45deg" : "45deg"
}
]
}
]}
></Animated.View>
)}
</>
);
}