Animated View scaling only half of the screen width - expo

Question

Animated.View is only scaling to the half of the screen width provided.
Secondly, why do I have to give width in the stylesheet for this to work and what is the particular reason for giving it length 1.
If I increase the width in stylesheet to 2 the Progress Bar covers the entire screen width
import React from 'react'
import { View, Animated, StyleSheet, Dimensions, Easing } from 'react-native'
export default class ProgressBar extends React.Component {
state = {
percent: new Animated.Value(0)
}
componentDidMount() {
this.startAnimation()
}
startAnimation = () => {
this.animation = Animated.timing(this.state.percent, {
toValue: 100,
duration: this.props.timeRemaining*1000,
easing: Easing.linear,
useNativeDriver: true,
})
this.animation.start()
}
render() {
return(
<Animated.View
style={[
styles.bar,
{transform: [{
scaleX: this.state.percent.interpolate({
inputRange: [0, 100],
outputRange: [0, Dimensions.get('window').width]
})
}] }
]}
/>
// <View style={[styles.bar, {width: Dimensions.get('window').width}]}/>
)
}
}
const styles = StyleSheet.create({
bar: {
height: 30,
width: 1,
backgroundColor: 'tomato',
}
})

Answer 1

as I said in Animated View scaling only half of the screen width half of your <Animated.View> is out of your screen and you are not able to see it.
use TranslateX to solve it.
this is working for me:
import * as React from 'react';
import {
Animated,
Dimensions
} from 'react-native';
export default function () {
const timer = new Animated.Value(0);
const { width } = Dimensions.get("window");
const startAnimation = () => {
Animated.timing(timer, {
duration: 2000,
toValue: 1,
useNativeDriver: true,
isInteraction: false,
}).start();
};
React.useEffect(() => {
startAnimation()
}, []);
return (
<Animated.View
style={[
{
width,
height: 5,
backgroundColor: 'blue',
transform: [
{
translateX: timer.interpolate(
{
inputRange: [0, 1],
outputRange: [-width / 2, 0],
}
),
},
{
// you can use scaleX : timer if you don't need interpolation
scaleX: timer.interpolate(
{
inputRange: [0, 1],
outputRange: [0, 1],
}
),
},
],
},
]}
/>
);
}