问:
react-native, conditional render does not show on state change. using react navigation setOptions here
in react native, i am using react navigation ,and when using setOptions i am setting up headerright, and onPress of headerRight, i am updating a boolean state to true, to show up the popup, but it does not showup untill i click on the screen once.

this view Media component is passed to a Flatlist as a Renderitem. does it make any problem here.

```<code>import { AntDesign, Feather, Ionicons, Octicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Video } from "expo-av";
import { LinearGradient } from "expo-linear-gradient";
import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
import {
    Image,
    ImageBackground,
    LayoutAnimation,
    Text,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View,
    Alert
} from "react-native";
import Animated from "react-native-reanimated";
import { colors, radius } from "../../../../styles/variables";
import { AuthContext } from "../../../components/layout/layout";
import MemberModal from "../../../components/member-modal/member-modal";
import { DEFAULT_PROFILE, SUCCESS } from "../../../utils/constants/user-constants";
import { concatMediaData } from "../../../utils/helpers/concatQueryPages";
import { VIDEO } from "../../add-content/utils/constants";
import { useMediaListQuery } from "../../add-content/utils/hooks";
import { POST } from "../../report/utils/constants";
import DeletePostModal from "../deletePostModal";
import { likeKeyframe, styles } from "./style";
import {
    downloadMediaSendRequest
} from "../utils/api";
import { LIKE, LIKED_BY, UNLIKE } from "../utils/constants";
import { useDeleteMediaQuery, useLikedListQuery, useLikeUnlikeMediaQuery } from "../utils/hooks";
import { updateImgixCDN } from "../../../utils/helpers/updateImgixCDN";

const ViewMedia = ({ media }) => {
    const navigation = useNavigation()
    const { authContext, state } = useContext(AuthContext);
    const video = useRef(null);
    const [mediaDetail, setMediaDetail] = useState(null)
    const [mediaLoaded, setLoaded] = useState(false);
    const [status, setStatus] = React.useState({});
    const [showModal, setModal] = useState(false);
    const [showDeleteModal, setDeleteModal] = useState(false);
    const [showKebabModal, setKebabModal] = useState(false);
    const [profileURI, setURI] = useState(null);
    const [liked, setLiked] = useState(false);
    const [totalLikes, setTotalLikes] = useState(0);
    const [totalComments, setTotalComments] = useState(null);
    const [likedBy, setLikedBy] = useState([]);
    const [showMediaText, setMediaText] = useState(true);
    const [showPlayPause, setPlayPauseIcon] = useState(null);
    const [doubleTapCount, setDoubleTapCount] = useState(0);
    const [showDoubleTapIcon, setDoubleTapIcon] = useState(false);

    const {
        data: likedListData,
        isLoading: isLikesLoading,
        status: likedStatus,
        fetchStatus: likedFetchStatus,
    } = useLikedListQuery({
        mediaId: media?._id,
        circleId: media.circleId._id,
        pageParam: 1,
        feature: LIKED_BY,
        authToken: state.authToken,
    });
    // console.log(media.s3BucketObject)

    const { mutateAsync: mutateDeleteMedia } = useDeleteMediaQuery(mediaDetail)
    const { mutateAsync: mutateLikeUnlikedMedia } = useLikeUnlikeMediaQuery(mediaDetail)

    // useEffect(() => {
    //     if (!mediaLoaded) {
    //         authContext.loading(true);
    //     }
    //     return () => {
    //         authContext.loading(false);
    //     };
    // }, [mediaLoaded]);

    useEffect(() => {
        // setMediaDetail(state?.selectedMediaData)
        setMediaDetail(media)
        setTotalLikes(media.likes);
        setTotalComments(media.comments);
        setURI({ uri: updateImgixCDN(media?.uploadedBy?.profile, 'w=200&h=200') });
    }, [state])

    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (
                <Ionicons
                    name="ellipsis-vertical"
                    size={26}
                    color={colors.color_white}
                    onPress={() => {

                        setKebabModal(!showKebabModal)
                        console.log(showKebabModal);
                    }}
                />
            ),
            headerShown: showMediaText,
        });
    });

    useEffect(() => {
        if (likedStatus == SUCCESS && likedListData && likedListData.pages.length)
            setLiked(!!likedListData?.pages[0]?.isLikedByUser);
    }, [isLikesLoading, media]);

    useEffect(() => {
        if (mediaDetail) setPlayPause();
    }, [status.isPlaying]);

    const setPlayPause = () => {
        if (mediaDetail?.mediaType == VIDEO) {
            if (status.isPlaying) {
                setPlayPauseIcon(
                    <Ionicons name="play" size={60} color={colors.color_white} />
                );
                setTimeout(() => setPlayPauseIcon(null), 1500);
            } else {
                setPlayPauseIcon(
                    <AntDesign name="pause" size={60} color={colors.color_white} />
                );
            }
        }
    };

    const toggle = () => {
        setModal(!showModal);
    };

    const toggleDeleteModal = () => {
        setDeleteModal(!showDeleteModal);
        setKebabModal(false);
    };

    const setLikes = async (likeFlag) => {
        setLiked(likeFlag);
        const args = {
            mediaId: mediaDetail._id,
            circleId: mediaDetail?.circleId._id,
            authToken: state.authToken,
        };
        if (likeFlag) {
            authContext.setSelectedMediaData({ ...state?.selectedMediaData, likes: totalLikes + 1 })
            setTotalLikes((prevState) => prevState + 1);
            mutateLikeUnlikedMedia({ ...args, feature: LIKE })
        } else {
            setDoubleTapCount(0)
            authContext.setSelectedMediaData({ ...state?.selectedMediaData, likes: totalLikes - 1 })
            setTotalLikes((prevState) => prevState - 1);
            mutateLikeUnlikedMedia({ ...args, feature: UNLIKE })
        }
    };

    const deleteMedia = async () => {
        const args = {
            mediaId: mediaDetail._id,
            circleId: mediaDetail?.circleId._id,
            authToken: state.authToken,
        };
        authContext.loading(true);
        Alert.alert('Deleting post');
        await mutateDeleteMedia(args)
        navigation.navigate("AddContent");
        authContext.loading(false);
    };

    return (
        <TouchableOpacity activeOpacity={1}
            onLongPress={() => {
                LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
                setMediaText(false);
            }}
            onPressOut={() => setMediaText(true)}
            onPress={() => {
                if (showKebabModal) setKebabModal(!showKebabModal);
                if (mediaDetail?.mediaType == VIDEO)
                    status.isPlaying
                        ? video.current.pauseAsync()
                        : video.current.playAsync();

                // Added Double Tap Like feature
                let doubleTapTimer;
                setDoubleTapCount((prevCount) => prevCount + 1)
                if (doubleTapCount % 2 == 1 && !showDoubleTapIcon) {
                    setDoubleTapIcon(true)
                    if (doubleTapCount == 1 && !liked) setLikes(true)
                    clearTimeout(doubleTapTimer)
                } else {
                    doubleTapTimer = setTimeout(() => {
                        (function () {
                            setDoubleTapCount(prevCount => prevCount + 1)
                            setDoubleTapIcon(false)
                        })()
                    }, 1000)
                }
            }} style={styles.media_screen}>
            <>
                <TouchableWithoutFeedback
                >
                    <>
                        {mediaDetail?.mediaType == VIDEO ? (
                            <Video
                                ref={video}
                                style={styles.card}
                                source={{
                                    uri: mediaDetail?.s3BucketObject,
                                }}
                                useNativeControls
                                isLooping
                                shouldPlay={true}
                                resizeMode={"contain"}
                                onReadyForDisplay={() => setLoaded(true)}
                                onPlaybackStatusUpdate={(status) => setStatus(() => status)}
                            />
                        ) : (
                            <Image
                                source={{ uri: updateImgixCDN(mediaDetail?.s3BucketObject, '?auto=compress&w=720') }}
                                borderRadius={radius.border_radius_ternary}
                                style={styles.card}
                                resizeMode={"contain"}
                                // resizeMode={FastImage.resizeMode.contain}
                                onLoadEnd={() => setLoaded(true)}
                            />
                        )}
                        <TouchableOpacity
                            activeOpacity={0.7}
                            style={styles.play_pause}
                            onPress={() => {
                                mediaDetail?.mediaType == VIDEO &&
                                    (status.isPlaying
                                        ? video.current.pauseAsync()
                                        : video.current.playAsync());
                            }}
                        >
                            {showPlayPause}
                        </TouchableOpacity>
                        {showDoubleTapIcon ? <Animated.View
                            entering={likeKeyframe} style={[styles.play_pause, styles.center_like_icon]}>
                            <AntDesign
                                name="heart"
                                size={60}
                                color={colors.color_green}
                            />
                        </Animated.View> : null}
                        <LinearGradient
                            colors={[
                                colors.color_modal_black_bg,
                                colors.color_transparent,
                                colors.color_transparent,
                                colors.color_modal_black_bg,
                            ]}
                            style={[showMediaText && styles.linearGradient]}
                        />
                    </>
                </TouchableWithoutFeedback>
                {showMediaText && (
                    <>
                        {showKebabModal && (
                            <View style={styles.kebab}>
                                <TouchableOpacity
                                    activeOpacity={0.7}
                                    style={styles.kebab_feature}
                                    onPress={async () => {
                                        authContext.loading(true);
                                        setKebabModal(false);
                                        await downloadMediaSendRequest(
                                            updateImgixCDN(mediaDetail?.s3BucketObject, 'auto=compress'),
                                            mediaDetail?.mediaType
                                        );
                                        authContext.loading(false);
                                    }}
                                >
                                    <Feather
                                        name="download"
                                        size={24}
                                        color={colors.color_blue}
                                    />
                                    <Text style={[styles.feature_text, styles.download]}>
                                        Download
                                    </Text>
                                </TouchableOpacity>
                                {mediaDetail?.uploadedBy?._id == state?.userData?._id ? (
                                    <>
                                        <TouchableOpacity
                                            activeOpacity={0.7}
                                            style={styles.kebab_feature}
                                            onPress={toggleDeleteModal}
                                        >
                                            <AntDesign
                                                name="delete"
                                                size={24}
                                                color={colors.color_error}
                                            />
                                            <Text style={[styles.feature_text, styles.delete]}>
                                                Delete
                                            </Text>
                                        </TouchableOpacity>
                                    </>
                                ) : (
                                    <TouchableOpacity
                                        activeOpacity={0.7}
                                        style={styles.kebab_feature}
                                        onPress={() => {
                                            navigation.navigate("Report", {
                                                mediaId: mediaDetail?._id,
                                                circleId: mediaDetail?.circleId?._id,
                                                reportType: POST,
                                            });
                                            setKebabModal(false);
                                        }}
                                    >
                                        <Octicons name="stop" size={24} color={colors.color_blue} />
                                        <Text style={[styles.feature_text, styles.download]}>
                                            Report post
                                        </Text>
                                    </TouchableOpacity>
                                )}
                            </View>
                        )}
                        <View style={styles.detail}>
                            <TouchableOpacity
                                activeOpacity={0.7}
                                style={styles.detail_top}
                                onPress={toggle}
                            >
                                <Image
                                    source={profileURI || DEFAULT_PROFILE}
                                    style={styles.profile}
                                />
                                <Text style={styles.name}>
                                    {mediaDetail?.uploadedBy?.name || "Earth Cups User"}
                                </Text>
                            </TouchableOpacity>
                            <View style={[styles.detail_bottom, styles.bottom]}>
                                <View style={styles.detail_bottom}>
                                    <TouchableOpacity
                                        activeOpacity={0.9}
                                        style={styles.like_icon}
                                        // taking current feature as a param after hitting the icon.
                                        onPress={() => setLikes(!liked)}
                                    >
                                        {liked ? (
                                            <Animated.View entering={likeKeyframe} exiting={likeKeyframe}>
                                                <AntDesign
                                                    name="heart"
                                                    size={15}
                                                    color={colors.color_green}
                                                />
                                            </Animated.View>
                                        ) : (
                                            <Animated.View entering={likeKeyframe} exiting={likeKeyframe}>
                                                <AntDesign
                                                    name="hearto"
                                                    size={15}
                                                    color={colors.color_black_500}
                                                />
                                            </Animated.View>
                                        )}
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        onPress={() =>
                                            navigation.navigate("MembersList", {
                                                mediaDetail: mediaDetail,
                                                circleId: mediaDetail?.circleId._id,
                                                likePage: true,
                                            })
                                        }
                                    >
                                        <Text style={styles.name}>
                                            {totalLikes} like{totalLikes > 1 && "s"}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={[
                                        styles.detail_bottom,
                                        styles.bottom_right,
                                        styles.like_icon,
                                    ]}
                                    onPress={() =>
                                        navigation.navigate("Comments", {
                                            mediaDetail: media,
                                            circleId: media?.circleId._id,
                                        })
                                    }
                                >
                                    <Image
                                        source={require("../../../../assets/icons/comment.png")}
                                    />
                                    <Text style={[styles.name, styles.comments]}>
                                        {totalComments}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </>
                )}
                <MemberModal
                    toggle={toggle}
                    showModal={showModal}
                    memberDetail={mediaDetail?.uploadedBy}
                />
                <DeletePostModal
                    toggle={toggleDeleteModal}
                    showModal={showDeleteModal}
                    deleteMedia={() => deleteMedia()}
                />
            </>
        </TouchableOpacity>
    );
};

export default React.memo(ViewMedia);
</code>```

