@react-navigation/native#useIsFocused JavaScript Examples

export default function TransitionView({ navigation, children }) {
  let fadeAnim = useRef(new Animated.Value(1)).current;
  let focused = useIsFocused();
  let prevFocused = useRef(focused);

  // A cheap effect to make up for the fact that we are using transparent cards,
  // and the new native animator doesn't automatically fade out the previous
  // card as it's going away (or coming in if going back). This works fine for
  // navigating forwards, but less than ideal going backwards because it won't
  // fade in until the gesture finishes. Need to look into how to perform custom
  // gesture-based navigations
  useEffect(() => {
    if (prevFocused.current !== focused) {
      Animated.timing(fadeAnim, {
        toValue: focused ? 1 : 0,
        duration: 200,
        useNativeDriver: true
      }).start();
    }
  }, [focused]);

  useEffect(() => {
    prevFocused.current = focused;
  });

  return (
    <Animated.View style={{ flex: 1, opacity: fadeAnim }} children={children} />
  );
}

Header = ({ title, navigation }) => {
  const needUpdate = useContext(NeedUpdateContext);
  const [settingsVisible, setSettingsVisible] = useState(false);
  const [drawerVisible, setDrawerVisible] = useState();
  const [badge, setBadge] = useState(false);

  const updateBadge = useCallback(async () => {
    const news = await getBadgeNotesVersion();
    const supported = await localStorage.getSupported();
    const badgeProNPS = await localStorage.getVisitProNPS();
    setBadge(needUpdate || news || (supported === "PRO" && !badgeProNPS));
  }, [needUpdate]);

  const isFocused = useIsFocused();
  useEffect(() => {
    if (isFocused) updateBadge();
  }, [isFocused, updateBadge]);

  return (
    <View style={styles.container}>
      <Settings visible={settingsVisible} navigation={navigation} onClick={() => setSettingsVisible(false)} />
      <Drawer
        visible={drawerVisible}
        navigation={navigation}
        onClick={() => {
          updateBadge();
          setDrawerVisible(false);
        }}
      />
      <Icon
        color="#fff"
        badge={badge}
        icon="BurgerSvg"
        width={20}
        height={20}
        onPress={() => setDrawerVisible(true)}
      />
      <Text style={styles.title}>{title}</Text>
      <Icon
        color="#fff"
        spin={settingsVisible}
        icon="GearSvg"
        width={25}
        height={25}
        onPress={() => setSettingsVisible(true)}
      />
    </View>
  );
}

TransactionHistory = () =>{
    const isFocused = useIsFocused();
    const walletService = WalletService.getInstance();
    const accAddress =  walletUtils.createAddressFromPrivateKey(walletService.pk);

    const [isLoading, setIsLoading] = useState(false);
    const [list , setList] = useState([]);

    const [refreshing,setRefreshing] = useState(false);

    useEffect(()=>{
        if(isFocused)
            loadHistory();
    },[isFocused]);

    const onRefresh = () =>{
        setRefreshing(true);
        loadHistory();
        setTimeout(()=>{setRefreshing(false);},500);
    };

    const loadHistory = () =>{
        setIsLoading(true);
        apiServices.getTransactionHistory(accAddress)
            .then((data)=>{
                setList(data);
                setIsLoading(false);
            })
            .catch(()=>{
                setIsLoading(false);
            });
    };

    const renderEachItem = ({ index,item }) =>{
        return <HistoryCard historyData={item}  key={index} />;
    };

    return(
        <View style={styles.container}>
            <Text style={styles.titleBar_title}>Transaction Activities</Text>
            <FlatList
                data={list} 
                initialNumToRender={5}
                keyExtractor={item=>item.txnId.toString()}
                refreshControl={
                    <RefreshControl
                        onRefresh={onRefresh} refreshing={refreshing}
                        title="Refreshing History .."
                        titleColor={'#fff'} />
                }
                removeClippedSubviews={true} 
                renderItem = {renderEachItem}
                showsVerticalScrollIndicator={false}
                style={{flex:1,marginTop:moderateScale(20)}}
            />
            <LoadingIndicator
                message={'Please wait while fetching your transactions...'}
                visible={isLoading}
            />
        </View>
    );
}

function Tabs() {
  const isFocused = useIsFocused();
  const safeArea = useSafeArea();
  let tabBarProps = {};

  if (isTablet) {
    tabBarProps = {
      tabBar: props => <TabBar {...props} />,
    };
  }

  return (
    <React.Fragment>
      <Tab.Navigator
        initialRouteName="Feed"
        shifting={true}
        labeled={false}
        sceneAnimationEnabled={false}
        activeColor="#00aea2"
        inactiveColor="#95a5a6"
        barStyle={{ backgroundColor: '#ffff' }}
        {...tabBarProps}>
        <Tab.Screen
          name="Appointments"
          component={MyAppointments}
          options={{
            tabBarIcon: 'calendar-clock',
          }}
        />

        <Tab.Screen
          name="Patients"
          component={Patients}
          options={{
            tabBarIcon: 'account-multiple',
          }}
        />
        <Tab.Screen
          name="Departments"
          component={Departments}
          options={{
            tabBarIcon: 'layers',
          }}
        />
        <Tab.Screen
          name="Reports"
          component={Reports}
          options={{
            tabBarIcon: 'book-open',
          }}
        />
      </Tab.Navigator>
      <Portal>
        <FAB
          visible={isFocused} // show FAB only when this screen is focused
          icon="plus-box"
          label={isTablet ? 'Create new' : null}
          style={[
            styles.fab,
            {
              bottom: safeArea.bottom + 65,
            },
          ]}
        />
      </Portal>
    </React.Fragment>
  );
}

