[Expo SDK 52] - Input not working on iOS

[ThiagoMunich]

Description

Input does not work on iOS

CodeSandbox/Snack link

https://github.com/ThiagoMunich/Input

Steps to reproduce

I'm working with NativeBase on a current project and I noticed that Input component it's not working on iOS (even on real device).

I created a new project from scratch to test, which is the one on the minimal example, and it didn't work as well. See the video below.

inputVideo.mov

NativeBase Version

^3.4.28

Platform

• Android
• CRA
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

I'm using the new Expo SDK 52.

package.json

{
  "name": "input",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.6",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.5",
    "expo-splash-screen": "~0.29.9",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.2",
    "expo-web-browser": "~14.0.1",
    "native-base": "^3.4.28",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.1",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "^4.0.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "react-native-svg": "15.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.1",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

[thomaslund]

Same issue here. Upgrading react-native via expo 52 upgrade breaks the native-base input fields.

[ThiagoMunich]

Same issue here. Upgrading react-native via expo 52 upgrade breaks the native-base input fields.

Let us know if you manage to find a solution, I'll do the same but so far no results :/

[spenavajr]

Yep. Same here. using Native Base with Expo SDK 52.0.7 & React Native 0.76.2. Can't focus on Input elements, however it works after switching to React Native TextInput

I really hope Native Base is not completely broken after this upgrade.

[spenavajr]

Making everybody aware of this thread too: facebook/react-native#41801

[Camiloadh99]

I have a similar issue, i update expo to version 52.0.7 and now the Input is not working on IOS, when i pulse on it the keyboard hides automatically
https://github.com/user-attachments/assets/3196ab77-dcf1-4c33-8047-f1f137713dd6

[vladislavkovaliov]

Same

[CaioDev1]

I’m experiencing the same issue

[davisilvarafacho]

I'm having the same issue

[HikariCyou]

same error

[HikariCyou]

same error

[skendaj]

same error

[matheusbin]

Passing the "isInvalid" property resolved the issue, but since the input remained in an invalid state, its borders turned red.

<Input isInvalid />

I believe this is not the best solution, but to quickly fix this bug, I had to edit the Native Base theme and override the 'error' color with the desired one.

const theme = extendTheme({
  colors: {
    error: {
      50: '#5F2568',
      100: '#5F2568',
      200: '#5F2568',
      300: '#5F2568',
      400: '#5F2568',
      500: '#5F2568',
      600: '#5F2568',
      700: '#5F2568',
      800: '#5F2568',
      900: '#5F2568',
    },
  },
});

[spenavajr]

@matheusbin have you dug into the native base code to see what IsInvalid does to make the component work again? maybe there's a patch we could make on the inputs to mimic it.

I have had zero time with work lately to dig into this, but I will look when I can.

[aaronleo28]

it's due some of the styling added to the wrapper Stack component

you can override this with the _stack prop, eg <Input _stack={{ style: {} }} />

long term it's probably best to use a different UI component lib

[aaronleo28]

Input.tsx

import { IInputProps, Input as NBInput } from 'native-base';
import React, { forwardRef } from 'react';

export const Input = forwardRef<typeof NBInput, IInputProps>((props, ref) => (
  <NBInput _stack={{ style: {} }} ref={ref ?? undefined} {...props} />
));

I made this wrapper component for convenience

[shankarRxo]

_stack={{ style: {} }}

This works for me, Thanks