Body:
in react native, i am using react navigation ,and when using setOptions i am setting up headerright, and onPress of headerRight, i am updating a boolean state to true, to show up the popup, but it does not showup untill i click on the screen once.

this view Media component is passed to a Flatlist as a Renderitem. does it make any problem here.

import { AntDesign, Feather, Ionicons, Octicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Video } from "expo-av";
import { LinearGradient } from "expo-linear-gradient";
import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
import {
    Image,
    ImageBackground,
    LayoutAnimation,
    Text,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View,
    Alert
} from "react-native";
import Animated from "react-native-reanimated";
import { colors, radius } from "../../../../styles/variables";
import { AuthContext } from "../../../components/layout/layout";
import MemberModal from "../../../components/member-modal/member-modal";
import { DEFAULT_PROFILE, SUCCESS } from "../../../utils/constants/user-constants";
import { concatMediaData } from "../../../utils/helpers/concatQueryPages";
import { VIDEO } from "../../add-content/utils/constants";
import { useMediaListQuery } from "../../add-content/utils/hooks";
import { POST } from "../../report/utils/constants";
import DeletePostModal from "../deletePostModal";
import { likeKeyframe, styles } from "./style";
import {
    downloadMediaSendRequest
} from "../utils/api";
import { LIKE, LIKED_BY, UNLIKE } from "../utils/constants";
import { useDeleteMediaQuery, useLikedListQuery, useLikeUnlikeMediaQuery } from "../utils/hooks";
import { updateImgixCDN } from "../../../utils/helpers/updateImgixCDN";