MainScreen = memo(({ navigation, route }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
    const [userId, setUserId] = useMMKVNumber("userId", storage)
    const [routeURL, setRouteURL] = useState(useCallback(getRouteURL(route)))
    const cachedItemsRef = useRef(storage.getString("loadItemsCache:" + routeURL)).current
    const cachedItemsParsed = useRef(typeof cachedItemsRef == "string" ? JSON.parse(cachedItemsRef) : []).current
    const [items, setItems] = useState(Array.isArray(cachedItemsParsed) ? cachedItemsParsed.filter(item => item !== null && typeof item.uuid == "string") : [])
    const [searchTerm, setSearchTerm] = useState("")
    const [loadDone, setLoadDone] = useState(typeof cachedItemsRef !== "undefined" ? true : false)
    const setNavigation = useStore(useCallback(state => state.setNavigation))
    const setRoute = useStore(useCallback(state => state.setRoute))
    const [masterKeys, setMasterKeys] = useState(useCallback(getMasterKeys()))
    const isMounted = useMountedState()
    const setCurrentActionSheetItem = useStore(useCallback(state => state.setCurrentActionSheetItem))
    const setCurrentItems = useStore(useCallback(state => state.setCurrentItems))
    const itemsRef = useRef([])
    const setItemsSelectedCount = useStore(useCallback(state => state.setItemsSelectedCount))
    const setInsets = useStore(useCallback(state => state.setInsets))
    const insets = useSafeAreaInsets()
    const [progress, setProgress] = useState({ itemsDone: 0, totalItems: 1 })
    const selectedCountRef = useRef(0)
    const setIsDeviceReady = useStore(useCallback(state => state.setIsDeviceReady))
    const [itemsBeforeSearch, setItemsBeforeSearch] = useState([])
    const [photosGridSize, setPhotosGridSize] = useMMKVNumber("photosGridSize", storage)
    const bottomBarHeight = useStore(useCallback(state => state.bottomBarHeight))
    const topBarHeight = useStore(useCallback(state => state.topBarHeight))
    const contentHeight = useStore(useCallback(state => state.contentHeight))
    const [photosRange, setPhotosRange] = useMMKVString("photosRange:" + userId, storage)
    const netInfo = useStore(useCallback(state => state.netInfo))
    const itemsSortBy = useStore(useCallback(state => state.itemsSortBy))
    const [initialized, setInitialized] = useState(false)
    const isFocused = useIsFocused()

    const updateItemThumbnail = useCallback((item, path) => {
        if(typeof path !== "string"){
            return false
        }

        if(path.length < 4){
            return false
        }
    
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == item.uuid && typeof mapItem.thumbnail == "undefined" ? {...mapItem, thumbnail: item.uuid + ".jpg" } : mapItem))
        }
    })
    
    const selectItem = useCallback((item) => {
        if(getRouteURL(route).indexOf("photos") !== -1){
            if(calcPhotosGridSize(photosGridSize) >= 6){
                return false
            }
        }

        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == item.uuid ? {...mapItem, selected: true} : mapItem))
        }
    })
    
    const unselectItem = useCallback((item) => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == item.uuid ? {...mapItem, selected: false} : mapItem))
        }
    })

    const unselectAllItems = useCallback(() => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.selected ? {...mapItem, selected: false} : mapItem))
        }
    })

    const selectAllItems = useCallback(() => {
        if(getRouteURL(route).indexOf("photos") !== -1){
            if(calcPhotosGridSize(photosGridSize) >= 6){
                return false
            }
        }

        if(isMounted()){
            setItems(items => items.map(mapItem => !mapItem.selected ? {...mapItem, selected: true} : mapItem))
        }
    })

    const removeItem = useCallback((uuid) => {
        if(isMounted()){
            setItems(items => items.filter(mapItem => mapItem.uuid !== uuid && mapItem))
        }
    })

    const markOffline = useCallback((uuid, value) => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == uuid ? {...mapItem, offline: value} : mapItem))
        }
    })

    const markFavorite = useCallback((uuid, value) => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == uuid ? {...mapItem, favorited: value} : mapItem))
        }
    })

    const changeFolderColor = useCallback((uuid, color) => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == uuid && mapItem.type == "folder" ? {...mapItem, color} : mapItem))
        }
    })

    const changeItemName = useCallback((uuid, name) => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == uuid ? {...mapItem, name} : mapItem))
        }
    })

    const addItem = useCallback((item, parent) => {
        const currentParent = getParent(route)

        if(isMounted() && (currentParent == parent || (item.offline && parent == "offline"))){
            setItems(items => sortItems({ items: [...items, item], passedRoute: route }))
        }
    })

    const changeWholeItem = useCallback((item, uuid) => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == uuid ? item : mapItem))
        }
    })

    const reloadList = useCallback((parent) => {
        const currentParent = getParent(route)

        if(isMounted() && currentParent == parent){
            fetchItemList({ bypassCache: true, callStack: 1 })
        }
    })

    const updateFolderSize = useCallback((uuid, size) => {
        if(isMounted()){
            setItems(items => items.map(mapItem => mapItem.uuid == uuid && mapItem.type == "folder" ? {...mapItem, size} : mapItem))
        }
    })

    useEffect(() => {
        if(isMounted() && initialized){
            if(searchTerm.length == 0){
                if(itemsBeforeSearch.length > 0){
                    setItems(itemsBeforeSearch)
                    setItemsBeforeSearch([])
                }
            }
            else{
                if(itemsBeforeSearch.length == 0){
                    setItemsBeforeSearch(items)
    
                    var filtered = items.filter(item => item.name.toLowerCase().trim().indexOf(searchTerm.toLowerCase().trim()) !== -1 && item)
                }
                else{
                    var filtered = itemsBeforeSearch.filter(item => item.name.toLowerCase().trim().indexOf(searchTerm.toLowerCase().trim()) !== -1 && item)
                }
    
                setItems(filtered)
            }
        }
    }, [searchTerm])

    useEffect(() => {
        if(isMounted() && initialized){
            const sorted = sortItems({ items, passedRoute: route })

            setItems(sorted)
        }
    }, [itemsSortBy])

    useEffect(() => {
        if(isFocused){
            if(Array.isArray(items) && items.length > 0){
                setCurrentItems(items)

                itemsRef.current = items
                global.items = items

                const selected = items.filter(item => item.selected).length

                selectedCountRef.current = selected

                setItemsSelectedCount(selectedCountRef.current)
            }
            else{
                setCurrentItems([])
    
                itemsRef.current = []
                global.items = []
    
                setItemsSelectedCount(0)
            }

            global.setItems = setItems
        }
    }, [items, isFocused])

    const fetchItemList = useCallback(({ bypassCache = false, callStack = 0, loadFolderSizes = false }) => {
        return new Promise((resolve, reject) => {
            loadItems({
                parent: getParent(route),
                setItems,
                masterKeys,
                setLoadDone,
                navigation,
                isMounted,
                bypassCache,
                route,
                setProgress,
                callStack,
                loadFolderSizes
            }).then(resolve).catch(reject)
        })
    })

    useEffect(() => {
        setNavigation(navigation)
        setRoute(route)
        setInsets(insets)
        
        fetchItemList({ bypassCache: false, callStack: 0, loadFolderSizes: false }).catch((err) => console.log(err))

        global.fetchItemList = fetchItemList

        const deviceListener = DeviceEventEmitter.addListener("event", (data) => {
            const navigationRoutes = navigation.getState().routes
            const isListenerActive = typeof navigationRoutes == "object" ? (navigationRoutes[navigationRoutes.length - 1].key == route.key) : false

            if(data.type == "thumbnail-generated"){
                updateItemThumbnail(data.data, data.data.path)
            }
            else if(data.type == "item-onpress" && isListenerActive){
                if(data.data.selected){
                    unselectItem(data.data)
                }
                else{
                    if(selectedCountRef.current > 0){
                        selectItem(data.data)
                    }
                    else{
                        global.currentReceiverId = data.data.receiverId

                        try{
                            const currentRouteURL = getRouteURL(route)

                            if(typeof currentRouteURL == "string"){
                                if(data.data.type == "folder" && currentRouteURL.indexOf("trash") == -1){
                                    navigationAnimation({ enable: true }).then(() => {
                                        navigation.dispatch(StackActions.push("MainScreen", {
                                            parent: currentRouteURL + "/" + data.data.uuid
                                        }))
                                    })
                                }
                                else{
                                    previewItem({ item: data.data, navigation })
                                }
                            }
                            else{
                                console.log("route url !== string: ", currentRouteURL)
                            }
                        }
                        catch(e){
                            console.log(e)
                        }
                    }
                }
            }
            else if(data.type == "item-onlongpress" && isListenerActive){
                selectItem(data.data)
            }
            else if(data.type == "open-item-actionsheet" && isListenerActive){
                setCurrentActionSheetItem(data.data)
    
                SheetManager.show("ItemActionSheet")
            }
            else if(data.type == "unselect-all-items" && isListenerActive){
                unselectAllItems()
            }
            else if(data.type == "select-all-items" && isListenerActive){
                selectAllItems()
            }
            else if(data.type == "select-item" && isListenerActive){
                selectItem(data.data)
            }
            else if(data.type == "unselect-item" && isListenerActive){
                unselectItem(data.data)
            }
            else if(data.type == "remove-item"){
                removeItem(data.data.uuid)
            }
            else if(data.type == "add-item"){
                addItem(data.data.item, data.data.parent)
            }
            else if(data.type == "mark-item-offline"){
                if(!data.data.value && getRouteURL(route).indexOf("offline") !== -1){
                    removeItem(data.data.uuid)
                }
                else{
                    markOffline(data.data.uuid, data.data.value)
                }
            }
            else if(data.type == "mark-item-favorite"){
                if(!data.data.value && getRouteURL(route).indexOf("favorites") !== -1){
                    removeItem(data.data.uuid)
                }
                else{
                    markFavorite(data.data.uuid, data.data.value)
                }
            }
            else if(data.type == "change-folder-color"){
                changeFolderColor(data.data.uuid, data.data.color)
            }
            else if(data.type == "change-item-name"){
                changeItemName(data.data.uuid, data.data.name)
            }
            else if(data.type == "change-whole-item"){
                changeWholeItem(data.data.item, data.data.uuid)
            }
            else if(data.type == "reload-list"){
                reloadList(data.data.parent)
            }
            else if(data.type == "remove-public-link"){
                if(getRouteURL(route).indexOf("links") !== -1){
                    removeItem(data.data.uuid)
                }
            }
            else if(data.type == "folder-size"){
                updateFolderSize(data.data.uuid, data.data.size)
            }
        })

        setIsDeviceReady(true)
        setInitialized(true)

        return () => {
            deviceListener.remove()
            
            setPhotosRange("all")
        }
    }, [])

    return (
        <View style={{
            height: "100%",
            width: "100%",
            backgroundColor: darkMode ? "black" : "white"
        }}>
            <TopBar navigation={navigation} route={route} setLoadDone={setLoadDone} searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
            <View style={{
                height: routeURL.indexOf("photos") !== -1 ? (contentHeight - 40 - bottomBarHeight + (Platform.OS == "android" ? 35 : 26)) : (contentHeight - topBarHeight - bottomBarHeight + 30)
            }}>
                <ItemList navigation={navigation} route={route} items={items} setItems={setItems} showLoader={!loadDone} loadDone={loadDone} searchTerm={searchTerm} isMounted={isMounted} fetchItemList={fetchItemList} progress={progress} setProgress={setProgress} />
            </View>
        </View>
    )
})

