React19

demo/App.tsx

@@ -4,8 +4,8 @@ import { StatusBar, Text, TouchableOpacity } from 'react-native'
 import { Chart, HorizontalAxis, VerticalAxis, Line, Area, Tooltip } from 'react-native-responsive-linechart'
 
 const App = () => {
-  const ref = React.useRef()
-  const ref2 = React.useRef()
+  const ref = React.useRef(undefined)
+  const ref2 = React.useRef(undefined)
 
   return (
     <Container>

package.json

@@ -14,20 +14,20 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@react-native/typescript-config": "^0.81.1",
     "@types/jest": "^26.0.15",
     "@types/lodash.clamp": "^4.0.6",
     "@types/lodash.clonedeep": "^4.5.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.maxby": "^4.6.6",
     "@types/lodash.minby": "^4.6.6",
-    "@types/react": "^17.0.0",
-    "@types/react-native": "^0.63.37",
+    "@types/react": "^19.1.1",
     "jest": "^26.6.3",
     "np": "^7.0.0",
-    "react": "^17.0.1",
-    "react-native": "^0.63.3",
-    "react-native-svg": "^12.1.0",
-    "typescript": "^4.1.2"
+    "react": "^19.1.1",
+    "react-native": "^0.79.5",
+    "react-native-svg": "^15.13.0",
+    "typescript": "^5.9.2"
   },
   "files": [
     "lib/**/*"
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@yr/monotone-cubic-spline": "^1.0.3",
-    "deepmerge": "^4.2.2",
+    "deepmerge": "^4.3.1",
     "fast-deep-equal": "^3.1.3",
     "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",

src/Chart.tsx

@@ -14,7 +14,7 @@ import { ChartContextProvider } from './ChartContext'
 import { calculateDataDimensions, calculateViewportDomain } from './Chart.utils'
 import { scalePointToDimensions } from './utils'
 
-type Props = {
+export interface ChartProps extends React.PropsWithChildren {
   /** All styling can be used except for padding. If you need padding, use the explicit `padding` prop below.*/
   style?: ViewStyle
   /** Data to be used by `<Area />` or `<Line />` children. Not required, and can be overridden in Area or Line components. */
@@ -37,9 +37,9 @@ export type ChartHandle = {
   setViewportOrigin: (origin: XYValue) => void
 }
 
-const Chart: React.FC<Props> = React.memo(
-  React.forwardRef<ChartHandle, Props>((props, ref) => {
-    const { style, children, data = [], padding, xDomain, yDomain, viewport, disableGestures, disableTouch } = deepmerge(computeDefaultProps(props), props)
+const Chart: React.FC<ChartProps> = React.memo(
+  React.forwardRef<ChartHandle, ChartProps>(({ children, ...props }, ref) => {
+    const { style, data = [], padding, xDomain, yDomain, viewport, disableGestures, disableTouch } = deepmerge(computeDefaultProps(props), props)
     const { dimensions, onLayout } = useComponentDimensions()
     const dataDimensions = calculateDataDimensions(dimensions, padding)
 
@@ -207,7 +207,7 @@ const Chart: React.FC<Props> = React.memo(
 
 export { Chart }
 
-const computeDefaultProps = (props: Props) => {
+const computeDefaultProps = (props: ChartProps) => {
   const { data = [] } = props
 
   const xDomain = props.xDomain ?? {

src/Line.tsx

@@ -6,6 +6,7 @@ import ChartContext from './ChartContext'
 import { adjustPointsForThickStroke, calculateTooltipIndex } from './Line.utils'
 import { ChartDataPoint, Smoothing, Stroke, Shape } from './types'
 import { scalePointsToDimensions, svgPath } from './utils'
+import type { TooltipProps } from './Tooltip.tsx'
 
 type Props = {
   /** Theme for the line */
@@ -20,7 +21,7 @@ type Props = {
   /** Only works in combination with smoothing='bezier'. Value between 0 and 1. */
   tension?: number
   /** Component to render tooltips. An example component is included: <Tooltip />. */
-  tooltipComponent?: JSX.Element
+  tooltipComponent?: React.ReactElement<TooltipProps>
   /** Callback method that fires when a tooltip is displayed for a data point. */
   onTooltipSelect?: (value: ChartDataPoint, index: number) => void
   /** Callback method that fires when the user stopped touching the chart. */
@@ -39,13 +40,12 @@ export type LineHandle = {
   setTooltipIndex: (index: number | undefined) => void
 }
 
-const Line = React.forwardRef<LineHandle, Props>(function Line(props, ref) {
+const Line = React.forwardRef<LineHandle, Props>(function Line({tooltipComponent, ...props}, ref) {
   const { data: contextData, dimensions, viewportDomain, viewportOrigin, lastTouch } = React.useContext(ChartContext)
   const [tooltipIndex, setTooltipIndex] = React.useState<number | undefined>(props.initialTooltipIndex)
 
   const {
     theme: { stroke, scatter },
-    tooltipComponent,
     data = contextData,
     tension,
     smoothing,
@@ -78,7 +78,7 @@ const Line = React.forwardRef<LineHandle, Props>(function Line(props, ref) {
     const scaledPoints = scalePointsToDimensions(data, viewportDomain, dimensions)
     const newIndex = calculateTooltipIndex(scaledPoints, lastTouch?.position)
 
-    let tooltipTimer: NodeJS.Timeout
+    let tooltipTimer: number
 
     if (lastTouch?.type === 'panEnd') {
       if (hideTooltipOnDragEnd && Math.abs(lastTouch?.translation?.x) > 5) {

src/Tooltip.tsx

@@ -4,7 +4,7 @@ import { Text, Rect } from 'react-native-svg'
 import ChartContext from './ChartContext'
 import { ChartDataPoint, Label, XYValue, Shape } from './types'
 
-type Props = {
+export type TooltipProps = {
   theme?: {
     label?: Label
     shape?: Shape
@@ -14,7 +14,7 @@ type Props = {
   position?: XYValue
 }
 
-const Tooltip: React.FC<Props> = (props) => {
+const Tooltip: React.FC<TooltipProps> = (props) => {
   const { dimensions } = React.useContext(ChartContext)
 
   const {

src/index.ts

@@ -1,4 +1,4 @@
-export { Chart } from './Chart'
+export { Chart, type ChartProps } from './Chart'
 export { HorizontalAxis } from './HorizontalAxis'
 export { VerticalAxis } from './VerticalAxis'
 export { Line } from './Line'

tsconfig.json

@@ -1,15 +1,12 @@
 {
+  "extends": "@react-native/typescript-config",
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
+    "noEmit": false,
     "declaration": true,
     "outDir": "./lib",
     "jsx": "react",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
     "typeRoots": ["node_modules/@types"],
-    "skipLibCheck": true
+    "allowImportingTsExtensions": false
   },
   "include": ["src"],
   "exclude": ["node_modules", "**/__tests__/*"]