GeekyAnts
[Expo SDK 52] - Input not working on iOS
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.
https://github.com/user-attachments/assets/374bd97d-48c5-44fd-bef1-abeb4ad4dd9d
NativeBase Version
^3.4.28
Platform
- [ ] Android
- [ ] CRA
- [ ] Expo
- [X] 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
}
Same issue here. Upgrading react-native via expo 52 upgrade breaks the native-base input fields.
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 :/
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.
Making everybody aware of this thread too: https://github.com/facebook/react-native/issues/41801
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
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',
},
},
});
@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.
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
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
is there a deadline or is anyone already working on this fix? The above solutions haven't worked for me yet...
is there a deadline or is anyone already working on this fix? The above solutions haven't worked for me yet...
_stack={{ style: {} }} - worked for me
is there a deadline or is anyone already working on this fix? The above solutions haven't worked for me yet...
_stack={{ style: {} }} - worked for me
I've given up on using NativeBase's Input and switched to React Native's built-in Input.
Somehow a _stack boxShadow defined on a _focus event style causes the issue that is within the base theme of Input component. Removing the applied boxShadow unblocks the input.
Thank you everyone for sharing workaround.
For people dealing with this on a large codebase, you can add _stack: { style: {} } to the defaultProps for Input in your theme setup to automatically pass this prop without needing to create a wrapper component and/or editing every file where you use a text input from native-base.
@lanceturbes answer worked for me.
Custom component theme documentation: https://docs.nativebase.io/customizing-components
import { extendTheme, NativeBaseProvider } from 'native-base'
const theme = extendTheme({
components: {
Input: {
defaultProps: {
_stack: { style: {} }
},
},
},
});
<NativeBaseProvider theme={theme}>
</NativeBaseProvider>
