[HOLD for payment 2022-07-27] [$250] Console error: Invalid prop inputStyle

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Refresh the site
2. Press CMD + Shift + K to open the New Group Page.

Expected Result:

No console error

Actual Result:

Console error occurs:

react_devtools_backend.js:4026 Warning: Failed prop type: Invalid prop `inputStyle[2]` of type `boolean` supplied to `BaseTextInput`, expected `object`.
    at BaseTextInput (webpack-internal:///./src/components/TextInput/BaseTextInput.js:86:81)
    at TextInput (webpack-internal:///./src/components/TextInput/index.js:46:81)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at ArrowKeyFocusManager (webpack-internal:///./src/components/ArrowKeyFocusManager.js:52:81)
    at OptionsSelector (webpack-internal:///./src/components/OptionsSelector.js:208:81)
    at withOnyx (webpack-internal:///./node_modules/react-native-onyx/dist/web.development.js:1992:73)
    at withLocalize(Component)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at KeyboardAvoidingView (webpack-internal:///./src/components/KeyboardAvoidingView/index.js:16:16)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at ScreenWrapper (webpack-internal:///./src/components/ScreenWrapper.js:107:81)
    at withOnyx (webpack-internal:///./node_modules/react-native-onyx/dist/web.development.js:1992:73)
    at WrappedComponent (webpack-internal:///./node_modules/@react-navigation/compat/lib/module/withNavigation.js:12:5)
    at NewChatPage (webpack-internal:///./src/pages/NewChatPage.js:113:81)
    at withOnyx (webpack-internal:///./node_modules/react-native-onyx/dist/web.development.js:1992:73)
    at WithWindowDimensions (webpack-internal:///./src/components/withWindowDimensions.js:72:83)
    at withLocalize(Component)
    at NewGroupPage
    at StaticContainer (webpack-internal:///./node_modules/@react-navigation/core/lib/module/StaticContainer.js:10:16)
    at EnsureSingleNavigator (webpack-internal:///./node_modules/@react-navigation/core/lib/module/EnsureSingleNavigator.js:15:5)
    at SceneView (webpack-internal:///./node_modules/@react-navigation/core/lib/module/SceneView.js:21:5)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at CardSheet (webpack-internal:///./node_modules/@react-navigation/stack/lib/module/views/Stack/CardSheet.js:14:3)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at AnimatedComponent (webpack-internal:///./node_modules/react-native-web/dist/vendor/react-native/Animated/createAnimatedComponent.js:135:37)
    at AnimatedComponentWrapper
    at Dummy (webpack-internal:///./node_modules/@react-navigation/stack/lib/module/views/GestureHandler.js:12:3)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at AnimatedComponent (webpack-internal:///./node_modules/react-native-web/dist/vendor/react-native/Animated/createAnimatedComponent.js:135:37)
    at AnimatedComponentWrapper
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at Card (webpack-internal:///./node_modules/@react-navigation/stack/lib/module/views/Stack/Card.js:54:5)
    at CardContainer (webpack-internal:///./node_modules/@react-navigation/stack/lib/module/views/Stack/CardContainer.js:20:3)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at NativeScreen (webpack-internal:///./node_modules/react-native-screens/lib/module/index.js:54:1)
    at AnimatedComponent (webpack-internal:///./node_modules/react-native-web/dist/vendor/react-native/Animated/createAnimatedComponent.js:135:37)
    at AnimatedComponentWrapper
    at MaybeScreen (webpack-internal:///./node_modules/@react-navigation/stack/lib/module/views/Screens.js:31:3)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at MaybeScreenContainer (webpack-internal:///./node_modules/@react-navigation/stack/lib/module/views/Screens.js:19:3)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at Background (webpack-internal:///./node_modules/@react-navigation/elements/lib/module/Background.js:13:3)
    at CardStack (webpack-internal:///./node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js:199:5)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:90:25)
    at SafeAreaProviderCompat (webpack-internal:///./node_modules/@react-navigation/elements/lib/module/SafeAreaProviderCompat.js:32:3)
    at div
    at eval (webpack-internal:/

Workaround:

n/a – no workaround needed

Platform:

Where is this issue occurring?

• Web (only verified on web, may occur elsewhere)

Reported by: @sobitneupane
Version Number: 1.1.82-4
Reproducible in staging?: n/a
Reproducible in production?: n/a

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

Proposal

1. This line is the culprit

   App/src/components/TextInput/index.js

   Line 41 in 13f5769

   isLabeledMultiline && styles.textInputMultiline,

   .

Need to convert the boolean conditional to ternary and use {} for the false part.

isLabeledMultiline ? styles.textInputMultiline: {},

I was going to report the prop-types warning issues on slack. I think I can just solve all of that I found in a single PR.

[sobitneupane]

I had reported this issue here : https://expensify.slack.com/archives/C01GTK53T8Q/p1649048261994809

[roryabraham]

I had reported this issue here : expensify.slack.com/archives/C01GTK53T8Q/p1649048261994809

Fair's fair – you beat me to it 😄

@sobitneupane Added you as the issue reporter so you'll get the reporting bonus for this 🤑

[roryabraham]

@parasharrajat I didn't verify but I'll take your word for it :D

[roryabraham]

@JmillsExpensify I assigned this to @parasharrajat as the contributor, not the C+. I can just review the PR myself – no need for a C+ on this one since it will be easy to verify.

[JmillsExpensify]

Got it, thanks!