const ViewMedia = ({ media }) => {
    const navigation = useNavigation()
    const { authContext, state } = useContext(AuthContext);
    const video = useRef(null);
    const [mediaDetail, setMediaDetail] = useState(null)
    const [mediaLoaded, setLoaded] = useState(false);
    const [status, setStatus] = React.useState({});
    const [showModal, setModal] = useState(false);
    const [showDeleteModal, setDeleteModal] = useState(false);
    const [showKebabModal, setKebabModal] = useState(false);
    const [profileURI, setURI] = useState(null);
    const [liked, setLiked] = useState(false);
    const [totalLikes, setTotalLikes] = useState(0);
    const [totalComments, setTotalComments] = useState(null);
    const [likedBy, setLikedBy] = useState([]);
    const [showMediaText, setMediaText] = useState(true);
    const [showPlayPause, setPlayPauseIcon] = useState(null);
    const [doubleTapCount, setDoubleTapCount] = useState(0);
    const [showDoubleTapIcon, setDoubleTapIcon] = useState(false);

    const {
        data: likedListData,
        isLoading: isLikesLoading,
        status: likedStatus,
        fetchStatus: likedFetchStatus,
    } = useLikedListQuery({
        mediaId: media?._id,
        circleId: media.circleId._id,
        pageParam: 1,
        feature: LIKED_BY,
        authToken: state.authToken,
    });
    // console.log(media.s3BucketObject)

    const { mutateAsync: mutateDeleteMedia } = useDeleteMediaQuery(mediaDetail)
    const { mutateAsync: mutateLikeUnlikedMedia } = useLikeUnlikeMediaQuery(mediaDetail)

    // useEffect(() => {
    //     if (!mediaLoaded) {
    //         authContext.loading(true);
    //     }
    //     return () => {
    //         authContext.loading(false);
    //     };
    // }, [mediaLoaded]);

    useEffect(() => {
        // setMediaDetail(state?.selectedMediaData)
        setMediaDetail(media)
        setTotalLikes(media.likes);
        setTotalComments(media.comments);
        setURI({ uri: updateImgixCDN(media?.uploadedBy?.profile, 'w=200&h=200') });
    }, [state])

    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (
                <Ionicons
                    name="ellipsis-vertical"
                    size={26}
                    color={colors.color_white}
                    onPress={() => {

                        setKebabModal(!showKebabModal)
                        console.log(showKebabModal);
                    }}
                />
            ),
            headerShown: showMediaText,
        });
    });

    useEffect(() => {
        if (likedStatus == SUCCESS && likedListData && likedListData.pages.length)
            setLiked(!!likedListData?.pages[0]?.isLikedByUser);
    }, [isLikesLoading, media]);

    useEffect(() => {
        if (mediaDetail) setPlayPause();
    }, [status.isPlaying]);

    const setPlayPause = () => {
        if (mediaDetail?.mediaType == VIDEO) {
            if (status.isPlaying) {
                setPlayPauseIcon(
                    <Ionicons name="play" size={60} color={colors.color_white} />
                );
                setTimeout(() => setPlayPauseIcon(null), 1500);
            } else {
                setPlayPauseIcon(
                    <AntDesign name="pause" size={60} color={colors.color_white} />
                );
            }
        }
    };

    const toggle = () => {
        setModal(!showModal);
    };

    const toggleDeleteModal = () => {
        setDeleteModal(!showDeleteModal);
        setKebabModal(false);
    };

    const setLikes = async (likeFlag) => {
        setLiked(likeFlag);
        const args = {
            mediaId: mediaDetail._id,
            circleId: mediaDetail?.circleId._id,
            authToken: state.authToken,
        };
        if (likeFlag) {
            authContext.setSelectedMediaData({ ...state?.selectedMediaData, likes: totalLikes + 1 })
            setTotalLikes((prevState) => prevState + 1);
            mutateLikeUnlikedMedia({ ...args, feature: LIKE })
        } else {
            setDoubleTapCount(0)
            authContext.setSelectedMediaData({ ...state?.selectedMediaData, likes: totalLikes - 1 })
            setTotalLikes((prevState) => prevState - 1);
            mutateLikeUnlikedMedia({ ...args, feature: UNLIKE })
        }
    };

    const deleteMedia = async () => {
        const args = {
            mediaId: mediaDetail._id,
            circleId: mediaDetail?.circleId._id,
            authToken: state.authToken,
        };
        authContext.loading(true);
        Alert.alert('Deleting post');
        await mutateDeleteMedia(args)
        navigation.navigate("AddContent");
        authContext.loading(false);
    };

    return (
        <TouchableOpacity activeOpacity={1}
            onLongPress={() => {
                LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
                setMediaText(false);
            }}
            onPressOut={() => setMediaText(true)}
            onPress={() => {
                if (showKebabModal) setKebabModal(!showKebabModal);
                if (mediaDetail?.mediaType == VIDEO)
                    status.isPlaying
                        ? video.current.pauseAsync()
                        : video.current.playAsync();

                // Added Double Tap Like feature
                let doubleTapTimer;
                setDoubleTapCount((prevCount) => prevCount + 1)
                if (doubleTapCount % 2 == 1 && !showDoubleTapIcon) {
                    setDoubleTapIcon(true)
                    if (doubleTapCount == 1 && !liked) setLikes(true)
                    clearTimeout(doubleTapTimer)
                } else {
                    doubleTapTimer = setTimeout(() => {
                        (function () {
                            setDoubleTapCount(prevCount => prevCount + 1)
                            setDoubleTapIcon(false)
                        })()
                    }, 1000)
                }
            }} style={styles.media_screen}>
            <>
                <TouchableWithoutFeedback
                >
                    <>
                        {mediaDetail?.mediaType == VIDEO ? (
                            <Video
                                ref={video}
                                style={styles.card}
                                source={{
                                    uri: mediaDetail?.s3BucketObject,
                                }}
                                useNativeControls
                                isLooping
                                shouldPlay={true}
                                resizeMode={"contain"}
                                onReadyForDisplay={() => setLoaded(true)}
                                onPlaybackStatusUpdate={(status) => setStatus(() => status)}
                            />
                        ) : (
                            <Image
                                source={{ uri: updateImgixCDN(mediaDetail?.s3BucketObject, '?auto=compress&w=720') }}
                                borderRadius={radius.border_radius_ternary}
                                style={styles.card}
                                resizeMode={"contain"}
                                // resizeMode={FastImage.resizeMode.contain}
                                onLoadEnd={() => setLoaded(true)}
                            />
                        )}
                        <TouchableOpacity
                            activeOpacity={0.7}
                            style={styles.play_pause}
                            onPress={() => {
                                mediaDetail?.mediaType == VIDEO &&
                                    (status.isPlaying
                                        ? video.current.pauseAsync()
                                        : video.current.playAsync());
                            }}
                        >
                            {showPlayPause}
                        </TouchableOpacity>
                        {showDoubleTapIcon ? <Animated.View
                            entering={likeKeyframe} style={[styles.play_pause, styles.center_like_icon]}>
                            <AntDesign
                                name="heart"
                                size={60}
                                color={colors.color_green}
                            />
                        </Animated.View> : null}
                        <LinearGradient
                            colors={[
                                colors.color_modal_black_bg,
                                colors.color_transparent,
                                colors.color_transparent,
                                colors.color_modal_black_bg,
                            ]}
                            style={[showMediaText && styles.linearGradient]}
                        />
                    </>
                </TouchableWithoutFeedback>
                {showMediaText && (
                    <>
                        {showKebabModal && (
                            <View style={styles.kebab}>
                                <TouchableOpacity
                                    activeOpacity={0.7}
                                    style={styles.kebab_feature}
                                    onPress={async () => {
                                        authContext.loading(true);
                                        setKebabModal(false);
                                        await downloadMediaSendRequest(
                                            updateImgixCDN(mediaDetail?.s3BucketObject, 'auto=compress'),
                                            mediaDetail?.mediaType
                                        );
                                        authContext.loading(false);
                                    }}
                                >
                                    <Feather
                                        name="download"
                                        size={24}
                                        color={colors.color_blue}
                                    />
                                    <Text style={[styles.feature_text, styles.download]}>
                                        Download
                                    </Text>
                                </TouchableOpacity>
                                {mediaDetail?.uploadedBy?._id == state?.userData?._id ? (
                                    <>
                                        <TouchableOpacity
                                            activeOpacity={0.7}
                                            style={styles.kebab_feature}
                                            onPress={toggleDeleteModal}
                                        >
                                            <AntDesign
                                                name="delete"
                                                size={24}
                                                color={colors.color_error}
                                            />
                                            <Text style={[styles.feature_text, styles.delete]}>
                                                Delete
                                            </Text>
                                        </TouchableOpacity>
                                    </>
                                ) : (
                                    <TouchableOpacity
                                        activeOpacity={0.7}
                                        style={styles.kebab_feature}
                                        onPress={() => {
                                            navigation.navigate("Report", {
                                                mediaId: mediaDetail?._id,
                                                circleId: mediaDetail?.circleId?._id,
                                                reportType: POST,
                                            });
                                            setKebabModal(false);
                                        }}
                                    >
                                        <Octicons name="stop" size={24} color={colors.color_blue} />
                                        <Text style={[styles.feature_text, styles.download]}>
                                            Report post
                                        </Text>
                                    </TouchableOpacity>
                                )}
                            </View>
                        )}
                        <View style={styles.detail}>
                            <TouchableOpacity
                                activeOpacity={0.7}
                                style={styles.detail_top}
                                onPress={toggle}
                            >
                                <Image
                                    source={profileURI || DEFAULT_PROFILE}
                                    style={styles.profile}
                                />
                                <Text style={styles.name}>
                                    {mediaDetail?.uploadedBy?.name || "Earth Cups User"}
                                </Text>
                            </TouchableOpacity>
                            <View style={[styles.detail_bottom, styles.bottom]}>
                                <View style={styles.detail_bottom}>
                                    <TouchableOpacity
                                        activeOpacity={0.9}
                                        style={styles.like_icon}
                                        // taking current feature as a param after hitting the icon.
                                        onPress={() => setLikes(!liked)}
                                    >
                                        {liked ? (
                                            <Animated.View entering={likeKeyframe} exiting={likeKeyframe}>
                                                <AntDesign
                                                    name="heart"
                                                    size={15}
                                                    color={colors.color_green}
                                                />
                                            </Animated.View>
                                        ) : (
                                            <Animated.View entering={likeKeyframe} exiting={likeKeyframe}>
                                                <AntDesign
                                                    name="hearto"
                                                    size={15}
                                                    color={colors.color_black_500}
                                                />
                                            </Animated.View>
                                        )}
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        onPress={() =>
                                            navigation.navigate("MembersList", {
                                                mediaDetail: mediaDetail,
                                                circleId: mediaDetail?.circleId._id,
                                                likePage: true,
                                            })
                                        }
                                    >
                                        <Text style={styles.name}>
                                            {totalLikes} like{totalLikes > 1 && "s"}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={[
                                        styles.detail_bottom,
                                        styles.bottom_right,
                                        styles.like_icon,
                                    ]}
                                    onPress={() =>
                                        navigation.navigate("Comments", {
                                            mediaDetail: media,
                                            circleId: media?.circleId._id,
                                        })
                                    }
                                >
                                    <Image
                                        source={require("../../../../assets/icons/comment.png")}
                                    />
                                    <Text style={[styles.name, styles.comments]}>
                                        {totalComments}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </>
                )}
                <MemberModal
                    toggle={toggle}
                    showModal={showModal}
                    memberDetail={mediaDetail?.uploadedBy}
                />
                <DeletePostModal
                    toggle={toggleDeleteModal}
                    showModal={showDeleteModal}
                    deleteMedia={() => deleteMedia()}
                />
            </>
        </TouchableOpacity>
    );
};

export default React.memo(ViewMedia);


来源: stackexchange

问:
Not able to install Leaflet package in R
I am unable to install Leaflet package in R.
I tried below steps in installing the packages but getting error message like shown below

Note : I have renv in my project folder so that the library versions are consistent.

Please anyone help me in getting this issue fixed

```<code>>install.packages("leaflet", type = "source")
Installing package into ‘D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32’
(as ‘lib’ is unspecified)
also installing the dependency ‘png’

trying URL 'https://cran.rstudio.com/src/contrib/png_0.1-8.tar.gz'
Content type 'application/x-gzip' length 24880 bytes (24 KB)
downloaded 24 KB

trying URL 'https://cran.rstudio.com/src/contrib/leaflet_2.1.1.tar.gz'
Content type 'application/x-gzip' length 2010129 bytes (1.9 MB)
downloaded 1.9 MB

* installing *source* package 'png' ...
** package 'png' successfully unpacked and MD5 sums checked
** using staged installation
  checking PNG headers and libraries
./configure.win: line 11: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: *** No rule to make target 'E:/Program'.  Stop.
  LOCAL_SOFT does not exist, fall back to external png
  cannot find current PNG files
  attempting to download them
./configure.win: line 38: E:/Program: No such file or directory

 *** ERROR: unable to find PNG files

 They must be either in src/win32, in a tar-ball
 src/libpng-current-win.tar.gz or
 available via the LOCAL_SOFT R make setting.

 You can get the latest binary tar ball from
 http://www.rforge.net/png/files/

ERROR: configuration failed for package 'png'
* removing 'D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32/png'
ERROR: dependency 'png' is not available for package 'leaflet'
* removing 'D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32/leaflet'

The downloaded source packages are in
    ‘C:\Users\vinay\AppData\Local\Temp\Rtmp2fagQ3\downloaded_packages’
Warning messages:
1: In utils::install.packages("leaflet", type = "source") :
  installation of package ‘png’ had non-zero exit status
2: In utils::install.packages("leaflet", type = "source") :
  installation of package ‘leaflet’ had non-zero exit status
</code>```