function Entry({ navigation }) {
  const [cards, setCards] = useState([]);
  const [filteredCards, setFilteredCards] = useState([]);
  const [search, setSearch] = useState('');
  const isFocused = useIsFocused();
  const {colors, isDark} = useTheme();

  const onNewVaccine = (e) => {
    navigation.navigate('QRReader')
  }

  const actions = [{
      text: "New Vaccine",
      icon:  <FontAwesome5 name={'syringe'} style={styles.icon} solid />,
      name: "bt_vaccine",
      position: 0
    }
  ];

  const filter = (cards, text) => {
    if (text && text.length > 0) { 
      const lowerText = text.toLowerCase();
      return cards.filter(function (item) {
          return JSON.stringify(item).toLowerCase().includes(lowerText);
        });
    } else {
      return cards;
    }
  }

  const searchFilter = (text) => {
    setFilteredCards(filter(cards, text));
    setSearch(text);
  }

  const load = async () => {
    let cards = await listCards();
    setCards(cards);
    setFilteredCards(filter(cards, search));
  };

  const removeItem = async (signature) => {
    const remaining = await removeCard(signature);
    setCards(remaining);
    setFilteredCards(filter(remaining, search));
  }

  useEffect(() => {
    changeNavigationBarColor(colors.background, !isDark);
    load();
  }, [isFocused]);

  return (
    <View style={styles.container} backgroundColor={colors.background}>
        <StatusBar 
          backgroundColor={colors.background}
          barStyle={isDark ? "light-content" : "dark-content"}/>

        <SearchBar round lightTheme={!isDark}
            containerStyle={{backgroundColor:colors.background, 
                            borderBottomColor: colors.divisor,  
                            borderTopColor: colors.background, paddingBottom: 4, paddingTop: 0}}
            placeholder="Search Here..."
            onChangeText={text => searchFilter(text)}
            value={search}
            inputContainerStyle={{marginLeft: 7, marginRight: 7, backgroundColor:colors.background}}
          />

        <SafeAreaView style={styles.flatList}>
          <View style={styles.border}>
            <FlatList 
              data={filteredCards} 
              keyExtractor={item => item.signature} 
              contentContainerStyle={filteredCards.length == 0 && styles.centerEmptySet}
              ListEmptyComponent={<NoCards colors={colors} />}
              renderItem={({item}) => {
                if (item.format === "CRED" && item.type === "BADGE")  
                  return <View style={styles.listItem}><VaccineCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "CRED" && item.type === "COUPON")  
                  return <View style={styles.listItem}><CouponCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "CRED" && item.type === "STATUS")  
                  return <View style={styles.listItem}><StatusCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "CRED" && item.type === "PASSKEY")  
                  return <View style={styles.listItem}><PassKeyCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "DIVOC" && item.type === "COWIN")  
                  return <View style={styles.listItem}><CowinCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "SHC" && item.type === "FHIRBundle")  
                  return <View style={styles.listItem}><SHCCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "DCC" && item.type === "DCC")  
                  return <View style={styles.listItem}><DCCCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "DCC" && item.type === "UY")  
                  return <View style={styles.listItem}><DCCUYCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "VDS" && item.type === "icao.vacc")  
                  return <View style={styles.listItem}><VDSVaxCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "VDS" && item.type === "icao.test")  
                  return <View style={styles.listItem}><VDSTestCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
              
              
              }} />
          </View>
        </SafeAreaView>

        <FloatingAction
          actions={actions}
          overrideWithAction={true}
          onPressItem={onNewVaccine}
        />
    </View>
  );
}

function Locked({ navigation, route }) {
  const {authData, signIn} = useContext(AuthContext);

  const isFocused = useIsFocused();
  const {colors, isDark} = useTheme();

  const [isTryingToSignIn, setIsTryingToSignIn] = useState(false);

  const handleBiometricAuthFailure = async (error: string) => {
    switch (error) {
      case 'NOT_ENROLLED':
        Alert.alert(
          `Not Enrolled`,
          'This device does not have biometric login enabled.',
        );
        break;
      case 'NOT_PRESENT':
        Alert.alert('', 'This device does not have the required hardware.');
        return;
      case 'AUTHENTICATION_FAILED':
        Alert.alert('', 'Authentication failed too many times');
        break;
      case 'NOT_AVAILABLE':
        Alert.alert('', 'Authentication is not available.');
        break;
      default:
    }
  };

  const signInBiometricAuth = async () => {
    if (isTryingToSignIn) {
      await LocalAuthentication.cancelAuthenticate();
    }
    
    console.log("Logging in");
    setIsTryingToSignIn(true);
    const authenticateResult = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Login with Biometrics', 
      cancelLabel: 'Cancel',
      disableDeviceFallback: true, 
      fallbackLabel: 'Use PIN'
    });

    console.log("Logged in", authenticateResult);

    if (authenticateResult.success) {
      signIn();
    } else {
      handleBiometricAuthFailure(authenticateResult);
    }
    setIsTryingToSignIn(false);
  }

  const unlock = async () => {
    if (isTryingToSignIn) return;

    if (!authData && !isTryingToSignIn && AppState.currentState === "active") {
      signInBiometricAuth();
    }
  }

  useEffect(() => {
    changeNavigationBarColor(colors.background, !isDark);
  }, [isFocused]);

  return (
    <View style={styles.container} backgroundColor={colors.background}>
        <StatusBar 
          backgroundColor={colors.background}
          barStyle={isDark ? "light-content" : "dark-content"}/>

        <Image
          style={styles.logo}
          color={colors.primary}
          source={{
            uri: 'data:image/png;base64,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',
          }}
        />

        <Text>App Locked</Text>

        <TouchableOpacity
            style={[styles.button, {backgroundColor: colors.primary}]}
            onPress={unlock}
            hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
            >
              <Text style={[styles.buttonText, { color: '#fff'}]}>Unlock</Text>
        </TouchableOpacity>
    </View>
  );
}

