React native – I can't use my react-native application in ZEBRA TC520K device. Please help me

I’m employee that try to make react-native application for my work. It’s finished but I have issue that I can’t use it properly in ZEBRA TC520K device excepts other devices. Here’s my code.

import React, { useEffect, useState, useRef } from 'react';
import { View, Text, SafeAreaView, StyleSheet, TextInput, Button} from "react-native";
import { Col, Row, Grid } from 'react-native-easy-grid';
import axios from 'axios';

const Home = () => {
    const [textPartNo, setTextPartNo] = useState('');
    const [textPartSerial, setTextPartSerial] = useState('');

    const [dataRes, setdataRes] = useState(null);
    const [dataJSON, setdataJSON] = useState(null);
    const [dataShow, setdataShow] = useState(null);

    const [partNo,setPartNo] = useState();
    const [partSeri,setPartSeri] = useState();
    const [zno,setZno] = useState();
    const [goh,setGoh] = useState();
    const [mC,setMC] = useState();
    const [kishName,setKishName] = useState();
    const [kibaName,setKibaName] = useState();
    const [lot,setLot] = useState();
    const [sLot,setSLot] = useState();
    const [kouTei,setKouTei] = useState();
    const [tonYuSu,setTonYuSu] = useState();
    const [placeName,setPlaceName] = useState();
    const [boxName,setBoxName] = useState();
    const [partVol,setPartVol] = useState();
    const [c_Type,setC_Type] = useState();

    const textPartNoRef = useRef(null);
    const textPartSerialRef = useRef(null);

    const handleFindButtonPress = () => {
        if (textPartNo && textPartSerial) {
        const apiUrl = 'http://...myip.../AM/PICS/PartFindInfo/Api/GetPartState';
        const options = {
            params: {
            part_no: textPartNo,
            part_seri: textPartSerial,
            },
        };

        axios
            .get(apiUrl, options)
            .then((response) => {
                setdataRes(response.data);
                setdataShow(null);
            })
            .catch((error) => {
                console.error('Error fetching data:', error);
            });
        }
    };

    const fetchData = () => {
        if (textPartNo && textPartSerial) {
            const apiUrl = 'http://...myip.../AM/PICS/PartFindInfo/Api/GetPartState';
            const options = {
                params: {
                    part_no: textPartNo,
                    part_seri: textPartSerial,
                },
            };

            axios
                .get(apiUrl, options)
                .then((response) => {
                    setdataRes(response.data);
                    setdataShow(null);
                })
                .catch((error) => {
                    console.error('Error fetching data:', error);
                });
        }
    };

    const handleClearButtonPress = () => {
        setTextPartNo('');
        setTextPartSerial('');
        setPartNo('');
        setPartSeri('');
        setZno('');
        setGoh('');
        setMC('');
        setKishName('');
        setKibaName('');
        setLot('');
        setSLot('');
        setKouTei('');
        setTonYuSu('');
        setPlaceName('');
        setBoxName('');
        setPartVol('');
        setC_Type('');
        setdataShow(null);
        setdataRes(null);

        textPartNoRef.current.focus();
      };

      const handlePartNoChange = (text) => {
        setTextPartNo(text);
            if (text.length === 9) {
                textPartSerialRef.current.focus(); // Move cursor to the second input
            }
        };
    

    // useEffect(() => {

    //     const apiUrl = 'http://...myip.../AM/PICS/PartFindInfo/Api/GetPartState';

    //     const options = {
    //         params: {
    //             part_no: '100100611',
    //             part_seri: 'IA3829UE4N1R'
    //         }
    //     };

    //     const apiUrl = 'http://...myip.../AM/PICS/PartFindInfo/Api/GetPartState';

    //     const options = {
    //         params: {
    //           part_no: '',
    //           part_seri: '',
    //           }
    //     }

    //     if (textPartNo && textPartSerial) {
    //         //const apiUrl = 'http://...myip.../AM/PICS/PartFindInfo/Api/GetPartState';
    //         const options = {
    //           params: {
    //             part_no: textPartNo,
    //             part_seri: textPartSerial,
    //             }
    //         }
    //     }

    //     axios.get(apiUrl, options)
    //         .then(response => {
    //             setdataRes(response.data);
    //             //console.log(response.data);
    //         })
    //         .catch(error => {
    //             console.error('Error fetching data:', error);
    //         });
            
    // }, []);

    useEffect(() => {
        if ( dataRes !== null ) {
            setdataJSON(JSON.parse(dataRes))
        }
    }, [dataRes]);

    useEffect(() => {
            //console.log(data2);
        if( dataJSON !== null ) {   
            //console.log("testloop");
            //console.log(data2.length);
            if( dataJSON.length > 0 ) {
                setdataShow(dataJSON[0]);
                //console.log("testloop2");
            }
        }   
    }, [dataJSON]);

    useEffect(() => {
        if ( dataShow !== null ) {
            setPartNo(dataShow.PartNo);
            setPartSeri(dataShow.PartSeri);
            setZno(dataShow.Zno)
            setGoh(dataShow.Goh);
            setMC(dataShow.McName);
            setKishName(dataShow.KISHNAME);
            setKibaName(dataShow.KIBANAME);
            setLot(dataShow.LOT);
            setSLot(dataShow.SLOT);
            setKouTei(dataShow.KOUTEI);
            setTonYuSu(dataShow.TONYUSU);
            setPlaceName(dataShow.PlaceName);
            setBoxName(dataShow.BoxName);
            setPartVol(dataShow.PartVol);
            setC_Type(dataShow.C_TYPE);
            
        }
    }, [dataShow]);

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

    //console.log(data1);
    //console.log(data2);
    //console.log(dataShow);
    //console.log(pn);
    //console.log(ps);
    
    
    return (
        <SafeAreaView>
            {/* <Text style={styles.text}>Test query: P/N: {partNo} P/Serial: {partSeri} </Text> */}
            <Text style={styles.header1}>PartFindInfo - PDA [Search]</Text>
            <Text style={styles.text}>Input Part No. or Part Serial No.</Text>
            <TextInput
                ref={textPartNoRef}
                style={styles.input}
                onChangeText={handlePartNoChange}
                value={textPartNo}
                placeholder="P/N"
                returnKeyType="next"
            />
            <TextInput
                ref={textPartSerialRef}
                style={styles.input}
                onChangeText={text => setTextPartSerial(text)}
                value={textPartSerial}
                placeholder="P/Serial"
                returnKeyType="done"
            />
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 12, marginRight: 12 }}>
                <Button
                    color={'green'}
                    //style={styles.button}
                    title="Find"
                    onPress={handleFindButtonPress}
                />
                <Button
                    color={'gray'}
                    //style={styles.button}
                    title="Clear"
                    onPress={handleClearButtonPress}
                />
            </View>
            <View style={styles.container}>
                <Text style={styles.header2}>Zno: {zno}</Text>
                <Grid>
                    <Col size={15}>
                        <Row style={styles.cell}>
                            <Text>M/C:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>KISH:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>KIBA:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>LOT:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>SLOT:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>MEN:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>QTY:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>Place:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>Box:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>PartVol:</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>C_TYPE:</Text>
                        </Row>
                    </Col>
                    <Col size={60}>
                        <Row style={styles.cell}>
                            <Text style={styles.textbold}>{mC}-{goh}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{kishName}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{kibaName}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{lot}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{sLot}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{kouTei}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{tonYuSu}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{placeName}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{boxName}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{partVol}</Text>
                        </Row>
                        <Row style={styles.cell}>
                            <Text>{c_Type}</Text>
                        </Row>
                    </Col>
                </Grid>
            </View>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    input: {
        height: 40,
        margin: 12,
        borderWidth: 1,
        padding: 10
    },
    text: {
        margin: 12
    },
    textbold: {
        fontWeight: 'bold'
    },
    header1: {
        fontWeight: 'bold',
        fontSize: 25,
        textAlign: 'center',
        color: 'black'
    },
    header2: {
        fontWeight: 'bold',
        fontSize: 20,
        textAlign: 'center',
        color: 'blue'
    },
    container: {
        width: '100%',
        height: 250,
        backgroundColor: '#fff',
        borderWidth: 1,
        marginTop: 12,
        padding: 10
    },
    cell: {
        justifyContent: 'left',
        alignItems: 'center'
    }
})

export default Home;

So it’s find part info application in my company and here’s my picture that show what I have an issue.

My application when run between normal telephone device and ZEBRA TC520K device

By the way, This application using API URL (I change real IP to …myip… for the company’s confidential) to connect data to show at below buttons or at the grid.

If you see in the picture there’s two devices and ZEBRA TC520K device can’t show data like other devices. So please, If you have any solutions to make ZEBRA TC520K device can show data. Feel free to share. Thank you so much.