-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
callbackWithX usage example #23
Comments
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 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>
)
} |
This still rerender the chart onPress? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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.
The text was updated successfully, but these errors were encountered: