I was successfully able to send data from Java to React-Native using a callback that invokes an array. I can display said data in the console, however I want to be able to display it inside the react-native component itself.
This is the Java method that is supposed to get all the IP addresses connected to my wifi (Thanks to JavaPF from javaprogrammingforums.com for the code)
@ReactMethod
public void displayConnectedDevices(Callback errorCallback, Callback successCallback) throws IOException {
WritableArray array = new WritableNativeArray();
try{
InetAddress localhost= InetAddress.getLocalHost();
byte[] ip = localhost.getAddress();
for(int i = 1; i <= 254; i++)
{
ip[3] = (byte)i;
InetAddress address = InetAddress.getByAddress(ip);
if (address.isReachable(1000))
{
System.out.println(address + "can be pinged");
array.pushString(address.toString());
}
else if(!address.getHostAddress().equals(address.getHostName()))
{
System.out.println(address + "this machine is known in a DNS lookup");
}
else
{
System.out.println(address + "host name could not be resolved");
}
}//end of for loop
successCallback.invoke(array);
} catch (IllegalViewOperationException e) {
errorCallback.invoke((e.getMessage()));
}
}
This is the React-Native method where I want to display the array:
//Importing native java module
import {NativeModules} from 'react-native';
var ConnectedDevicesList = NativeModules.ConnectedDevices;
let LanScanner = () => {
const [arr, setArray] = useState([])
displayActiveConnections = async () => {
ConnectedDevicesList.displayConnectedDevices( (array) => { setArray(array)}, (msg) => {console.log(msg)} );
}
return (
<ScrollView>
<View>
<TouchableOpacity onPress={ this.displayActiveConnections }>
arr.map((item,index)=><Text key= {"conlist"}>{item}</Text>)
</TouchableOpacity>
</View>
</ScrollView>
);
};
export default LanScanner
All the guides I found point to rendering this data on the console, but not in the actual component. What should I do if I want to display this data?
Thank you in advance.
You can use useState. useState is a react hook and on getting the value from the api set the value there. Looks like the api response is an array so you can use map and display the Text
export const SomeFunction{
const [arr, setArray] = useState([])
displayActiveConnections = async () => {
ConnectedDevicesList.displayConnectedDevices( (array) => {
setArray(array)
}, (msg) => {console.log(msg)} );
}
render() {
return (
<ScrollView>
<View>
<TouchableOpacity onPress={ this.displayActiveConnections }>
arr.map((item,index)=><Text key= {someId}>{item}</Text>)
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
}
So I finally got it to work with useState after some trial and error. This however, gives me an error that "each child should have a unique key". I have yet to fix that, but at least now I can see the data in the component (which in this case is a list of IP Addresses). Thanks to brk for his help!
import {NativeModules, View, TouchableOpacity, Text, ScrollView, SafeAreaView} from 'react-native';
import LanScannerStyle from '../Styles/LanScannerStyles';
//Declaring new instance of Java Module
var ConnectedDevices = NativeModules.ConnectedDevices;
export const LanScanner = () => {
const [arr, setArray] = useState([]);
displayConnectionListFromJava = () => {
//Getting the data from native module, and passing it to the arr variable with useState
try{
ConnectedDevices.displayConnectedDevices( (arrayResponse) => {setArray(arrayResponse), console.log(arrayResponse)} );
}
catch(error)
{
console.log(error);
}
//Map the arr variable and render it as text
return(
<View>
{
arr.map((items, index) =>
<View>
<Text>{items}</Text>
</View>)
}
</View>
);
};
return(
<ScrollView>
<View>
{this.displayConnectionListFromJava()}
</View>
</ScrollView>
);
}