Search code examples
react-nativestyled-components

React does not recognize the `enterKeyHint` prop on a DOM element

A react-native app implementing Styled Components and Scroll view is working, but gives me this warning:

index.js:1 Warning: React does not recognize the `enterKeyHint` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `enterkeyhint` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in input (created by TextInput)
    in TextInput (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(TextInput))
    in Styled(TextInput) (at Signup.js:96)
    in div (created by View)
    in View (created by ScrollView)
    in div (created by View)
    in View (created by ForwardRef)
    in ForwardRef (created by ScrollView)
    in ScrollView (at Signup.js:95)

This is the component's render:

 return (
        <BasicView>
            {isLoading && <Preloader/>}
            <ScrollView>
      LOC 96 -> <BasicInput placeholder="email" value={email} onChangeText={(val) => setEmail(val)}/>
                <BasicInput placeholder="password" value={password} onChangeText={(val) => setPassword(val)}
                            maxLength={15} secureTextEntry={true}/>
                <BasicInput placeholder="name" value={displayName} onChangeText={(val) => setDisplayName(val)}/>
                <Button title="Signup" onPress={() => registerUser()}/>
                <BasicLink onPress={() => props.navigation.navigate(NavigationLocations.LOGIN)}>
                    Already registered? Click here to log in...
                </BasicLink>
            </ScrollView>
        </BasicView>
    )

And here is the styled component's definition:

export const BasicInput = styled.TextInput`
    width: 100%;
    margin-bottom: 15px;
    padding-bottom: 15px;  
    align-self: center;
    border-color: #ccc;
    border-bottom-width: 1px;
`;

What does the enterKeyHint refer to? What correction should I implement?

Solution

  • The issue comes from React Native Web. Not sure in which version this appears. Anyway, I went back to version 0.12.3 and I don't get this warning anymore.

    enterKeyHint is an html property used for Virtual keyboards. It is a way to rename the [ENTER] key. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint

    The warning doesn't appears on Andoid or iOS. So you can safely ignore this warning if you are not willing to downgrade your React Native Web version as you are most likely do not need to rename [ENTER] key on Virtual keyboard on web.