I tried to install png as per above message but failed again

```<code>> install.packages("png", type = "source")
Installing package into ‘D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32’
(as ‘lib’ is unspecified)
trying URL 'https://cran.rstudio.com/src/contrib/png_0.1-8.tar.gz'
Content type 'application/x-gzip' length 24880 bytes (24 KB)
downloaded 24 KB

* installing *source* package 'png' ...
** package 'png' successfully unpacked and MD5 sums checked
** using staged installation
  checking PNG headers and libraries
./configure.win: line 11: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: *** No rule to make target 'E:/Program'.  Stop.
  LOCAL_SOFT does not exist, fall back to external png
  cannot find current PNG files
  attempting to download them
./configure.win: line 38: E:/Program: No such file or directory

 *** ERROR: unable to find PNG files

 They must be either in src/win32, in a tar-ball
 src/libpng-current-win.tar.gz or
 available via the LOCAL_SOFT R make setting.

 You can get the latest binary tar ball from
 http://www.rforge.net/png/files/

ERROR: configuration failed for package 'png'
* removing 'D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32/png'

The downloaded source packages are in
    ‘C:\Users\vinay\AppData\Local\Temp\Rtmp2fagQ3\downloaded_packages’
Warning message:
In utils::install.packages("png", type = "source") :
  installation of package ‘png’ had non-zero exit status
</code>```

ContentLicense: CC BY-SA 4.0

Body:
I am unable to install Leaflet package in R.
I tried below steps in installing the packages but getting error message like shown below

Note : I have renv in my project folder so that the library versions are consistent.

Please anyone help me in getting this issue fixed

>install.packages("leaflet", type = "source")
Installing package into ‘D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32’
(as ‘lib’ is unspecified)
also installing the dependency ‘png’

trying URL 'https://cran.rstudio.com/src/contrib/png_0.1-8.tar.gz'
Content type 'application/x-gzip' length 24880 bytes (24 KB)
downloaded 24 KB

trying URL 'https://cran.rstudio.com/src/contrib/leaflet_2.1.1.tar.gz'
Content type 'application/x-gzip' length 2010129 bytes (1.9 MB)
downloaded 1.9 MB

* installing *source* package 'png' ...
** package 'png' successfully unpacked and MD5 sums checked
** using staged installation
  checking PNG headers and libraries
./configure.win: line 11: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: *** No rule to make target 'E:/Program'.  Stop.
  LOCAL_SOFT does not exist, fall back to external png
  cannot find current PNG files
  attempting to download them
./configure.win: line 38: E:/Program: No such file or directory

 *** ERROR: unable to find PNG files

 They must be either in src/win32, in a tar-ball
 src/libpng-current-win.tar.gz or
 available via the LOCAL_SOFT R make setting.

 You can get the latest binary tar ball from
 http://www.rforge.net/png/files/

ERROR: configuration failed for package 'png'
* removing 'D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32/png'
ERROR: dependency 'png' is not available for package 'leaflet'
* removing 'D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32/leaflet'

The downloaded source packages are in
    ‘C:\Users\vinay\AppData\Local\Temp\Rtmp2fagQ3\downloaded_packages’
Warning messages:
1: In utils::install.packages("leaflet", type = "source") :
  installation of package ‘png’ had non-zero exit status
2: In utils::install.packages("leaflet", type = "source") :
  installation of package ‘leaflet’ had non-zero exit status

I tried to install png as per above message but failed again

> install.packages("png", type = "source")
Installing package into ‘D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32’
(as ‘lib’ is unspecified)
trying URL 'https://cran.rstudio.com/src/contrib/png_0.1-8.tar.gz'
Content type 'application/x-gzip' length 24880 bytes (24 KB)
downloaded 24 KB

* installing *source* package 'png' ...
** package 'png' successfully unpacked and MD5 sums checked
** using staged installation
  checking PNG headers and libraries
./configure.win: line 11: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: E:/Program: No such file or directory
make: *** No rule to make target 'E:/Program'.  Stop.
  LOCAL_SOFT does not exist, fall back to external png
  cannot find current PNG files
  attempting to download them
./configure.win: line 38: E:/Program: No such file or directory

 *** ERROR: unable to find PNG files

 They must be either in src/win32, in a tar-ball
 src/libpng-current-win.tar.gz or
 available via the LOCAL_SOFT R make setting.

 You can get the latest binary tar ball from
 http://www.rforge.net/png/files/

ERROR: configuration failed for package 'png'
* removing 'D:/Windows/Analytics/R Programming/GitHub/App/****/****/renv/library/R-4.0/x86_64-w64-mingw32/png'

The downloaded source packages are in
    ‘C:\Users\vinay\AppData\Local\Temp\Rtmp2fagQ3\downloaded_packages’
Warning message:
In utils::install.packages("png", type = "source") :
  installation of package ‘png’ had non-zero exit status


问:
How to open a pdf in new window with specified name using angular/typescript?
I'm trying the below code to open pdf for preview.

```<code>previewPdf() {
        let mypayload;
        mypayload = {
            id: ...,
            status: ...
        };

    this.service.previewPdf(mypayload).subscribe(
        (response) => {
            const blob = new Blob([response], { type: 'application/pdf' });
            const file_name = 'xyz.pdf';
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(blob, file_name);
            } else {
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                window.open(link.href, '_blank')
            }
        }
    );
}
</code>```

previewPdf API code is already implemented in the service file and the PDF is being generated at Flask backend and sent to angular.

The above code works fine. It opens pdf in a new window but the problem is, the pdf name is always some random blob code.

How can I put a filename of my choice (eg.. xyz.pdf) instead of some code?

Body:
I'm trying the below code to open pdf for preview.

previewPdf() {
        let mypayload;
        mypayload = {
            id: ...,
            status: ...
        };

    this.service.previewPdf(mypayload).subscribe(
        (response) => {
            const blob = new Blob([response], { type: 'application/pdf' });
            const file_name = 'xyz.pdf';
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(blob, file_name);
            } else {
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                window.open(link.href, '_blank')
            }
        }
    );
}

previewPdf API code is already implemented in the service file and the PDF is being generated at Flask backend and sent to angular.

The above code works fine. It opens pdf in a new window but the problem is, the pdf name is always some random blob code.

How can I put a filename of my choice (eg.. xyz.pdf) instead of some code?


问:
Center the coordinate system of python pillow
I would like to create images using mathematical equations / functions and python pillow. For example,

pseudo code:

```<code>iterate through pixels
if x^2 + y^2 <= 25, pixel_color = green.
Draws a solid circle of radius 5
</code>```

I am aware python pillow has inbuilt functions to draw circles. I would like to draw other complicated functions as well.

The problem is that (0,0) of a pillow image is at the top left corner.
Can I somehow center the coordinate system of python pillow so that I can draw the whole circle instead of a quadrant?

I am again aware that I can use (x-x1)2 + (y-y1)2 <= 25 to center the circle at (x1, y1), but it would be very convenient if I can center the axes like in case of nannou.

Body:
I would like to create images using mathematical equations / functions and python pillow. For example,

pseudo code:

iterate through pixels
if x^2 + y^2 <= 25, pixel_color = green.
Draws a solid circle of radius 5

I am aware python pillow has inbuilt functions to draw circles. I would like to draw other complicated functions as well.

The problem is that (0,0) of a pillow image is at the top left corner.
Can I somehow center the coordinate system of python pillow so that I can draw the whole circle instead of a quadrant?

I am again aware that I can use (x-x1)2 + (y-y1)2 <= 25 to center the circle at (x1, y1), but it would be very convenient if I can center the axes like in case of nannou.


问:
Spring RSocket not retrieving Mono response
I am trying to make server request to clients using Rsocket(request-response pattern). On server I'm using Spring and my client is Dart(dart-rsocket). Debugging shows that server does receive data but I am unable to retrieve Mono(payload) from response.

On Server :

```<code>rsocketRequester.route(null).data("this is server reqeust!")
    .retrieveMono(String.class)
    .subscribe((value) -> {
        // Expectation : print payload data to console
        // Actual : No output on console
        System.out.println(value);
    });
</code>```

have tried with route("") but no luck.

On Client:

```<code>List<int> list = 'this is client response!'.codeUnits;
Uint8List bytes = Uint8List.fromList(list);

RSocketConnector connector = RSocketConnector.create().acceptor(requestResponseAcceptor((payload) {
    print(convertor(payload!.data!)); // to print server request payload
    return Future.value(Payload.from(null,bytes)); // Payload.from(metadata,data)
}));

var rsocket = await connector.connect("ws://localhost:7000/rsocket");
</code>```

Server Debug :

Client side :

client receives request successfully. And server receives COMPLETE type frame with payload but nothing is printed on console.

Body:
I am trying to make server request to clients using Rsocket(request-response pattern). On server I'm using Spring and my client is Dart(dart-rsocket). Debugging shows that server does receive data but I am unable to retrieve Mono(payload) from response.

On Server :

rsocketRequester.route(null).data("this is server reqeust!")
    .retrieveMono(String.class)
    .subscribe((value) -> {
        // Expectation : print payload data to console
        // Actual : No output on console
        System.out.println(value);
    });

