TextInput error "Right operand of 'in' is not an object"

[dmitri-bel]

Current behaviour

Whenever I use TextInput in my code, my app fails with the following error: "Right operand of 'in' is not an object".

Expected behaviour

No crashes when using TextInput.

How to reproduce?

Repo to reproduce: https://github.com/dmitri-bel/bug-rn-paper/ Usage of TextInput is located in /app/index.tsx.

Preview

Error in iOS simulator:

Error in CLI:

 ERROR  TypeError: right operand of 'in' is not an object

This error is located at:
    in CssInteropComponent (created by TextInputFlat)
    in RCTView (created by View)
    in View (created by TextInputFlat)
    in RCTView (created by View)
    in View (created by TextInputFlat)
    in TextInputFlat
    in Unknown (created by Page)
    in RCTView (created by View)
    in View (created by Page)
    in RCTView (created by View)
    in View (created by CSSInterop.View)
    in CssInteropComponent (created by Page)
    in RCTView (created by View)
    in View (created by CSSInterop.View)
    in CssInteropComponent (created by Page)
    in Page
    in Unknown (created by Route(index))
    in Suspense (created by Route(index))
    in Route (created by Route(index))
    in Route(index) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by Layout)
    in ThemeProvider (created by PaperProvider)
    in RCTView (created by View)
    in View (created by Portal.Host)
    in Portal.Host (created by PaperProvider)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by PaperProvider)
    in PaperProvider (created by Layout)
    in Layout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

Your Environment

software	version
ios	16.2
android	any
react-native	0.73.2
react-native-paper	5.12.3
node	18.15.0
npm or yarn	9.5.0
expo sdk	50.0.6

[dmitri-bel]

Similar issue to https://github.com/callstack/react-native-paper/issues/4294.

[legend-oe]

Have the same. It's bug will show if you use TextField and NativeWind (Tailwind CSS). I found and fixed 2 bugs.

1. Bug && for Platform.OS === 'web' open: node_modules/react-native-ui-lib/src/components/textField/Input.js change string Constants.isWeb

Line 70:

  return <TextInput
      fsTagName={recorderTag}
      style={[
        styles.input,
        !!inputColor && { color: inputColor },
        style,
        Constants.isWeb ? styles.webStyle : undefined
      ]}
      {...props}

2. Also && and problem with hasValue. open: node_modules/react-native-ui-lib/src/components/textField/index.js

Line 124: OLD:

  const hasValue = fieldState.value !== undefined;
  const inputStyle = useMemo(() => {
    return [typographyStyle, colorStyle, others.style, hasValue && centered && styles.centeredInput];
  }, [typographyStyle, colorStyle, others.style, centered, hasValue]);

NEW:

  const hasValue = fieldState.value !== undefined;
  const hasCenteredValue = fieldState.value ? (centered && styles.centeredInput) : undefined
  const inputStyle = useMemo(() => {
    return [typographyStyle, colorStyle, others.style, hasCenteredValue];
  }, [typographyStyle, colorStyle, others.style, centered, hasValue]);