export default function VideoScreen(props) {
    const [hasPermission, setHasPermission] = useState(null);
    const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
    const [isPreview, setIsPreview] = useState(false);
    const [isCameraReady, setIsCameraReady] = useState(false);
    const [isFlash, setIsFlash] = useState(false);
    const [isVideoRecording, setIsVideoRecording] = useState(false);
    const [type, setType] = useState(0);
    const [showGallery, setShowGallery] = useState(true)
    const [galleryItems, setGalleryItems] = useState([])
    const [galleryScrollRef, setGalleryScrollRef] = useState(null)
    const [galleryPickedImage, setGalleryPickedImage] = useState(null)
    const cameraRef = useRef();
    const isFocused = useIsFocused();

    useEffect(() => {
        (async () => {

            const cameraPermissions = await Camera.requestPermissionsAsync();
            const galleryPermissions = await MediaLibrary.requestPermissionsAsync();

            const audioPermissions = await Audio.requestPermissionsAsync();

            if (cameraPermissions.status === 'granted' && audioPermissions.status === 'granted' && galleryPermissions.status === 'granted') {
                const getPhotos = await MediaLibrary.getAssetsAsync({ sortBy: ['creationTime'], mediaType: ['photo', 'video'] })
                setGalleryItems(getPhotos)
                setGalleryPickedImage(getPhotos.assets[0])
                setHasPermission(true)

            }

        })();
    }, []);
    const onCameraReady = () => {
        setIsCameraReady(true);
    };
    const takePicture = async () => {
        if (cameraRef.current) {
            const options = { quality: 0.5, base64: true, skipProcessing: true };
            const data = await cameraRef.current.takePictureAsync(options);
            const source = data.uri;
            if (source) {
                props.navigation.navigate('Save', { source, imageSource: null, type })
            }
        }
    };
    const recordVideo = async () => {
        if (cameraRef.current) {
            try {

                const options = { maxDuration: 60, quality: Camera.Constants.VideoQuality['480p'] }


                const videoRecordPromise = cameraRef.current.recordAsync(options);
                if (videoRecordPromise) {
                    setIsVideoRecording(true);
                    const data = await videoRecordPromise;
                    const source = data.uri;
                    let imageSource = await generateThumbnail(source)
                    props.navigation.navigate('Save', { source, imageSource, type })

                }
            } catch (error) {
                console.warn(error);
            }
        }
    };
    const generateThumbnail = async (source) => {
        try {
            const { uri } = await VideoThumbnails.getThumbnailAsync(
                source,
                {
                    time: 5000,
                }
            );
            return uri;
        } catch (e) {
            console.warn(e);
        }
    };


    const stopVideoRecording = async () => {

        if (cameraRef.current) {
            setIsVideoRecording(false);
            cameraRef.current.stopRecording();
        }
    };
    const switchCamera = () => {
        if (isPreview) {
            return;
        }
        setCameraType((prevCameraType) =>
            prevCameraType === Camera.Constants.Type.back
                ? Camera.Constants.Type.front
                : Camera.Constants.Type.back
        );
    };
    const handleGoToSaveOnGalleryPick = async () => {
        let type = galleryPickedImage.mediaType == 'video' ? 0 : 1


        const loadedAsset = await MediaLibrary.getAssetInfoAsync(galleryPickedImage);
        let imageSource = null
        if (type == 0) {
            imageSource = await generateThumbnail(galleryPickedImage.uri)

        }

        props.navigation.navigate('Save', {
            source: loadedAsset.localUri,
            type,
            imageSource
        })
    }

    const renderCaptureControl = () => (
        <View>
            <View style={{ justifyContent: 'space-evenly', width: '100%', alignItems: 'center', flexDirection: 'row', backgroundColor: 'white' }}>
                <TouchableOpacity disabled={!isCameraReady} onPress={() => setIsFlash(!isFlash)} >
                    <Feather style={utils.margin15} name={"zap"} size={25} color="black" />
                </TouchableOpacity>
                <TouchableOpacity disabled={!isCameraReady} onPress={switchCamera}>
                    <Feather style={utils.margin15} name="rotate-cw" size={25} color="black" />
                </TouchableOpacity>
                {type == 0 ?

                    <TouchableOpacity
                        activeOpacity={0.7}
                        disabled={!isCameraReady}
                        onLongPress={recordVideo}
                        onPressOut={stopVideoRecording}
                        style={styles.capture}
                    />
                    :
                    <TouchableOpacity
                        activeOpacity={0.7}
                        disabled={!isCameraReady}
                        onPress={takePicture}
                        style={styles.capturePicture}
                    />}

                <TouchableOpacity disabled={!isCameraReady} onPress={() => type == 1 ? setType(0) : setType(1)} >
                    <Feather style={utils.margin15} name={type == 0 ? "camera" : "video"} size={25} color="black" />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setShowGallery(true)} >
                    <Feather style={utils.margin15} name={"image"} size={25} color="black" />
                </TouchableOpacity>
            </View>

        </View>

    );
    if (hasPermission === null) {
        return <View />;
    }
    if (hasPermission === false) {
        return <Text style={styles.text}>No access to camera</Text>;
    }

    if (showGallery) {
        return (
            <ScrollView
                ref={(ref) => setGalleryScrollRef(ref)}
                style={[container.container, utils.backgroundWhite]}>

                <View
                    style={[{ aspectRatio: 1 / 1, height: WINDOW_WIDTH }]}>
                    <Image
                        style={{ flex: 1 }}
                        source={{ uri: galleryPickedImage.uri }}

                        style={[{ aspectRatio: 1 / 1, height: WINDOW_WIDTH }]}
                        ratio={'1:1'}

                    />
                </View>
                <View style={{ justifyContent: 'flex-end', alignItems: 'center', marginRight: 20, marginVertical: 10, flexDirection: 'row' }}>

                    <TouchableOpacity
                        style={{ alignItems: 'center', backgroundColor: 'gray', paddingHorizontal: 20, paddingVertical: 10, marginRight: 15, borderRadius: 50, borderWidth: 1, borderColor: 'black' }}
                        onPress={() => handleGoToSaveOnGalleryPick()} >

                        <Text style={{ fontWeight: 'bold', color: 'white', paddingBottom: 1 }}>Continue</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ alignItems: 'center', backgroundColor: 'gray', borderRadius: 50, borderWidth: 1, borderColor: 'black' }} onPress={() => setShowGallery(false)} >
                        <Feather style={{ padding: 10 }} name={"camera"} size={20} color="white" />
                    </TouchableOpacity>
                </View>
                <View style={{ flex: 1 }, [utils.borderTopGray]}>

                    <FlatList
                        numColumns={3}
                        horizontal={false}
                        data={galleryItems.assets}

                        contentContainerStyle={{
                            flexGrow: 1,
                        }}
                        renderItem={({ item }) => (
                            <TouchableOpacity
                                style={[container.containerImage, utils.borderWhite]}
                                onPress={() => { galleryScrollRef.scrollTo({ x: 0, y: 0, animated: true }); setGalleryPickedImage(item); }}>

                                <Image
                                    style={container.image}
                                    source={{ uri: item.uri }}
                                />

                            </TouchableOpacity>

                        )}

                    />
                </View>

            </ScrollView>
        )
    }
    return (
        <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'white' }}>

            <View

                style={[{ aspectRatio: 1 / 1, height: WINDOW_WIDTH }]}>
                {isFocused ?
                    <Camera
                        ref={cameraRef}
                        style={{ flex: 1 }}
                        type={cameraType}
                        flashMode={isFlash ? Camera.Constants.FlashMode.torch : Camera.Constants.FlashMode.off}
                        style={[{ aspectRatio: 1 / 1, height: WINDOW_WIDTH }]}
                        ratio={'1:1'}
                        onCameraReady={onCameraReady}
                    />
                    : null}

            </View>

            <View style={[{
                flexDirection: 'row',
                alignItems: 'center',
                flex: 1,
            }]}>
                <View>
                    {renderCaptureControl()}
                </View>

            </View>
        </View>
    );
}

