NishantRajputRN
68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
import React, { useRef,useEffect } from "react";
|
|
import { Text ,View,Animated, Platform} from "react-native";
|
|
import { customeButtons,GetPageTheme,customStyles,globalStyles, HP } from "../styles/Global";
|
|
import { useRoute } from '@react-navigation/native';
|
|
import { AntDesign } from "./icons";
|
|
|
|
const NetworkStatusBar = (props) => {
|
|
const route = useRoute();
|
|
const PageTheme=GetPageTheme(props.DarkTheme,route.name);
|
|
const globalStyle=globalStyles(props.DarkMode,route.name);
|
|
const customStyle=customStyles(props.DarkMode,route.name);
|
|
|
|
const NSBarAnim=useRef(new Animated.Value(0)).current;
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
showAnim()
|
|
}, [props.isInternetAvailable]);
|
|
|
|
function showAnim(){
|
|
console.log('show con change:',props.showConnChange,props.isInternetAvailable)
|
|
if(props.showConnChange==true){
|
|
animateView()
|
|
}
|
|
}
|
|
|
|
function animateView(){
|
|
// show
|
|
Animated.timing(NSBarAnim, {
|
|
toValue: 1,
|
|
duration: 500,
|
|
useNativeDriver:(Platform.OS=='ios'?false:true),
|
|
}).start();
|
|
|
|
if(props.isInternetAvailable==true){
|
|
// hide NS bar
|
|
setTimeout(()=>{
|
|
console.log('hidebar')
|
|
Animated.timing(NSBarAnim, {
|
|
toValue: 0,
|
|
duration: 500,
|
|
useNativeDriver:(Platform.OS=='ios'?false:true),
|
|
}).start();
|
|
},2500)
|
|
props.show_ConnChange({showConnChange:false})
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const tY=NSBarAnim.interpolate({
|
|
inputRange:[0,1],
|
|
outputRange:[50,0],
|
|
});
|
|
|
|
return (
|
|
<Animated.View style={[customStyle.netSBar,(props.isInternetAvailable==true ?customStyle.netSBarGreen:customStyle.netSBarGrey),
|
|
{transform:[{translateY:tY}]}
|
|
]}>
|
|
<Text style={[customStyle.netSBarText,(props.isInternetAvailable==true ?customStyle.netSBarGreen_Text:customStyle.netSBarGrey_Text)]}>{(props.isInternetAvailable==true?'Back Online':'No Connection! You are offline')}</Text>
|
|
</Animated.View>
|
|
)
|
|
};
|
|
export default NetworkStatusBar; |