42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
// components/Hello.tsx
|
||
|
|
import React, {useState} from 'react';
|
||
|
|
import {Button, StyleSheet, Text, View} from 'react-native';
|
||
|
|
import {StatusBar, Platform, StatusBarProps} from 'react-native';
|
||
|
|
import {useIsFocused} from '@react-navigation/native';
|
||
|
|
import helper from '../helper/helper';
|
||
|
|
export interface Props {
|
||
|
|
backgroundColor: string;
|
||
|
|
dark: Boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const FocusAwareStatusBar = (props: StatusBarProps) => {
|
||
|
|
const isFocused = useIsFocused();
|
||
|
|
return isFocused ? <StatusBar {...props} /> : null;
|
||
|
|
};
|
||
|
|
const MyStatusbar: React.FC<Props> = props => {
|
||
|
|
const height = helper.statusBarHeight;
|
||
|
|
const data: StatusBarProps = {
|
||
|
|
backgroundColor: props.backgroundColor
|
||
|
|
? props.backgroundColor
|
||
|
|
: 'rgba(0,0,0,0)',
|
||
|
|
barStyle: props.dark ? 'dark-content' : 'light-content',
|
||
|
|
translucent: true,
|
||
|
|
};
|
||
|
|
console.log('height', height);
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
backgroundColor: props.backgroundColor,
|
||
|
|
height: height,
|
||
|
|
width: '100%',
|
||
|
|
}}>
|
||
|
|
<FocusAwareStatusBar {...data} />
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// styles
|
||
|
|
const styles = StyleSheet.create({});
|
||
|
|
|
||
|
|
export default MyStatusbar;
|