Crash on Android: java.lang.String cannot be cast to java.lang.Double when focusing an Input with outlineWidth

[sevalenciaca]

Bug description
When focusing on a Native-Base Input component on Android, the application crashes with the error java.lang.String cannot be cast to java.lang.Double. This issue is caused by the outlineWidth property being set as a string ('0') instead of a number (0) in the component's default theme.

To Reproduce
Use a standard Input component from native-base in a React Native application.
Run the application on an Android device or emulator.
Tap on the Input to give it focus.
The application will crash.

Expected behavior
The application should not crash when the Input component is focused. The outlineWidth property should be handled correctly as a number.

Platform
Native-Base version: 3.4.28
React Native version: 0.79.5
OS: Android

Additional context
The root cause is in the file input.ts. Several style variants (outline, underlined, rounded) define outlineWidth: '0'. Changing these values to outlineWidth: 0 resolves the crash.

A temporary workaround can be implemented using patch-package to apply this change automatically.

patch -p1
--- a/node_modules/native-base/src/theme/components/input.ts
+++ b/node_modules/native-base/src/theme/components/input.ts
@@ -17,7 +17,7 @@
},
},
_web: {

•  outlineWidth: '0',
  

•  outlineWidth: 0,
   overflow: 'auto',
   lineHeight: 'lg', // Todo: Move to _web inside size so that sm and xs don't have this much height
   style: { outline: 'none' },
  

@@ -46,7 +46,7 @@
_hover: { borderColor: 'error.600' },
_stack: {
style: {

•      outlineWidth: '0',
  

•      outlineWidth: 0,
       boxShadow: `0 0 0 1px ${error[600]}`,
     },
   },
  

@@ -58,7 +58,7 @@
_hover: { borderColor: 'error.600' },
_stack: {
style: {

•        outlineWidth: '0',
  

•        outlineWidth: 0,
         boxShadow: `0 0 0 1px ${error[600]}`,
       },
     },
  

@@ -75,7 +75,7 @@
},
_stack: {
style: {

•      outlineWidth: '0',
  

•      outlineWidth: 0,
       boxShadow: `0 0 0 1px ${primary[600]}`,
     },
   },
  

@@ -91,7 +91,7 @@
_hover: { borderColor: 'primary.500' },
_stack: {
style: {

•        outlineWidth: '0',
  

•        outlineWidth: 0,
         boxShadow: `0 0 0 1px ${primary[500]}`,
       },
     },
  

@@ -100,7 +100,7 @@
borderColor: 'error.500',
_stack: {
style: {

•        outlineWidth: '0',
  

•        outlineWidth: 0,
         boxShadow: `0 0 0 1px ${error[500]}`,
       },
     },
  

@@ -182,14 +182,14 @@
_invalid: {
_stack: {
style: {

•      outlineWidth: 0,
  

•      outlineWidth: '0',
     },
   },
  

  },
  _stack: {
  _focus: {
  style: {

•      outlineWidth: '0',
  

•      outlineWidth: 0,
     },
   },
  

  },
  @@ -204,7 +204,7 @@
  _focus: {
  _stack: {
  style: {

•      outlineWidth: '0',
  

•      outlineWidth: 0,
       boxShadow: `0 1px 0 0 ${primary[600]}`,
     },
   },
  

@@ -221,7 +221,7 @@
_focus: {
_stack: {
style: {

•        outlineWidth: '0',
  

•        outlineWidth: 0,
         boxShadow: `0 1px 0 0 ${primary[500]}`,
       },
     },
  

[mcanikhilprajapati]

any update on this?

[nvacheishvili]

see #5824