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
```js
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>
)}
</>
);
}
```
Opera, Safari, Firefox and Chrome now all share a set of enhanced Array methods for optimizing many common loops.
You may not need all of them, but they can be very useful, or would be if every browser supported them.
Mozilla Labs published the algorithms they and [WebKit][1] both use, so that you can add them yourself.
**filter** returns an array of items that satisfy some condition or test.
**every** returns true if every array member passes the test.
**some** returns true if any pass the test.
**forEach** runs a function on each array member and doesn't return anything.
**map** is like forEach, but it returns an array of the results of the operation for each element.
These methods all take a function for their first argument and have an optional second argument, which is an object whose scope you want to impose on the array members as they loop through the function.
Ignore it until you need it.
**indexOf** and **lastIndexOf** find the appropriate position of the first or last element that matches its argument exactly.
(function(){
var p, ap= Array.prototype, p2={
filter: function(fun, scope){
var L= this.length, A= [], i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
val= this[i];
if(fun.call(scope, val, i, this)){
A[A.length]= val;
}
}
++i;
}
}
return A;
},
every: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i<L){
if(i in this && !fun.call(scope, this[i], i, this))
return false;
++i;
}
return true;
}
return null;
},
forEach: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
fun.call(scope, this[i], i, this);
}
++i;
}
}
return this;
},
indexOf: function(what, i){
i= i || 0;
var L= this.length;
while(i< L){
if(this[i]=== what)
return i;
++i;
}
return -1;
},
lastIndexOf: function(what, i){
var L= this.length;
i= i || L-1;
if(isNaN(i) || i>= L)
i= L-1;
else
if(i< 0) i += L;
while(i> -1){
if(this[i]=== what)
return i;
--i;
}
return -1;
},
map: function(fun, scope){
var L= this.length, A= Array(this.length), i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
A[i]= fun.call(scope, this[i], i, this);
}
++i;
}
return A;
}
},
some: function(fun, scope){
var i= 0, L= this.length;
if(typeof fun== 'function'){
while(i<L){
if(i in this && fun.call(scope, this[i], i, this))
return true;
++i;
}
return false;
}
}
}
for(p in p2){
if(!ap[p])
ap[p]= p2[p];
}
return true;
})();
[1]: http://en.wikipedia.org/wiki/WebKit
