callbackWithX usage example

[nunsie]

Good day.

Really enjoying your library so far but I am struggling to understand how to make use of callbackWithX.

I need to update another elements content with the value returned from this function.

Example:

  const currentText = 12345.44
  const updateText = (text) => {
     // if not update state then what?
  }
  return (
    <View style={styles.container}>
        <Text>{currentText}</Text>
        <SlideAreaChart
          scrollable
          callbackWithX={updateText}
          animated={false}
          alwaysShowIndicator={false}
          style={{ marginTop: 32 }}
          shouldCancelWhenOutside={false}
          data={data}
          axisWidth={0}
          axisHeight={0}
          paddingBottom={8}
          toolTipProps={{
          }}
        />
    </View>
  );

In the example above, my goal is to update currentText so I can have this displayed in the <Text /> component.

If I should not be making use of state to achieve this, what should I be using instead?

I'm just struggling to find a pattern that works.

[nsotelo]

I'm using something based on this and it's working nicely. The key features are the Memoised chart to avoid re-rendering it when x changes, and the debouncing that only accepts updates every 100ms. Combining both it gives a nice smooth motion, even in debug mode.

import { SlideAreaChart } from '@connectedcars/react-native-slide-charts'
import _ from 'lodash'
import React from 'react'
import { View, Text } from 'react-native'

interface ChartProps {
  updateX: (x: number) => void
}

const Chart = React.memo(({ updateX }: ChartProps) => {
  return (
    <SlideAreaChart
      data={_.range(0, 100).map(x => ({ x, y: x }))}
      yAxisProps={{
        axisLabel: 'Y Units',
        hideMarkers: true,
        numberOfTicks: 2,
        rotateAxisLabel: true,
        verticalLineWidth: 1,
      }}
      callbackWithX={updateX}
      xAxisProps={{
        axisLabel: 'X Units',
      }}
      shouldCancelWhenOutside={false}
      axisWidth={16}
      axisHeight={16}
      paddingBottom={8}
    />
  )
})

export function Component() {
  const [x, setX] = React.useState(0)

  const updateX = React.useCallback((newX: number) => _.debounce(setX, 100)(newX), [])

  return (
    <View>
      <Chart updateX={updateX} />
      <Text>{x}</Text>
    </View>
  )
}

[Spxc]

This still rerender the chart onPress?