react-native making status bar animated - react-native

Question

Initially, I have a black background with light-content barStyle but as I scroll up, the background color changes to white and I want to change the statusBar barStyle to 'dark-content'.
This is why I am trying to make my statusBar animated.
So far I have tried like this:
I made statusBar animated component
const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar)
set Animated input/output range
scroll = new Animated.Value(0)
statusBarColor = this.scroll.interpolate({
inputRange: [0, SCROLL_HEIGHT],
outputRange: ['white', 'black'],
extrapolate: "clamp"
})
conditionally change barstyle.
<AnimatedStatusBar backgroundColor='white' barStyle={this.statusBarColor ==='white'? 'light-content':'dark-content'} />
However, this is not working. How could I make the statusBar animated so that I could change the barStyle when I scroll to the top.

Answer 1

iOS
I changed <StatusBar/> props translucent to true
animated prop in <StatusBar/> to true
get status bar height from top value of useSafeArea hook
Create simple Animated.View having 100% width and status bar height
Android
Create AnimatedStatusBar with Animated.createAnimatedComponent(StatusBar);
Other steps are same
import { useSafeArea } from 'react-native-safe-area-context';
const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar);
function Page() {
const { top: safeAreaTop } = useSafeArea();
const barColorAnim = useRef(new Animated.Value(0)).current;
const barColor = barColorAnim.interpolate({
inputRange: [0, 1],
outputRange: ['black', 'white'],
});
const [barStyle, setBarStyle] = useState('light-content');
const toggle = () => {
setBarStyle((style) =>
style === 'light-content' ? 'dark-content' : 'light-content',
);
Animated.timing(barColorAnim, {
useNativeDriver: false,
duration: 300,
toValue: barStyle === 'light-content' ? 1 : 0,
}).start();
};
return (
<Container>
<Animated.View
style={{
width: '100%',
height: safeAreaTop,
backgroundColor: barColor,
}}
/>
<AnimatedStatusBar
animated={true}
backgroundColor={barColor}
barStyle={barStyle}
translucent={true}
/>
<Button title="Toggle" onPress={toggle} />
</Container>
);
}

Answer 2

import { View, TouchableOpacity, Animated, StatusBar, Text } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar);
const barColorAnim = new Animated.Value(0);
const barColor = barColorAnim.interpolate({
inputRange: [0, 1],
outputRange: ['black', 'white'],
});
export class App extends React.Component {
this.state = {
barStyle: 'light-content'
};
render() {
const toggle = () => {
this.setState({
barStyle: this.state.barStyle === 'light-content' ? 'dark-content' : 'light-content'
})
Animated.timing(barColorAnim, {
useNativeDriver: false,
duration: 300,
toValue: this.state.barStyle === 'light-content' ? 1 : 0,
}).start();
};
return (
<>
<SafeAreaProvider>
<AnimatedStatusBar
animated={true}
backgroundColor={barColor}
barStyle={this.state.barStyle}
translucent={true}
/>
<TouchableOpacity
onPress={toggle}><Text>Click toggle</Text></TouchableOpacity>
</SafeAreaProvider>
</>
);
}
}