function Post(props) {
    const [item, setItem] = useState(props.route.params.item)
    const [user, setUser] = useState(props.route.params.user)
    const [currentUserLike, setCurrentUserLike] = useState(false)
    const [unmutted, setUnmutted] = useState(true)
    const [videoref, setvideoref] = useState(null)
    const [sheetRef, setSheetRef] = useState(useRef(null))
    const [modalShow, setModalShow] = useState({ visible: false, item: null })
    const [isValid, setIsValid] = useState(true);
    const [exists, setExists] = useState(false);
    const [loaded, setLoaded] = useState(false);

    const isFocused = useIsFocused();
    useEffect(() => {

        if (props.route.params.notification != undefined) {

            firebase.firestore()
                .collection("users")
                .doc(props.route.params.user)
                .get()
                .then((snapshot) => {
                    if (snapshot.exists) {
                        let user = snapshot.data();
                        user.uid = snapshot.id;

                        setUser(user)
                    }
                })

            firebase.firestore()
                .collection("posts")
                .doc(props.route.params.user)
                .collection("userPosts")
                .doc(props.route.params.item)
                .get()
                .then((snapshot) => {
                    if (snapshot.exists) {
                        let post = snapshot.data();
                        post.id = snapshot.id;

                        setItem(post)
                        setLoaded(true)
                        setExists(true)
                    }
                })
            firebase.firestore()
                .collection("posts")
                .doc(props.route.params.user)
                .collection("userPosts")
                .doc(props.route.params.item)
                .collection("likes")
                .doc(firebase.auth().currentUser.uid)
                .onSnapshot((snapshot) => {
                    let currentUserLike = false;
                    if (snapshot.exists) {
                        currentUserLike = true;
                    }
                    setCurrentUserLike(currentUserLike)

                })

        }
        else {
            firebase.firestore()
                .collection("posts")
                .doc(props.route.params.user.uid)
                .collection("userPosts")
                .doc(props.route.params.item.id)
                .collection("likes")
                .doc(firebase.auth().currentUser.uid)
                .onSnapshot((snapshot) => {
                    let currentUserLike = false;
                    if (snapshot.exists) {
                        currentUserLike = true;
                    }
                    setCurrentUserLike(currentUserLike)

                })

            setItem(props.route.params.item)
            setUser(props.route.params.user)
            setLoaded(true)
            setExists(true)
        }

    }, [props.route.params.notification, props.route.params.item])

    useEffect(() => {
        if (videoref !== null) {
            videoref.setIsMutedAsync(props.route.params.unmutted)
        }
        setUnmutted(props.route.params.unmutted)
    }, [props.route.params.unmutted])

    useEffect(() => {
        if (videoref !== null) {
            if (isFocused) {
                videoref.playAsync()
            } else {
                videoref.stopAsync()

            }
        }

    }, [props.route.params.index, props.route.params.inViewPort])

    const onUsernamePress = (username, matchIndex) => {
        props.navigation.navigate("ProfileOther", { username, uid: undefined })
    }

    const onLikePress = (userId, postId, item) => {
        item.likesCount += 1;
        setCurrentUserLike(true)
        firebase.firestore()
            .collection("posts")
            .doc(userId)
            .collection("userPosts")
            .doc(postId)
            .collection("likes")
            .doc(firebase.auth().currentUser.uid)
            .set({})
            .then()
        props.sendNotification(user.notificationToken, "New Like", `${props.currentUser.name} liked your post`, { type: 0, postId, user: firebase.auth().currentUser.uid })

    }
    const onDislikePress = (userId, postId, item) => {
        item.likesCount -= 1;

        setCurrentUserLike(false)
        firebase.firestore()
            .collection("posts")
            .doc(userId)
            .collection("userPosts")
            .doc(postId)
            .collection("likes")
            .doc(firebase.auth().currentUser.uid)
            .delete()
    }
    if (!exists && loaded) {
        return (
            <View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
                <FontAwesome5 style={{ alignSelf: 'center', marginBottom: 20 }} name="dizzy" size={40} color="black" />
                <Text style={[text.notAvailable]}>Post does not exist</Text>
            </View>
        )
    }
    if (!loaded) {
        return (<View></View>)

    }
    if (user == undefined) {
        return (<View></View>)
    }
    if (item == null) {
        return (<View />)
    }

    const _handleVideoRef = (component) => {
        setvideoref(component);

        if (component !== null) {
            component.setIsMutedAsync(props.route.params.unmutted)
        }
    }

    if (videoref !== null) {
        videoref.setIsMutedAsync(unmutted)
        if (isFocused && props.route.params.index == props.route.params.inViewPort) {
            videoref.playAsync()
        } else {
            videoref.stopAsync()

        }
    }


    if (sheetRef.current !== null && !props.route.params.feed) {
        if (modalShow.visible) {
            sheetRef.snapTo(0)
        } else {
            sheetRef.snapTo(1)
        }
    }

    return (
        <View style={[container.container, utils.backgroundWhite]}>

            <View>
                <View style={[container.horizontal, { alignItems: 'center', padding: 10 }]}>
                    <TouchableOpacity
                        style={[container.horizontal, { alignItems: 'center' }]}
                        onPress={() => props.navigation.navigate("ProfileOther", { uid: user.uid, username: undefined })}>

                        {user.image == 'default' ?
                            (
                                <FontAwesome5
                                    style={[utils.profileImageSmall]}
                                    name="user-circle" size={35} color="black" />

                            )
                            :
                            (
                                <Image
                                    style={[utils.profileImageSmall]}
                                    source={{
                                        uri: user.image
                                    }}
                                />
                            )
                        }
                        <View style={{ alignSelf: 'center' }}>
                            <Text style={[text.bold, text.medium, { marginBottom: 0 }]} >{user.name}</Text>
                        </View>

                    </TouchableOpacity>

                    <TouchableOpacity
                        style={[{ marginLeft: 'auto' }]}

                        onPress={() => {
                            if (props.route.params.feed) {
                                props.route.params.setModalShow({ visible: true, item })
                            } else {
                                setModalShow({ visible: true, item })
                            }
                        }}>
                        <Feather
                            name="more-vertical" size={20} color="black" />
                    </TouchableOpacity>
                </View>
                {item.type == 0 ?
                    <View>
                        {props.route.params.index == props.route.params.inViewPort && isFocused ?
                            <View>
                                <VideoPlayer
                                    videoProps={{
                                        isLooping: true,
                                        shouldPlay: true,
                                        resizeMode: Video.RESIZE_MODE_COVER,
                                        source: {
                                            uri: item.downloadURL,
                                        },
                                        videoRef: _handleVideoRef,
                                    }}
                                    inFullscreen={false}
                                    showControlsOnLoad={true}
                                    showFullscreenButton={false}
                                    height={WINDOW_WIDTH}
                                    width={WINDOW_WIDTH}
                                    shouldPlay={true}
                                    isLooping={true}
                                    style={{
                                        aspectRatio: 1 / 1, height: WINDOW_WIDTH,
                                        width: WINDOW_WIDTH, backgroundColor: 'black'
                                    }}
                                />

                                <TouchableOpacity
                                    style={{ position: 'absolute', borderRadius: 500, backgroundColor: 'black', width: 40, height: 40, alignItems: 'center', justifyContent: 'center', margin: 10, right: 0 }}
                                    activeOpacity={1}
                                    onPress={() => {
                                        if (videoref == null) {
                                            return;
                                        }
                                        if (unmutted) {
                                            if (props.route.params.setUnmuttedMain == undefined) {
                                                setUnmutted(false)
                                            } else {
                                                props.route.params.setUnmuttedMain(false)

                                            }

                                        } else {
                                            if (props.route.params.setUnmuttedMain == undefined) {
                                                setUnmutted(true)
                                            } else {
                                                props.route.params.setUnmuttedMain(true)

                                            }

                                        }

                                    }}>
                                    {!unmutted ?

                                        <Feather name="volume-2" size={20} color="white" />
                                        :
                                        <Feather name="volume-x" size={20} color="white" />
                                    }
                                </TouchableOpacity>

                            </View>

                            :
                            <View style={{ marginTop: 4 }}>

                                <CachedImage
                                    cacheKey={item.id}
                                    style={[container.image]}
                                    source={{ uri: item.downloadURLStill }}
                                />
                            </View>
                        }

                    </View>

                    :

                    <CachedImage
                        cacheKey={item.id}
                        style={container.image}
                        source={{ uri: item.downloadURL }}
                    />
                }

                <View style={[utils.padding10, container.horizontal]}>
                    {currentUserLike ?
                        (
                            <Entypo name="heart" size={30} color="red" onPress={() => onDislikePress(user.uid, item.id, item)} />
                        )
                        :
                        (
                            <Feather name="heart" size={30} color="black" onPress={() => onLikePress(user.uid, item.id, item)} />

                        )
                    }
                    <Feather style={utils.margin15Left} name="message-square" size={30} color="black" onPress={() => props.navigation.navigate('Comment', { postId: item.id, uid: user.uid, user })} />
                    <Feather style={utils.margin15Left} name="share" size={26} color="black" onPress={() => props.navigation.navigate('ChatList', { postId: item.id, post: { ...item, user: user }, share: true })} />


                </View>
                <View style={[container.container, utils.padding10Sides]}>
                    <Text style={[text.bold, text.medium]}>
                        {item.likesCount} likes
                    </Text>
                    <Text style={[utils.margin15Right, utils.margin5Bottom]}>
                        <Text style={[text.bold]}
                            onPress={() => props.navigation.navigate("ProfileOther", { uid: user.uid, username: undefined })}>
                            {user.name}
                        </Text>

                        <Text>    </Text>
                        <ParsedText
                            parse={
                                [
                                    { pattern: /@(\w+)/, style: { color: 'green', fontWeight: 'bold' }, onPress: onUsernamePress },
                                ]
                            }
                        >{item.caption}</ParsedText>

                    </Text>
                    <Text
                        style={[text.grey, utils.margin5Bottom]} onPress={() => props.navigation.navigate('Comment', { postId: item.id, uid: user.uid, user })}>
                        View all {item.commentsCount} Comments
                    </Text>
                    <Text
                        style={[text.grey, text.small, utils.margin5Bottom]}>
                        {timeDifference(new Date(), item.creation.toDate())}
                    </Text>
                </View>
            </View>

            <BottomSheet
                bottomSheerColor="#FFFFFF"
                ref={setSheetRef}
                initialPosition={0} //200, 300
                snapPoints={[300, 0]}
                isBackDrop={true}
                isBackDropDismissByPress={true}
                isRoundBorderWithTipHeader={true}
                backDropColor="black"
                isModal
                containerStyle={{ backgroundColor: "white" }}
                tipStyle={{ backgroundColor: "white" }}
                headerStyle={{ backgroundColor: "white", flex: 1 }}
                bodyStyle={{ backgroundColor: "white", flex: 1, borderRadius: 20 }}
                body={

                    <View>

                        {modalShow.item != null ?
                            <View>
                                <TouchableOpacity style={{ padding: 20 }}
                                    onPress={() => {
                                        props.navigation.navigate("ProfileOther", { uid: modalShow.item.user.uid, username: undefined });
                                        setModalShow({ visible: false, item: null });
                                    }}>
                                    <Text >Profile</Text>
                                </TouchableOpacity>
                                <Divider />
                                {props.route.params.user.uid == firebase.auth().currentUser.uid ?
                                    <TouchableOpacity style={{ padding: 20 }}
                                        onPress={() => {
                                            props.deletePost(modalShow.item).then(() => {
                                                props.fetchUserPosts()
                                                props.navigation.popToTop()
                                            })
                                            setModalShow({ visible: false, item: null });
                                        }}>
                                        <Text >Delete</Text>
                                    </TouchableOpacity>
                                    : null}

                                <Divider />
                                <TouchableOpacity style={{ padding: 20 }} onPress={() => setModalShow({ visible: false, item: null })}>
                                    <Text >Cancel</Text>
                                </TouchableOpacity>
                            </View>
                            : null}

                    </View>
                }
            />
            <Snackbar
                visible={isValid.boolSnack}
                duration={2000}
                onDismiss={() => { setIsValid({ boolSnack: false }) }}>
                {isValid.message}
            </Snackbar>
        </View>
    )
}

