Question 281236 in React native Question posted in
The official React Native documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    Will the zebra device show the text when you amend the handleClearButtonPress function like this.

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

        textPartNoRef.current.focus();
      };

    It might be that the text were not shown due to different screen ratio

    Login or Signup to reply.
  2. 0

    Using React Native in conjunction with Zebra can present some challenges. I’m not entirely sure of your specific requirements, but I’d like to provide you with some potentially useful resources. Here are a couple of links for your reference:

    Zebra’s GitHub repositories
    https://github.com/orgs/ZebraDevs/repositories?q=link-os&type=all&language=&sort=

    Zebra’s official technical documentation
    https://techdocs.zebra.com/link-os/2-14/

    I hope you find these resources helpful. Cheers!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search