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

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](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-browser/workbench/workbench.html). 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]}`,
},
},

Start with node_modules/native-base/src/theme/components/input.ts and inspect the outline, underlined, and rounded style variants, especially the focus styles. Reproduce the issue by focusing a standard Input on Android, then verify that outlineWidth uses numeric values and the app no longer crashes when the Input receives focus.

Written by the indexing model from the issue text.