TransferHomeScreen = ({...props}) =>{
    const isFocused = useIsFocused();

    const {
        updateVerifiedAccountBalances,verifiedBalances,exchangeRates,navigation,
        selectedCurrency,route,isAccountUnlockedFromServer,setIsAccountUnlocked,
        accountDetails
    } = props;

    const {email,phoneNumber}  = accountDetails;

    const walletService = WalletService.getInstance();
    const pk = walletService.pk;    
    const accAddress = walletUtils.createAddressFromPrivateKey(pk);
    
    const [selectedAsset, setSelectedAsset] = useState(verifiedBalances[0]);
    const [amountToTransfer, setAmountToTransfer] = useState('');
    // testAddress  (for testing)
    // const testAddress = '0xD8f647855876549d2623f52126CE40D053a2ef6A';
    const [address, setAddress] = useState('');
    const [remarks , setRemarks] = useState('');
    const [modal, setModal] = useState(false);
    const [fee , setFee] = useState(0);

    const [errorMessage, setErrorMessage] = useState('');
    const [errorTitle, setErrorTitle] = useState('');
    const [showError, setShowError] = useState(false);
    const [loader, setLoader] = useState(true);
    const [indicatingMssg , setIndicatingMsg] = useState('Please Wait...');

    const [showTransactionUi , setShowTransactionUi] = useState(false);

    useEffect(()=>{
        if(verifiedBalances.length) setShowTransactionUi(true);
        updateVerifiedAccountBalances(accAddress);
    },[]);

    useEffect(()=>{
        if(isFocused)
        {
            const {scannedAddress} =   route.params;
            if(scannedAddress) setAddress(scannedAddress);
        }
    },[isFocused]);

    useEffect(()=>{
        if(verifiedBalances.length) {
            setSelectedAsset(verifiedBalances[0]);
            setTimeout(()=>{
                setShowTransactionUi(true);
                refreshAssets(verifiedBalances[0]);
            },200);
        }
        else setLoader(false);
    },[verifiedBalances.length]);

    const checkAccountIsUnlocked = () =>{
        if(isAccountUnlockedFromServer)
        {
            setLoader(false);
            const data = { selectedAsset,address,remarks,fee,amountToTransfer};
            navigation.navigate('TransferConfirmationScreen',{transactionData:data});
        }
        else 
            fallbackToBlockChain();
    }; 
    
    const fallbackToBlockChain = async() =>{
        const isSigningKeySet = await walletService.unlockZksyncWallet(selectedAsset.symbol,true);
        if(isSigningKeySet)
        {
            setIsAccountUnlocked(true);
            apiServices.updateIsAccountUnlockedWithServer(email,phoneNumber).then();
            setLoader(false);
            const data = { selectedAsset,address,remarks,fee,amountToTransfer};
            navigation.navigate('TransferConfirmationScreen',{transactionData:data});
        }
        else{
            setLoader(false);
            navigation.navigate('AccountUnlockScreen');
        }
    };

    const refreshAssets = (currentAsset) =>{
        setIndicatingMsg('Please Wait...');
        setLoader(true);
        updateVerifiedAccountBalances(accAddress);
        apiServices.getTransferFundProcessingFee(currentAsset.symbol,accAddress)
            .then(data=>{
                setLoader(false);
                setFee(data.totalFee);
            })
            .catch(()=>{
                setLoader(false);
            });
    };

    const checkValidData = () =>{
        const max = walletUtils.getAssetDisplayText( selectedAsset.symbol,selectedAsset.value);
        const totalAmt = parseFloat(amountToTransfer) + parseFloat(fee);
        if(!amountToTransfer)
        {
            setShowError(true);
            setErrorMessage('Please enter an Amount to begin Transfer');
            setErrorTitle('Amount cannot be empty');
        }
        else if(totalAmt > max)
        {
            setShowError(true);
            setErrorMessage('Please add more funds to account before this transaction');
            setErrorTitle('Insufficient balance');
        }
        else if(!address.length)
        {
            setShowError(true);
            setErrorMessage('Please enter a valid address');
            setErrorTitle('Invalid Addess');
        }
        else{
            setLoader(true);
            setIndicatingMsg('Checking Account Please Wait.. It Takes a while to check from the Main BlockChain.');
            checkAccountIsUnlocked();
        }
    };

    const setNewAsset = (item) =>{
        setSelectedAsset(item);
        setModal(false);
        refreshAssets(item);
    };

    const renderAssetOptions = () => {
        return(
            <View style={styles.assetModal}>
                <View style={styles.modalHeader}>
                    <Text style={{color:Colors.white}}>Select From Available Funds</Text>
                </View>
                {
                    verifiedBalances.map((item,index)=>(
                        <TouchableOpacity key={index} onPress={()=>setNewAsset(item)} style={styles.eachAsset}>
                            <Text style={{fontSize:moderateScale(16),fontWeight:'bold'}}>{item.symbol.toUpperCase()}</Text>
                            <Text style={{fontSize:moderateScale(16),fontWeight:'bold'}}>{walletUtils.getAssetDisplayText( item.symbol,item.value)}</Text>
                        </TouchableOpacity>
                    ))
                }
            </View>
        );
    };

    const setMaxTransferLimit = () =>{
        const maxBalance = walletUtils.getAssetDisplayText( selectedAsset.symbol,selectedAsset.value);
        setAmountToTransfer(maxBalance-fee);
    };

    const renderAssets = () =>{
        if(showTransactionUi)
            return (
                <ScrollView>
                    <View style={GlobalStyles.primaryCard}>
                        <Text style={GlobalStyles.titleTypo}> Amount / Asset</Text>
                        <View style={GlobalStyles.inputBox}>
                            <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center',width:'100%'}}>
                                <TextInput
                                    keyboardType={'decimal-pad'}
                                    onChangeText={(amt) => {
                                        setAmountToTransfer(amt);
                                    }}
                                    placeholder={'Enter Amount'}
                                    placeholderTextColor={Colors.tintColorGreyedDark}
                                    style={styles.inputText}
                                    value={amountToTransfer.toString()}
                                />
                                <TouchableOpacity onPress={()=>setModal(true)} style={{flexDirection:'row',alignItems:'center'}}>
                                    <Text style={styles.assetTitle}>{selectedAsset.symbol.toUpperCase()}</Text>
                                    <Icon color={Colors.green} name={'angle-down'} size={moderateScale(22)} style={{marginLeft:moderateScale(5)}} />
                                </TouchableOpacity>
                            </View>
                            <View style={styles.bottomInputBar}>
                                <Text style={{color:Colors.green,maxWidth:moderateScale(150)}}> ~ {selectedCurrency.symbol} {walletUtils.getAssetDisplayTextInSelectedCurrency(selectedAsset.symbol.toLowerCase(),amountToTransfer, exchangeRates)}</Text>
                                <TouchableOpacity onPress={()=>setMaxTransferLimit()}>
                                    <Text style={{fontSize:moderateScale(12),fontWeight:'bold',color:Colors.activeTintRed}}>MAX : {walletUtils.getAssetDisplayText( selectedAsset.symbol,selectedAsset.value)} {selectedAsset.symbol.toUpperCase()} </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Text style={GlobalStyles.titleTypo}> To Addess</Text>
                        <View style={GlobalStyles.inputBox}>
                            <TextInput
                                autoCapitalize={'none'}
                                autoCorrect={false}
                                keyboardType={'email-address'}
                                onChangeText={(addr) => {
                                    setAddress(addr);
                                }}
                                placeholder={'Enter Address'}
                                placeholderTextColor={Colors.tintColorGreyedDark}
                                style={{color:Colors.white,width:'100%'}}
                                value={address}
                            />
                        </View>  

                        {/* TODO  -  FUTURE   */}
                        {/* <Text style={GlobalStyles.titleTypo}> Any Remarks</Text>
                        <View style={GlobalStyles.inputBox}>
                            <TextInput
                                autoCorrect={false}
                                onChangeText={remarks => {
                                    setRemarks(remarks);
                                }}
                                placeholder={'Short Remarks'}
                                placeholderTextColor={Colors.tintColorGreyedDark}
                                style={{color:Colors.white,width:'100%'}}
                            />
                        </View>      */}
                    </View>
                   
                </ScrollView>
            );
        return (
            <View style={GlobalStyles.primaryCard}>
                <Text style={{...GlobalStyles.titleTypo,textAlign:'center'}}> Your Account donot have</Text>
                <Text style={{...GlobalStyles.titleTypo,textAlign:'center'}}> sufficient balance</Text>
            </View>
        );
    };

    return(
        <SafeAreaView style={GlobalStyles.appContainer}>
            <View style={styles.wrapper}>
                <AppHeader headerTitle={'Transfer Funds'} >
                    <TouchableOpacity onPress={()=>navigation.navigate('ScannerScreen')}>
                        <Image 
                            resizeMode={'contain'} 
                            source={require('../../../../../../assets/images/icons/scanner.svg')} 
                            style={styles.qrScanner} 
                        />
                    </TouchableOpacity>
                </AppHeader>
                {renderAssets()}
                {
                    showTransactionUi && (
                        <>
                            <TouchableOpacity onPress={()=>checkValidData()} style={styles.transferButton}>
                                <Text style={styles.proceedText}>Proceed</Text>
                            </TouchableOpacity>
                            <Text style={styles.feeText}>
                        Fee : {fee}{' '+selectedAsset.symbol.toUpperCase()+' '}
                        ~ {selectedCurrency.symbol} {walletUtils.getAssetDisplayTextInSelectedCurrency(selectedAsset.symbol.toLowerCase(),fee, exchangeRates)}
                            </Text>
                        </>
                    )
                }
            </View>
            <Modal
                animationIn={'slideInRight'}
                animationOut={'slideOutRight'}
                backdropColor={'#000'}
                dismissable={true}
                isVisible={modal}
                onBackButtonPress={()=>setModal(false)}
                onBackdropPress={()=>setModal(false)}
                style={{justifyContent:'center',alignItems:'center',padding:0}}
                useNativeDriver={true}
            >
                {renderAssetOptions()}
            </Modal>
            <LoadingIndicator
                message={indicatingMssg}
                visible={loader}
            />
            <ErrorDialog
                message={errorMessage}
                onDismiss={() => {
                    setShowError(false);
                }}
                title={errorTitle}
                visible={showError}
            />
        </SafeAreaView>
    );
}