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. How can I make ZEBRA TC520K device can show data.
Will the zebra device show the text when you amend the handleClearButtonPress function like this.
It might be that the text were not shown due to different screen ratio