have tried with route("") but no luck.

On Client:

List<int> list = 'this is client response!'.codeUnits;
Uint8List bytes = Uint8List.fromList(list);

RSocketConnector connector = RSocketConnector.create().acceptor(requestResponseAcceptor((payload) {
    print(convertor(payload!.data!)); // to print server request payload
    return Future.value(Payload.from(null,bytes)); // Payload.from(metadata,data)
}));

var rsocket = await connector.connect("ws://localhost:7000/rsocket");

Server Debug :

Client side :

client receives request successfully. And server receives COMPLETE type frame with payload but nothing is printed on console.


问:
Unable to update (dummy change) the data in an JSON placeholder data using React hooks
App.js

```<code>
import './App.css';
import Create from "./Create";
import Album from "./Album";
import {useState, useEffect} from 'react'
function App() {

  const [users, setData] = useState([]);
  const [update, setUpdate] = useState(false)
const [title, setTitle] = useState('')
const [userId, setUserId] = useState('')

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.typicode.com/albums")
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => {
        console.log(err);
      });
  };

  const onAdd = async (title, userId) => {
    const url =  "https://jsonplaceholder.typicode.com/albums/"

    await fetch(url, {
      method:users.id ? "PUT": "POST",
      body: JSON.stringify({
        title: title,
        userId: userId,
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    })
      .then((res) => {
        if (res.status !== 201) {
          return;
        } else {
          return res.json();
        }
      })
      .then((data) => {
        setData((users) => [...users, data]);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const onUpdate =async({ id,title, userId})=>{

    fetch(`https://jsonplaceholder.typicode.com/albums/${id}`, {
      method: 'PUT',
      body: JSON.stringify({
        title: "title",
        userId: "userId",
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json));
  }

  const onDelete = async (id) => {
    await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
      method: "DELETE",
    })
      .then((res) => {
        if (res.status !== 200) {
          return;
        } else {
          setData(
            users.filter((item) => {
             return item.id !== id;
            })
          );
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  console.log(users);
  return (
    <div className="App">
      <h3>React Crud Using Jsonplaceholder</h3>
      <br />
      <Create onAdd={onAdd} />
        <h3>There are total {users.length} albums </h3>

       <div>
        {users.map((item) => (

          <Album
            id={item.id}
            key={item.id}
            title={item.title}
            userId={item.userId}
            users={users}
            onDelete={onDelete}
            onUpdate={onUpdate}
          />

        )
      )}
      </div>

    </div>
  );
};

export default App;
</code>```

Update.js

```<code>import {useState, useEffect} from 'react'
export default function Update({id, userId, title, users}){

  const onUpdate =async({ id,title, userId})=>{

    fetch(`https://jsonplaceholder.typicode.com/albums/${id}`, {
      method: 'PUT',
      body: JSON.stringify({
        title: "title",
        userId: "userId",
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json));
  }

  const handleOnSubmit = (e) => {
    e.preventDefault();
    onUpdate(id, e.target.title.value, e.target.userId.value);
    console.log(id, title, userId)
    e.target.title.value = "";
    e.target.userId.value = "";
}

  const handle=(e)=>{
      const data={...users}
      data[e.target.id] = e.target.value
      console.log(e.target.id)
  }

    return(
        <div>
        <form>
          <h3>Update Album</h3>
          <input  name="userId"
                  type="number"
                  placeholder="userId"
                  onChange={(e)=>console.log(e.target.value)}
                  />

          <input  name="title"
                  type="text"
                  placeholder="title"
                  onChange={(e)=>console.log(e.target.value)}
                />
          <button onClick={(e)=>console.log(e.target.value)} >Update</button>
          <hr />
        </form>
      </div>
        )
}
</code>```

Album.js

```<code>import {useState, useEffect} from 'react'
import Update from './Update'

export default function Album({id, title, userId, onDelete, handleOnSubmit, onUpdate, users }){
    const handleDelete = () => {
        onDelete(id);
    }

    const [update, setUpdate] = useState(false)

    return (
        <div className="albumArt">

            <h2>{title}</h2>
            <p>{userId}</p>
            <span>
                <button onClick={()=>setUpdate(!update)}>edit</button>
                <button onClick={handleDelete} >delete</button>
            </span>

        {update && <Update id={id} title={title} userId={userId} users={users}/>}

        </div>
    )

}
</code>```

Create.js

```<code>export default function Create({onAdd}){

const handleOnSubmit = (e) => {
    e.preventDefault();
    onAdd(e.target.title.value,e.target.userId.value);
    e.target.title.value = "";
    e.target.userId.value = "";
}
    return(
        <div>
        <form onSubmit={handleOnSubmit}>
          <h3>Add Album</h3>
          <input placeholder="title" name="title" />
          <input placeholder="userId" name="userId" />
          <button onSubmit={handleOnSubmit}>Add</button>
          <hr />
        </form>
      </div>

    )
}
</code>```

I am expecting to update the data in json placeholder api for an instance. I used react hooks to set the values to objects in api and used fetch PUT method to update the data. And unable to pass on the react hooks to next components. Like the state components are not able alter the value of state variables.

Please help in updating the data in this context

Body:
App.js

import './App.css';
import Create from "./Create";
import Album from "./Album";
import {useState, useEffect} from 'react'
function App() {

  const [users, setData] = useState([]);
  const [update, setUpdate] = useState(false)
const [title, setTitle] = useState('')
const [userId, setUserId] = useState('')

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.typicode.com/albums")
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => {
        console.log(err);
      });
  };

  const onAdd = async (title, userId) => {
    const url =  "https://jsonplaceholder.typicode.com/albums/"

    await fetch(url, {
      method:users.id ? "PUT": "POST",
      body: JSON.stringify({
        title: title,
        userId: userId,
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    })
      .then((res) => {
        if (res.status !== 201) {
          return;
        } else {
          return res.json();
        }
      })
      .then((data) => {
        setData((users) => [...users, data]);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const onUpdate =async({ id,title, userId})=>{

    fetch(`https://jsonplaceholder.typicode.com/albums/${id}`, {
      method: 'PUT',
      body: JSON.stringify({
        title: "title",
        userId: "userId",
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json));
  }

  const onDelete = async (id) => {
    await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
      method: "DELETE",
    })
      .then((res) => {
        if (res.status !== 200) {
          return;
        } else {
          setData(
            users.filter((item) => {
             return item.id !== id;
            })
          );
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  console.log(users);
  return (

React Crud Using Jsonplaceholder

      <Create onAdd={onAdd} />

There are total {users.length} albums

        {users.map((item) => (

          <Album
            id={item.id}
            key={item.id}
            title={item.title}
            userId={item.userId}
            users={users}
            onDelete={onDelete}
            onUpdate={onUpdate}
          />

        )
      )}

  );
};

export default App;

Update.js

import {useState, useEffect} from 'react'
export default function Update({id, userId, title, users}){

  const onUpdate =async({ id,title, userId})=>{

    fetch(`https://jsonplaceholder.typicode.com/albums/${id}`, {
      method: 'PUT',
      body: JSON.stringify({
        title: "title",
        userId: "userId",
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json));
  }

  const handleOnSubmit = (e) => {
    e.preventDefault();
    onUpdate(id, e.target.title.value, e.target.userId.value);
    console.log(id, title, userId)
    e.target.title.value = "";
    e.target.userId.value = "";
}

  const handle=(e)=>{
      const data={...users}
      data[e.target.id] = e.target.value
      console.log(e.target.id)
  }

    return(

        <form>

Update Album

          <input  name="userId"
                  type="number"
                  placeholder="userId"
                  onChange={(e)=>console.log(e.target.value)}
                  />

          <input  name="title"
                  type="text"
                  placeholder="title"
                  onChange={(e)=>console.log(e.target.value)}
                />
          <button onClick={(e)=>console.log(e.target.value)} >Update</button>

        </form>

        )
}

Album.js

import {useState, useEffect} from 'react'
import Update from './Update'

export default function Album({id, title, userId, onDelete, handleOnSubmit, onUpdate, users }){
    const handleDelete = () => {
        onDelete(id);
    }

    const [update, setUpdate] = useState(false)

    return (

{title}

{userId}

                <button onClick={()=>setUpdate(!update)}>edit</button>
                <button onClick={handleDelete} >delete</button>

        {update && <Update id={id} title={title} userId={userId} users={users}/>}

    )

}

Create.js

export default function Create({onAdd}){

const handleOnSubmit = (e) => {
    e.preventDefault();
    onAdd(e.target.title.value,e.target.userId.value);
    e.target.title.value = "";
    e.target.userId.value = "";
}
    return(

        <form onSubmit={handleOnSubmit}>

Add Album

          <input placeholder="title" name="title" />
          <input placeholder="userId" name="userId" />
          <button onSubmit={handleOnSubmit}>Add</button>

        </form>

    )
}

I am expecting to update the data in json placeholder api for an instance. I used react hooks to set the values to objects in api and used fetch PUT method to update the data. And unable to pass on the react hooks to next components. Like the state components are not able alter the value of state variables.

Please help in updating the data in this context


问:
The rate of change of angle of attack
in the Aerospace Blockset in Simulink, the example model:

```<code>asbSkyHogg
</code>```

in this block (asbSkyHogg/Vehicle System Model/Vehicle/3DOF to 6DOF/3DOF to 6DOF/calc alpha_dot) which is used to calcualate the rate of change of of angle of attack

The rate of change of of angle of attack is calculated based on the equation:

So, the acceleration  (input #3) in body axes should be transformed to wind axes using the DCM Body-to-Wind as shown in the picture... but why the transpose block is added here???!! In this case, it's actually transformed to body axes again!!

I tried to comment through the transpose block, but I need confirmation if I'm wrong or not, and why it's added.

Title: The rate of change of angle of attack

Body:
in the Aerospace Blockset in Simulink, the example model:

asbSkyHogg

in this block (asbSkyHogg/Vehicle System Model/Vehicle/3DOF to 6DOF/3DOF to 6DOF/calc alpha_dot) which is used to calcualate the rate of change of of angle of attack

The rate of change of of angle of attack is calculated based on the equation:

So, the acceleration  (input #3) in body axes should be transformed to wind axes using the DCM Body-to-Wind as shown in the picture... but why the transpose block is added here???!! In this case, it's actually transformed to body axes again!!

I tried to comment through the transpose block, but I need confirmation if I'm wrong or not, and why it's added.


问:
How to simulate browser shortcut for closing browser tab from JS code?
As is known, Cypress can't work with browser tabs. In my script I am not able to use remove target attribute trick as target URL is returned in the body of response received after sending request generated by click on a button. And this new URL is opened in another tab. So I have to intercept  this request, parse the response, grab the URL from the response body and visit the URL in my current tab. This works and the  test can be proceeded in the current tab, but the new tab remains open. It is annoying and I want to close this tab.

I tried to do this by sending "ctrl+w" browser shortcut. I didn't find a solution for JS, so currently I created exe file compiled from the correspondent AutoIt command and triggered by cy.exec() command on my Windows machine. But I guess it will not work on Linux server. So I tried to install node-key-sender npm package, but its command ks.sendKey() doesn't work and throws "exec is not a function" error. Is there any other way to generate "ctrl+w" combination in JS code?


问:
Android VPNService: "Cannot set address" error
I have a VPNService in Android which calls:

```<code>mInterface = builder.setSession("VPNtoSocket")
.setMtu(20000)
.addAddress("10.8.0.2", 32)
.addDnsServer("8.8.8.8")
.addRoute("0.0.0.0", 0)
.establish();
</code>```

everything works well the first time. Then, I stop the VPNService and I make sure that the following code is called:

```<code>mInterface.close();
</code>```

If I start the VPNService a second time from the same application instance, I get a crash during the establish call with the following error:

```<code>"Cannot set address"
</code>```

I have doubled checked everything and the VPNService is stopped properly and all VPN-related threads in my code are stopped.

Any idea what I'm doing wrong? Is it possible to start/stop/start a VPNService with the same address?

Body:
I have a VPNService in Android which calls:

mInterface = builder.setSession("VPNtoSocket")
.setMtu(20000)
.addAddress("10.8.0.2", 32)
.addDnsServer("8.8.8.8")
.addRoute("0.0.0.0", 0)
.establish();

everything works well the first time. Then, I stop the VPNService and I make sure that the following code is called:

mInterface.close();

If I start the VPNService a second time from the same application instance, I get a crash during the establish call with the following error:

"Cannot set address"

I have doubled checked everything and the VPNService is stopped properly and all VPN-related threads in my code are stopped.

Any idea what I'm doing wrong? Is it possible to start/stop/start a VPNService with the same address?


问:
How to create a jar without one-jar dependency for spring batch
Currently we are using one-jar dependency for spring batches to create a jar file with all the dependencies inside. We are required to create jar for spring batche and run it without using one-jar. But if we don't use one_jar it won't bind the dependencies. Is there a way to overcome this.</p>


问:
Is it common to have the client process data in order the lessen the load of the API?
For example, the client sends a request to the API server to retrieve documents / records matching certain filters. Of the matching records, there will be additional processing such as transformations, sorting, etc.

Is it a common design in web development to have the API only return the unprocessed documents / records and then have the client perform the additional processing so that the load on the API is lessen?


问:
show complete hovering data as an alert message when clicking on any child container
The query is that when I click on any child container, hovering data that appear should also appear as an alert message as a complete hovering text.
'''

```<code>  indicator = px.treemap(filtered_df,
                color=COLOR,
                color_continuous_scale=color_discrete_map,
                # path = PATH,
                path = ['Sector','Symbol','dailyChange',],
                # path = ['Sector','Symbol','dailyChange','Market Capitalization','PE Ratio%'],

                # template='plotly_white',
                maxdepth=6,
                hover_data=HOVER_DATA,
                values=value_attribute,
                custom_data=HOVER_DATA,
                color_discrete_map=color_discrete_map)

    indicator.update_traces(textfont_size=22,)
</code>```

'''

[]

[]

Body:
The query is that when I click on any child container, hovering data that appear should also appear as an alert message as a complete hovering text.
'''

  indicator = px.treemap(filtered_df,
                color=COLOR,
                color_continuous_scale=color_discrete_map,
                # path = PATH,
                path = ['Sector','Symbol','dailyChange',],
                # path = ['Sector','Symbol','dailyChange','Market Capitalization','PE Ratio%'],

                # template='plotly_white',
                maxdepth=6,
                hover_data=HOVER_DATA,
                values=value_attribute,
                custom_data=HOVER_DATA,
                color_discrete_map=color_discrete_map)

    indicator.update_traces(textfont_size=22,)

'''

[]

[]


问:
Can't load variable image with spring boot thymeleaf
I'm very new to spring boot, and I have to do a proyect with Thymeleaf.
I can't figure out how to load the variable images from my folders.

```<code><div class="row" th:fragment="searched-film">
    <div class="card m-2" style="width: 12rem;" th:each="film : ${films}">
        <img alt="Póster de la película" class="card-img-top p-3"
             th:src="@{${'./static/images/peliculas/' + film.poster}}">
        <div class="card-body">
            <h5 class="card-title" th:text="${film.title}"></h5> <h6 class="card-title"
                                                                     th:text="'(' + *{film.year} + ')'"></h6>
        </div>
    </div>
</div>
</code>```

Title and the year works, but images dont load.
the files are in 'FilmoTokio\src\main\resources\static\images\peliculas', meanwhile this html in 'FilmoTokio\src\main\resources\templates'

This is the github: FilmoTokio

I tried to change the link, I used th:hrc, I changed the folder's name...

Body:
I'm very new to spring boot, and I have to do a proyect with Thymeleaf.
I can't figure out how to load the variable images from my folders.

Title and the year works, but images dont load.
the files are in 'FilmoTokio\src\main\resources\static\images\peliculas', meanwhile this html in 'FilmoTokio\src\main\resources\templates'

This is the github: FilmoTokio

I tried to change the link, I used th:hrc, I changed the folder's name...


问:
Want to initialize GA4 using gtag command and also utilize the GTM to send events to GA4 property
Anyone know how can I initialize the GA4 property using the command gtag('config',) (Want to add some parameters manually i.e. clientID and SessionID for cross-domain tracking via iframe).

If I initialize the GA4 using gtag command, how can I utilize the GTM to send events to GA4 property as a GA4 configuration tag is also required in the GTM to send events to a property and this configuration tag also initialize the GA4 property.

I had added the GA4 configuration tag in GTM and by using custom HTML, I also initialize the GA4 using gtag command but the data I was getting was not correct regarding the clientId and SessionID.


问:
How to change code hint font family in vscode?
In VSCode using ctrl+shift+space within parentheses () cause ide to display function parameters as it declared. I always use this feature to often and like to change its font family/size. Is there a way to do this in VSCode?

To be clear I attached an small part of Screen Shot.

I see in VSCode themes there are options to change almost everything appearance but no idea about this part name and how to change it.


问:
Linux : how to connect a bluetooth serial device and read the output of the serial device
I have a stm32wb55 as bluetooth serial device, and I can pair it with a phone and can get an output but on the PC with rfcomm it doesn't work.

I want an rfcomm alternative because it doesnt work and is also departed, I tried it on my rok 5b with armbian and my tower pc with archlinux. I tried to connect it with rfcomm and it didn't work. It closed after a few seconds with screen and picocom.

I want to use the output and input in a c++ program on my pc/sbc.


问:
Stripe payment trigger All modals to open
When i put credits and make a payment the payment is succesfull but for some reason after the payment stripe is triggering all modals to open(from header), like it setting true all the modals , anyone know why ?  ( The modal is from another compoenent name "Header" its working fine with everything else in my app .

Code below :

Merry Christmas :)

```<code>//React imports
import React, { useState } from 'react';
import { StyleSheet, View, Text, Pressable, Alert, Image , KeyboardAvoidingView , Dimensions , Platform} from 'react-native';
import { useNavigation , useFocusEffect } from '@react-navigation/native';
//Icon imports
import { AntDesign } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
//API imports
import axios from 'axios';
import { StripeProvider, CardField, CardFieldInput, createToken, confirmPayment } from '@stripe/stripe-react-native';
import { Buffer } from "buffer";
//useConfirmPayment,useStripe
//My imports
import Header from './Header';
//.Env imports
import {URL} from '@env';

export default function Payment({route}) {

  //Constructors for Card Details
  const [card, setCard] = useState(CardFieldInput.Details | null);
  //Use of navigate Hook
  const navigation = useNavigation();

  //My local variables
  const bookItem = route.params.paramKey;
  const bookID = bookItem.id;
  const bookPrice = bookItem.Price;
  const bookImage = bookItem.image;

  //Payment function
  const pay = async () => {

    //First we create token for the payment
    const resToken = await createToken({...card,type:'Card'})

    //Then we create data for the payment , like amount and currency
    const payData = {
      amount : bookPrice * 100,
      currency : "eur",
    }
    console.log(payData)
   //If credit card fields are correct fil out ,then continue to further confirmations
    if(Object.keys(resToken) == "token"){
    //Request to check the success of the payment
    await axios.post(URL+"/createPayment",
    {...payData}).then((response)=>{
      const { confirmPaymentIntent } = confirmPayment(response.data.paymentIntent,{paymentMethodType : 'Card'})

      //If confirm is true then update the book table in Bought Column
      if(Object.keys(response.data).length > 1){
        Alert.alert("Success payment")
        //Request to inform the table that this book is bought
        axios.post( URL+"/bookBuy",
        {
          bookCheckID : bookID,
          userBoughtItID : global.id
        }).catch((error)=>{
          console.log("Axios request failed to buy the book")
        })
        //End of second Axios request
      }
      else
      {
        console.log("Token Error ,maybe card credits is wrong")
        Alert.alert("Error in payment,maybe card credits are wrong?")
      }
    }).catch((error)=>{
      console.log("Axios request for payment failed")
    })
    //End of first Axios request
  }
  else{
    Alert.alert("Card credentials are not Valid")
  }
}

return (

  //Stripe public key provider
  <StripeProvider
    publishableKey = "pk_test_51MAWjfI5vsjFWvGhrr5n2mAujexURegEgW4ujlSPpois9Em7FBzHrEkuv5zkeRjck8CeLBAcI761eVqgWQ3mL6EX00oSp0WeB6"
     merchantIdentifier = "merchant.com.{{E-LIBRARY}}"
     urlScheme = "your-url-scheme"
  >

  <KeyboardAvoidingView
      style={{ height: Platform.OS ==='ios' ? Dimensions.get('window').height * 1 : Dimensions.get('window').height * 1}}
      behavior={(Platform.OS === 'ios') ? 'position' : "position"}
      enabled
      keyboardVerticalOffset={Platform.select({ ios: -50, android: -50 })}

  >
  <View style = {styles.container}>

    {/* Header */}
    <Header />

      {/* Container */}
      <View style={styles.container}>
        <View style = {styles.viewContainerForInfos}>
          <Text style = {styles.bookText}>{bookItem.title}</Text>
          <View style = {styles.imageView}>
            <Image
              style = {{width:'30%',height:'60%',borderRadius:22,position:'relative',resizeMode:'contain'}}
              source = {{uri :'data:image/png;base64,' + Buffer.from(bookImage.data,'hex').toString('base64')}}
            />
            <AntDesign name="checkcircleo" size={24} color="white" style = {{}} />
          </View>
        </View>

        <View style = {styles.viewForCardinfo}>
          <Text style = {styles.creditText}>Credit Card Informations</Text>
          <FontAwesome5 name="id-card-alt" size={30} color="black" />
        </View>

        <View style = {{alignItems:'center',width:'100%',height:'100%'}}>

          {/* Card component from Stripe */}
          <CardField
            postalCodeEnabled={true}
            placeholder={{
              number: '4242 4242 4242 4242',
            }}
            cardStyle={{
              backgroundColor: '#FFFFFF',
              textColor: '#000000',
              borderWidth:2,
              borderRadius:15
            }}
            style={{
              width: '80%',
              height: '8%',
              marginVertical: '15%',
            }}
            onCardChange={(cardDetails) => {
              setCard(cardDetails);
            }}
          />

        {/* Pressable in order for the client to pay */}
        <Pressable style = {styles.pressable} onPress = {() => {pay()}}>
            <Text style = {styles.pressableText}>Buy</Text>
        </Pressable>

      </View>

      </View>

  </View>

  </KeyboardAvoidingView>

  </StripeProvider>

  )

}

</code>```

Header

```<code>//React imports
import React, { useState } from 'react';
import { StyleSheet, Text, View, Pressable, Modal, Platform} from 'react-native';
import { useNavigation } from '@react-navigation/native';
//Icon Imports
import { SimpleLineIcons } from '@expo/vector-icons';
//Icons inside header modal
import { AntDesign } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';

export default function Header() {

  //Use of navigation Hook
  const navigation = useNavigation();

  //Modal Constructor
  const [modalVisible,setModalVisible] = useState(false);

    return (

    <View style = {styles.Container}>

      {/* Modal*/}
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>

        <View style = {styles.modalStyle}>

          {/* Pressable and Text for each functionality  */}
          <Pressable  style = {styles.pressable} onPress = { () => navigation.navigate('Home')}>
            <AntDesign name="home" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Home</Text>
          </Pressable>

          <Pressable  style = {styles.pressable} onPress = { () => navigation.navigate('MyBooks')}>
          <Feather name="book" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>My Collection</Text>
          </Pressable>

          <Pressable  style = {styles.pressable} onPress = { () => navigation.navigate('Profile')}>
            <AntDesign name="profile" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Profile</Text>
          </Pressable>

          <Pressable style = {styles.pressable} onPress = { () => navigation.navigate('Settings')}>
            <Feather name="settings" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Settings</Text>
          </Pressable>

          <Pressable style = {styles.pressable} onPress = { () => navigation.navigate('LogInPage')}>
            <AntDesign name="logout" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Log Out</Text>
          </Pressable>

          <Pressable onPress={ () => {setModalVisible(!modalVisible)}} style = {styles.pressable}>
            <AntDesign name="closecircleo" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Close modal</Text>
          </Pressable>

        </View>

      </Modal>

      {/* Pressable Mechanism in order to open the Modal */}
      <Pressable onPress={ () => {setModalVisible(!modalVisible)}} style = {styles.pressableMenu}>
        <SimpleLineIcons style = {styles.iconMenu} name="menu" size={24} color="white" />
        <Text style = {styles.menuText}>Menu</Text>
      </Pressable>

      <View style ={{width:'50%',alignItems:'center',justifyContent:'center'}}>
        <Text style = {styles.nameText}> E-Library</Text>
      </View>

    </View>
  );}

</code>```

Body:
When i put credits and make a payment the payment is succesfull but for some reason after the payment stripe is triggering all modals to open(from header), like it setting true all the modals , anyone know why ?  ( The modal is from another compoenent name "Header" its working fine with everything else in my app .

Code below :

Merry Christmas :)

//React imports
import React, { useState } from 'react';
import { StyleSheet, View, Text, Pressable, Alert, Image , KeyboardAvoidingView , Dimensions , Platform} from 'react-native';
import { useNavigation , useFocusEffect } from '@react-navigation/native';
//Icon imports
import { AntDesign } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
//API imports
import axios from 'axios';
import { StripeProvider, CardField, CardFieldInput, createToken, confirmPayment } from '@stripe/stripe-react-native';
import { Buffer } from "buffer";
//useConfirmPayment,useStripe
//My imports
import Header from './Header';
//.Env imports
import {URL} from '@env';

export default function Payment({route}) {

  //Constructors for Card Details
  const [card, setCard] = useState(CardFieldInput.Details | null);
  //Use of navigate Hook
  const navigation = useNavigation();

  //My local variables
  const bookItem = route.params.paramKey;
  const bookID = bookItem.id;
  const bookPrice = bookItem.Price;
  const bookImage = bookItem.image;

  //Payment function
  const pay = async () => {

    //First we create token for the payment
    const resToken = await createToken({...card,type:'Card'})

    //Then we create data for the payment , like amount and currency
    const payData = {
      amount : bookPrice * 100,
      currency : "eur",
    }
    console.log(payData)
   //If credit card fields are correct fil out ,then continue to further confirmations
    if(Object.keys(resToken) == "token"){
    //Request to check the success of the payment
    await axios.post(URL+"/createPayment",
    {...payData}).then((response)=>{
      const { confirmPaymentIntent } = confirmPayment(response.data.paymentIntent,{paymentMethodType : 'Card'})

      //If confirm is true then update the book table in Bought Column
      if(Object.keys(response.data).length > 1){
        Alert.alert("Success payment")
        //Request to inform the table that this book is bought
        axios.post( URL+"/bookBuy",
        {
          bookCheckID : bookID,
          userBoughtItID : global.id
        }).catch((error)=>{
          console.log("Axios request failed to buy the book")
        })
        //End of second Axios request
      }
      else
      {
        console.log("Token Error ,maybe card credits is wrong")
        Alert.alert("Error in payment,maybe card credits are wrong?")
      }
    }).catch((error)=>{
      console.log("Axios request for payment failed")
    })
    //End of first Axios request
  }
  else{
    Alert.alert("Card credentials are not Valid")
  }
}

return (

  //Stripe public key provider
  <StripeProvider
    publishableKey = "pk_test_51MAWjfI5vsjFWvGhrr5n2mAujexURegEgW4ujlSPpois9Em7FBzHrEkuv5zkeRjck8CeLBAcI761eVqgWQ3mL6EX00oSp0WeB6"
     merchantIdentifier = "merchant.com.{{E-LIBRARY}}"
     urlScheme = "your-url-scheme"
  >

  <KeyboardAvoidingView
      style={{ height: Platform.OS ==='ios' ? Dimensions.get('window').height * 1 : Dimensions.get('window').height * 1}}
      behavior={(Platform.OS === 'ios') ? 'position' : "position"}
      enabled
      keyboardVerticalOffset={Platform.select({ ios: -50, android: -50 })}

  >
  <View style = {styles.container}>

    {/* Header */}

      {/* Container */}
      <View style={styles.container}>
        <View style = {styles.viewContainerForInfos}>
          <Text style = {styles.bookText}>{bookItem.title}</Text>
          <View style = {styles.imageView}>
            <Image
              style = {{width:'30%',height:'60%',borderRadius:22,position:'relative',resizeMode:'contain'}}
              source = {{uri :'data:image/png;base64,' + Buffer.from(bookImage.data,'hex').toString('base64')}}
            />
            <AntDesign name="checkcircleo" size={24} color="white" style = {{}} />
          </View>
        </View>

        <View style = {styles.viewForCardinfo}>
          <Text style = {styles.creditText}>Credit Card Informations</Text>
          <FontAwesome5 name="id-card-alt" size={30} color="black" />
        </View>

        <View style = {{alignItems:'center',width:'100%',height:'100%'}}>

          {/* Card component from Stripe */}
          <CardField
            postalCodeEnabled={true}
            placeholder={{
              number: '4242 4242 4242 4242',
            }}
            cardStyle={{
              backgroundColor: '#FFFFFF',
              textColor: '#000000',
              borderWidth:2,
              borderRadius:15
            }}
            style={{
              width: '80%',
              height: '8%',
              marginVertical: '15%',
            }}
            onCardChange={(cardDetails) => {
              setCard(cardDetails);
            }}
          />

        {/* Pressable in order for the client to pay */}
        <Pressable style = {styles.pressable} onPress = {() => {pay()}}>
            <Text style = {styles.pressableText}>Buy</Text>
        </Pressable>

      </View>

      </View>

  </View>

  </KeyboardAvoidingView>

  </StripeProvider>

  )

}

Header

//React imports
import React, { useState } from 'react';
import { StyleSheet, Text, View, Pressable, Modal, Platform} from 'react-native';
import { useNavigation } from '@react-navigation/native';
//Icon Imports
import { SimpleLineIcons } from '@expo/vector-icons';
//Icons inside header modal
import { AntDesign } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';

export default function Header() {

  //Use of navigation Hook
  const navigation = useNavigation();

  //Modal Constructor
  const [modalVisible,setModalVisible] = useState(false);

    return (

    <View style = {styles.Container}>

      {/* Modal*/}
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>

        <View style = {styles.modalStyle}>

          {/* Pressable and Text for each functionality  */}
          <Pressable  style = {styles.pressable} onPress = { () => navigation.navigate('Home')}>
            <AntDesign name="home" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Home</Text>
          </Pressable>

          <Pressable  style = {styles.pressable} onPress = { () => navigation.navigate('MyBooks')}>
          <Feather name="book" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>My Collection</Text>
          </Pressable>

          <Pressable  style = {styles.pressable} onPress = { () => navigation.navigate('Profile')}>
            <AntDesign name="profile" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Profile</Text>
          </Pressable>

          <Pressable style = {styles.pressable} onPress = { () => navigation.navigate('Settings')}>
            <Feather name="settings" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Settings</Text>
          </Pressable>

          <Pressable style = {styles.pressable} onPress = { () => navigation.navigate('LogInPage')}>
            <AntDesign name="logout" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Log Out</Text>
          </Pressable>

          <Pressable onPress={ () => {setModalVisible(!modalVisible)}} style = {styles.pressable}>
            <AntDesign name="closecircleo" size={24} color="black" style = {{marginRight:'2%',marginLeft:'2%'}}/>
            <Text style = {styles. textInsideModalPressables}>Close modal</Text>
          </Pressable>

        </View>

      </Modal>

      {/* Pressable Mechanism in order to open the Modal */}
      <Pressable onPress={ () => {setModalVisible(!modalVisible)}} style = {styles.pressableMenu}>
        <SimpleLineIcons style = {styles.iconMenu} name="menu" size={24} color="white" />
        <Text style = {styles.menuText}>Menu</Text>
      </Pressable>

      <View style ={{width:'50%',alignItems:'center',justifyContent:'center'}}>
        <Text style = {styles.nameText}> E-Library</Text>
      </View>

    </View>
  );}


问:
how to authenticate flutter app from an on premise active directory?
I have a requirement to authenticate my flutter app from the on premise active directory. I tried the oauth2_client package for flutter (https://pub.dev/packages/oauth2_client), registered a dummy application on my personal account and authentication worked. The problem is that this package works only for azure AD, because we need to mention the tenant id and client which is not accessible to me on the on premise AD. I am very new with microsoft services, if someone could please reply with some pointers that would be life saving for me.</p>


问:
Problem in client side of Signal R in Internet Explorer and javascript
I have a POS device which I send price via Signal R and Java Script code, and everything works fine, POS device (Pax S800) turns on and shows price.

Sending price code

```<code>        var serverMessage = '';
        $.connection.hub.url = "http://localhost:8080/signalr";
        var console = $.connection.SSP1126HUB;
        var ip = '';
        console.client.GetSystemResponse = function (message) {
            serverMessage = '';
            serverMessage = message;
        }
        $.connection.hub.start().done(
        function initialize() {
            console.server.Initial(1, ip, 'COM4', 1, 0, '0');
            var delayInMilliseconds = 1000; //1 second
            setTimeout(function () {
                //your code to be executed after 1 second
                if (serverMessage == '0') {
                    console.server.SendAmount1Step(TotalAmount, Amountiban, ' ', ' ', ' ', ' ');
                }
                else
                    alert("error");
            }, delayInMilliseconds);

        });

</code>```

For notice, I added jQuery and Signal R codes as scripts to my page.

Scripts

```<code>    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/jquery-1.12.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="http://localhost:8080/signalr/hubs"></script>

</code>```

Then when I swipe my card (Successfully paying or resigning from paying) transaction's information won't be sanded from POS device.
Here is the code that never is being called:

Receiving transaction's information (not working in IE but working in Google Chrome )

```<code>          console.client.GetTransactionResponse = function (TerminalId, ResponseCode, SerialId, RRN, ResponseDescription, TxnDate, CardNumberMask)
          {

               alert("received");

          }

</code>```

So, you may think that scripts are not working fine, but in Google Chrome transaction's information is being received and because my application uses Silverlight, I cannot use Google Chrome.

My own solutions which didn't work

Changing Emulation in developer tools of IE and set different document modes

Set Low Security in IE

Disable protected mode

Disable enhanced protected mode

I kept developer tools open

I think there's something wrong in web socket connection (client part) so client to server connection is working but server to client (IE as client) is not working. But I don't know how I can solve this problem.

Would be appreciated for giving me possible solutions. Thank you.

Body:
I have a POS device which I send price via Signal R and Java Script code, and everything works fine, POS device (Pax S800) turns on and shows price.

Sending price code

        var serverMessage = '';
        $.connection.hub.url = "http://localhost:8080/signalr";
        var console = $.connection.SSP1126HUB;
        var ip = '';
        console.client.GetSystemResponse = function (message) {
            serverMessage = '';
            serverMessage = message;
        }
        $.connection.hub.start().done(
        function initialize() {
            console.server.Initial(1, ip, 'COM4', 1, 0, '0');
            var delayInMilliseconds = 1000; //1 second
            setTimeout(function () {
                //your code to be executed after 1 second
                if (serverMessage == '0') {
                    console.server.SendAmount1Step(TotalAmount, Amountiban, ' ', ' ', ' ', ' ');
                }
                else
                    alert("error");
            }, delayInMilliseconds);

        });

For notice, I added jQuery and Signal R codes as scripts to my page.

Scripts

Then when I swipe my card (Successfully paying or resigning from paying) transaction's information won't be sanded from POS device.
Here is the code that never is being called:

Receiving transaction's information (not working in IE but working in Google Chrome )

          console.client.GetTransactionResponse = function (TerminalId, ResponseCode, SerialId, RRN, ResponseDescription, TxnDate, CardNumberMask)
          {

               alert("received");

          }

So, you may think that scripts are not working fine, but in Google Chrome transaction's information is being received and because my application uses Silverlight, I cannot use Google Chrome.

My own solutions which didn't work

Changing Emulation in developer tools of IE and set different document modes

Set Low Security in IE

Disable protected mode

Disable enhanced protected mode

I kept developer tools open

I think there's something wrong in web socket connection (client part) so client to server connection is working but server to client (IE as client) is not working. But I don't know how I can solve this problem.

Would be appreciated for giving me possible solutions. Thank you.


问:
Can't input push value to variable array Javascript
i want to input push value to variable but ended up not get input to the variable.

```<code>const saveFile = async (file, name) => {
  const data = fs.readFileSync(file.filepath);
  const hasil = await sharp(data).webp({ quality: 20 }).toBuffer();
  var urlImg = [];
  cloudinary.uploader
    .upload_stream(
      { resource_type: "image", folder: "floris", public_id: name },
      (err, image) => {
        urlImg.push(image);
        console.log(image.url);
      }
    )
    .end(hasil);
  return urlImg;
};
</code>```

output of that

```<code>[] //output from urlImg
http://res.cloudinary.com/daw1nuqgv/image/upload/v1672047974/floris/6-rc9R4-20221226164611.webp // Output from console.log(image.url)
</code>```

Body:
i want to input push value to variable but ended up not get input to the variable.

const saveFile = async (file, name) => {
  const data = fs.readFileSync(file.filepath);
  const hasil = await sharp(data).webp({ quality: 20 }).toBuffer();
  var urlImg = [];
  cloudinary.uploader
    .upload_stream(
      { resource_type: "image", folder: "floris", public_id: name },
      (err, image) => {
        urlImg.push(image);
        console.log(image.url);
      }
    )
    .end(hasil);
  return urlImg;
};

output of that

[] //output from urlImg
http://res.cloudinary.com/daw1nuqgv/image/upload/v1672047974/floris/6-rc9R4-20221226164611.webp // Output from console.log(image.url)