React Native Animated Charts官方示例报错Value is undefined, expected an Object求助

错误原因 #

该Value is undefined, expected an Object报错是@rainbow-me/animated-charts包的已知兼容性问题，错误触发在ChartPath.js第499行的内部逻辑中，核心诱因有两个：

1. 你项目中安装的react-native-reanimated版本和该包依赖的版本不兼容，该包官方示例适配的是react-native-reanimated@2.0.x ~ 2.3.x版本，使用2.10以上版本或者v3版本时，包内部调用的旧版API已被废弃/修改，导致获取不到预期的对象值。
2. 传入ChartPathProvider的data参数缺失必填的originalData字段，部分版本下仅传插值后的points会导致内部计算逻辑入参不全。

解决方案 #

方案1：降级适配依赖版本 #

先卸载当前项目中的react-native-reanimated：

# npm用户执行
npm uninstall react-native-reanimated
# yarn用户执行
yarn remove react-native-reanimated

安装官方兼容的2.3.1版本：

# npm用户执行
npm install react-native-reanimated@2.3.1
# yarn用户执行
yarn add react-native-reanimated@2.3.1

iOS端额外执行pod安装：

cd ios && pod install && cd ..

最后清空缓存重启metro服务：

npx react-native start --reset-cache

方案2：补全传入参数 #

无需降级依赖，直接修改ChartPathProvider的传入data，补充originalData字段为你的原始数据即可：

<ChartPathProvider data={{ 
  points, 
  originalData: data,
  smoothingStrategy: 'bezier' 
}}>
  <ChartPath height={SIZE / 2} stroke="yellow" width={SIZE} />
  <ChartDot style={{ backgroundColor: 'blue' }} />
</ChartPathProvider>

方案3：手动修复源码（适配高版本reanimated） #

如果不想修改依赖版本，可直接修改包源码适配高版本API：
找到node_modules/@rainbow-me/animated-charts/src/ChartPath.js第499行的位置，给用到Value的逻辑提前添加非空判断，将对应的旧版reanimated API替换为你当前版本对应的API写法即可。

内容的提问来源于stack exchange，提问作者Satyam Tripathi