I'm new to drawing a graph with react-native. The problem is, I can read the data sent with Ble as a value on the screen, but I'm having trouble making real-time graphs. There must be a mistake somewhere. I tried many different methods.
The code below is my screen code.
const disconnectDevice = useCallback(async () => { navigation.goBack(); const isDeviceConnected = await device.isConnected(); if (isDeviceConnected) { await device.cancelConnection(); navigation.navigate('Home'); } }, [device, navigation]); useEffect(() => { const getDeviceInformations = async () => { // connect to the device const connectedDevice = await device.connect(); setIsConnected(true); // discover all device services and characteristics const allServicesAndCharacteristics = await connectedDevice.discoverAllServicesAndCharacteristics(); // get the services only const discoveredServices = await allServicesAndCharacteristics.services(); setServices(discoveredServices); PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, { title: 'Permission Localisation Bluetooth', message: 'Requirement for Bluetooth', buttonNeutral: 'Later', buttonNegative: 'Cancel', buttonPositive: 'OK', } ); }; getDeviceInformations(); device.onDisconnected(() => { navigation.navigate('Home'); }); // give a callback to the useEffect to disconnect the device when we will leave the device screen return () => { disconnectDevice(); navigation.navigate('Home'); }; }, [device, disconnectDevice, navigation]); return (<ScrollView contentContainerStyle={styles.container}><TouchableOpacity style={styles.button} onPress={disconnectDevice}><Text style={{fontFamily:"SairaExtraCondensed-Thin",textAlign:"center",fontSize:15,color:"white"}}>Antrenmanı Sonlandır</Text></TouchableOpacity><View><View style={styles.header} ><Text>{`Name : ${device.name}`}</Text><Text>{`Is connected : ${isConnected}`}</Text></View><View><> {services && services.map((service) => { return(<><ServiceCard service={service} /><LineChart style={{ height: 200 }} gridMin={0} gridMax={300} data={[service]} svg={{ stroke: 'rgb(134, 65, 244)' }} contentInset={{ top: 20, bottom: 20 }}></LineChart></> ) })}</></View></View><View></View></ScrollView> );};The service component, where the values were decoded last, is as follows;
type ServiceCardProps = { service: Service;};const ServiceCard = ({ service }: ServiceCardProps) => { const [descriptors, setDescriptors] = useState<Descriptor[]>([]); const [characteristics, setCharacteristics] = useState<Characteristic[]>([]); const [areCharacteristicsVisible, setAreCharacteristicsVisible] = useState( false, ); useEffect(() => { const getCharacteristics = async () => { const newCharacteristics = await service.characteristics(); setCharacteristics(newCharacteristics); newCharacteristics.forEach(async (characteristic) => { const newDescriptors = await characteristic.descriptors(); setDescriptors((prev) => [...new Set([...prev, ...newDescriptors])]); }); }; getCharacteristics(); }, [service]); return (<View style={styles.container}><TouchableOpacity onPress={() => { setAreCharacteristicsVisible((prev) => !prev); }}><Text>{`UUID : ${service.uuid}`}</Text></TouchableOpacity> {areCharacteristicsVisible && characteristics && characteristics.map((char) => (<CharacteristicCard key={char.id} char={char} /> ))} {descriptors && descriptors.map((descriptor) => (<DescriptorCard key={descriptor.id} descriptor={descriptor} /> ))}</View> );};Data is being decoded with Ble. Then it is displayed as a value on the screen via the latest service map. I want to see the graph on the screen in real time like in this code. What error could be below?
Nothing appears on the screen. I only see values.
Thanks