iOS
- Я изменил
<StatusBar/>
реквизиты translucent
на true
animated
пропустить в <StatusBar/>
в true - получить высоту строки состояния от верхнего значения
useSafeArea
hook - Создать простое
Animated.View
, имеющее 100% width
и строку состояния height
Android
- Создать
AnimatedStatusBar
с Animated.createAnimatedComponent(StatusBar);
Другие шаги такие же
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>
);
}