Invariant Violation When Using 'dashedBackground' Prop

Abierto
  • ¿Algo no está bien?
#223 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react-native
Área
mobile

Línea de trabajo

Reproduce la aplicación de ejemplo con Expo 3.0.9, la versión 1.3.4 del paquete y la prop dashedBackground mostrada. Comienza en CircularProgress.js:100 y el error de RNSVGPath; después, verifica que la prop ya no produzca valores NaN ni el fallo de la invariante nativa.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

I got error when I try to use dashedBackground prop with the example app

My expo version is 3.0.9 and I am using 1.3.4 version of the package

Component Usage:

        <AnimatedCircularProgress
          size={200}
          width={3}
          backgroundWidth={30}
          fill={fill}
          tintColor="#00e0ff"
          backgroundColor="#3d5875"
          dashedBackground={{ width: 1, gap: 1 }}
        >
          {fill => <Text style={styles.points}>{Math.round((MAX_POINTS * fill) / 100)}</Text>}
        </AnimatedCircularProgress>

Error:

Invariant Violation: [3,"RNSVGPath",11,{"matrix":[1,0,0,1,0,0],"propList":["fill","stroke","strokeWidth","strokeDasharray","strokeLinecap"],"opacity":1,"fill":[0,0],"fillRule":1,"fillOpacity":1,"stroke":[0,4282210421],"strokeOpacity":1,"strokeLinecap":0,"strokeLinejoin":0,"strokeDasharray":[1,"<<NaN>>","<<NaN>>",1],
"strokeWidth":30,"strokeDashoffset":0,"strokeMiterlimit":4,"vectorEffect":0,"d":"M 99.94659292840299 15.000016778326938 A 85 85 0 1 0 100 15"}] is not usable as a native method argument

This error is located at:
    in RNSVGPath (at Path.js:12)
    in Path (at CircularProgress.js:100)
    in RNSVGGroup (at G.js:23)
    in G (at CircularProgress.js:98)
    in RNSVGGroup (at G.js:23)
    in G (at Svg.js:127)
    in RNSVGSvgView (at Svg.js:116)
    in Svg (at CircularProgress.js:97)
    in RCTView (at View.js:45)
    in View (at CircularProgress.js:96)
    in CircularProgress (at createAnimatedComponent.js:151)
    in AnimatedComponent (at AnimatedCircularProgress.js:65)
    in AnimatedCircularProgress (at App.tsx:56)
    in RCTView (at View.js:45)
    in View (at App.tsx:55)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:253:8 in enqueueNativeCall
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:137:8 in fn
- ... 21 more stack frames from framework internals

Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- ... 28 more stack frames from framework internals

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[152,152],[5,5],[[5,"RCTRawText",11,{"text":"0"}]],9]

This error is located at:
    in RCTText (at Text.js:154)
    in TouchableText (at Text.js:278)
    in Text (at App.tsx:65)
    in RCTView (at View.js:45)
    in View (at CircularProgress.js:121)
    in RCTView (at View.js:45)
    in View (at CircularProgress.js:96)
    in CircularProgress (at createAnimatedComponent.js:151)
    in AnimatedComponent (at AnimatedCircularProgress.js:65)
    in AnimatedCircularProgress (at App.tsx:56)
    in RCTView (at View.js:45)
    in View (at App.tsx:55)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:271:39 in enqueueNativeCall
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:137:8 in fn
- ... 21 more stack frames from framework internals

Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- ... 28 more stack frames from framework internals
Lenguaje dominante
JavaScript
Estrellas
2.2k
Forks
418
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de bartgryszko/react-native-circular-progress

Todos los issues de bartgryszko/react-native-circular-progress

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.