Type 'number[][]' is not assignable to type 'AnimationSegment | AnimationSegment[]'.

[jordanlambrecht]

I'm using react, nextjs, and typescript. My lottie component plays the first 23 frames once, followed by the rest of the frames on a loop. I send an array to the prop 'segments'. Everything renders totally fine, but linting returns this error:

Type 'number[][]' is not assignable to type 'AnimationSegment | AnimationSegment[]'.
  Type 'number[][]' is not assignable to type 'AnimationSegment[]'.
    Type 'number[]' is not assignable to type 'AnimationSegment'.
      Target requires 2 element(s) but source may have fewer.ts(2322)
index.d.ts(18, 7): The expected type comes from property 'segments' which is declared here on type 'IntrinsicAttributes & PropsWithChildren<LottieProps>'

Here's my code:

import React from 'react'
import Lottie from 'react-lottie-player'
import VarHPattern from '../../data/Patterns_Blue_Dark.json'

export default function Pattern() {
  const playFrames = [
    [0, 23],
    [24, 95],
  ]
  return (
    <Lottie
      animationData={VarHPattern}
      loop
      segments={playFrames}
      play
      rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
      style={{ height: '100%' }}
    />
  )
}

Like I said, it's not breaking anything. It is, however, driving me crazy when I go to lint everything prior to production. Any ideas?

[jordanlambrecht]

here's the full warning:

Warning: Failed prop type: Invalid prop `segments` supplied to `<<anonymous>>`.
    at /Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/react-lottie-player/dist/LottiePlayer.js:1121:30
    at Pattern (webpack-internal:///./components/PageHeader/PageHeader_VarH_Yellow.tsx:43:24)
    at div
    at section
    at PageHeader_VariableHeight (webpack-internal:///./components/PageHeader/PageHeader_VarH_Yellow.tsx:42:38)
    at LoadableComponent (/Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/next/dist/shared/lib/loadable.js:81:40)
    at div
    at PageHeader_VarH (webpack-internal:///./components/PageHeader/PageHeader_VarH.tsx:127:28)
    at main
    at About (webpack-internal:///./pages/about/index.tsx:26:18)
    at Layout__HasNav (webpack-internal:///./components/Layout.tsx:23:27)
    at QueryClientProvider (/Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/react-query/lib/react/QueryClientProvider.js:45:21)
    at MyApp (webpack-internal:///./pages/_app.tsx:31:18)
    at InnerApp
    at StyleRegistry (/Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
    at AppContainer (/Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/next/dist/server/render.js:340:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/next/dist/server/render.js:370:57)
    at div
    at Body (/Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/next/dist/server/render.js:638:21)

[mifi]

Im not so experienced with TS (it was contributed by someone else) but if you figure it out, please submit a PR

[chr-ge]

@jordanlambrecht Doing this should remove the error:

const playFrames: [number, number][] = [
  [0, 23],
  [24, 95],
]

[jordanlambrecht]

Yup! That worked. Thank you.