NativeBase: Picker Issue on iOS Maximum update depth exceeded

I have gone through these following points

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

package.json

# node v10.16.0 npm v6.9.0
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.3",
    "axios": "^0.18.0",
    "expo": "^33.0.0",
    "expo-constants": "^5.0.1",
    "expo-facebook": "~5.0.1",
    "expo-font": "~5.0.1",
    "expo-image-picker": "~5.0.2",
    "expo-location": "~5.0.1",
    "expo-permissions": "~5.0.1",
    "expo-web-browser": "^5.0.3",
    "firebase": "^5.11.0",
    "firebase-admin": "^7.0.0",
    "moment": "^2.24.0",
    "native-base": "^2.13.0",
    "prettier": "^1.18.2",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-axios": "^0.17.1",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-modal-overlay": "^1.3.1",
    "react-navigation": "^3.3.2",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-form": "^8.1.0",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.2",
    "redux-saga-firebase": "^0.15.0",
    "relative-date": "^1.1.3",
    "sentry-expo": "~1.13.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "remote-redux-devtools": "^0.5.16"
  },
  "private": true
}

Expected behaviour

Picker does not throw a Maximum update depth executed error.

Actual behaviour

Picker throws Maximum update depth executed error

Steps to reproduce

Removing this code will not give the error, but I need to use a picker.

                                    <Item picker>
			              <Picker
			                mode="dropdown"
			                iosIcon={<Icon name="arrow-down" />}
			                style={{ width: undefined }}
			                placeholder="country"
			                placeholderStyle={{ color: "#bfc6ea" }}
			                placeholderIconColor="#007aff"
			                selectedValue={this.state.country}
			                onValueChange={this.onCountryChange.bind(this)}
			              >
			                <Picker.Item label="Canada" value="Canada" />
			                <Picker.Item label="United States" value="United States" />
			              </Picker>
			            </Item>

Simulator Screen Shot - iPhone Xʀ - 2019-07-24 at 15 41 43

Is the bug present in both iOS and Android or in any one of them?

iOS

Any other additional info which would help us debug the issue quicker.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 3
  • Comments: 16 (4 by maintainers)

Most upvoted comments

setState in componentDidUpdate causing issue there should have been a proper code review before merging any PR I am also facing issue on TextInput while onChangeText fix it locally by removing setState in the node modules files but this is not a proper solution I have seen this issue also happening in other controlled components