1

I want to plot my data in React-Native. I am receiving data from BLE. But I can't see the real time graph on the screen. What could be the reason? My brain stopped, so I couldn't figure out what the problem was.

Note : My data is,

hr

This is BLE characteristic value.

This is my component.js,


const width = Dimensions.get('window').width;
const height = Math.floor((Dimensions.get('window').height - 150) / 3);

let counter = 0;
const slotsPerWidth = 100;
const initialState = {
  flow: hr,
  isLoading: false,
};

class ChartScreen extends Component {
    
  state = {
    chartData: { ...initialState },
  };

  static getDerivedStateFromProps(state) {

        counter++;
        return {
          chartData: {
            flow: [hr],
          
          },
        };
  }
  
 render() {
    const { flow} = this.state.chartData;

     return this.state.isLoading
       ? <ScreenContainer>

            <View style={styles.main}>
            <View>
                <ActivityIndicator></ActivityIndicator>
            </View>   
            <Chart
                key="flow"
                data={flow}
                maxValue={1900}
                minValue={1750}
                slotsPerWidth={slotsPerWidth}
                width={width}
                height={height}
                marginBottom={20}
                lineColor="rgba(95, 92, 1, 1)"
                lineThickness={2}
                chartBackground="#17204d"
                horizontalGridLinesCount={5}
                gridColor="rgba(65, 95, 93, .4)"
                gridThickness={1}
                unit="ml"
                axisTooClose={10}
                labelsColor="rgba(255, 255, 255, 0.8)"
                labelsFontSize={12}
                marginLeft={60}
                labelsMarginLeft={15}
            />
            
            
            </View>
        </ScreenContainer>:
        null
        
    } 
}
    
const styles = StyleSheet.create({
  main: {
    flex: 1,
  },
});


export default ChartScreen;

This is my device screen.tsx,


const DeviceScreen = ({
  route,
  navigation,
}: StackScreenProps<RootStackParamList, 'Device'>) => {
  // get the device object which was given through navigation params
  const { device } = route.params;
 
  const [isConnected, setIsConnected] = useState(false);
  const [services, setServices] = useState<Service[]>([]);
 
  // handle the device disconnection
  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();
    };

    
  }, [device, disconnectDevice, navigation]);
   


  return (
    <ScrollView contentContainerStyle={styles.container}>
      <TouchableOpacity style={styles.button} onPress={disconnectDevice}>
        <Text style={{fontFamily:"SairaExtraCondensedThin",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>
        {services &&
          services.map((service) => <ServiceCard service={service} />)}
      </View>
       <View>

        <ChartScreen chartdata />
       </View>
    </ScrollView>
  );
};

1 Answer 1

0

Well, at least, in component.js the isLoading state is never set to true and in screen.tsx you are non passing any data since <ChartScreen chartdata /> means <ChartScreen chartdata={true} />, so it is a boolean property. Then, in getDerivedStateFromProps you are increasing counter that is not part of the state, so, by itself, it will not trigger a new render. Check also that the value of hr is set in the proper place, looks strange to me to see it not as a part of the state too, or as a property. It needs some investigation. Also, the useEffect dependencies are objects so check this out, but consider to refactor the useEffect part, react useEffect comparing objects

Note

Seems to me that there are some misconceptions about React here cousing most of the issues.

This may not be the actual and full answer but I decided to provide my input as a starting point for further investigation and impovements.

2
  • What change do I need to make here?
    – cans
    Jun 8, 2022 at 14:03
  • All the ones I specified in the answer and, probably, other too, as per my note. There is some misconception here I suppose. Jun 8, 2022 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.