Invalid prop `buttonStyle` supplied to `Button`

What I did

I’m currently on React Native version 0.63.3, React Native Web version 0.14.3, and React Native Elements version 3.0.0-alpha.1.

I get the below error in the console on a simple Button import and rendering. Looking at the TS declarations on Button, buttonStyle is clearly a valid prop from the extended ButtonProps interface in react-native-elements.

I think the issue is occurring due to React Native’s Button not having buttonStyle on its props.

export interface ButtonProps {
    title: string;
    onPress: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void;
    color?: ColorValue;
    accessibilityLabel?: string;
    disabled?: boolean;

    /**
     * Used to locate this button in end-to-end tests.
     */
    testID?: string;
}

export class Button extends React.Component<ButtonProps> {}

import {
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  TextInput
} from 'react-native';
import { Button } from 'react-native-elements';

const styles = StyleSheet.create({
  fbLoginButton: {
    height: 45,
    marginTop: 10,
    backgroundColor: 'transparent'
  },
  loginButton: {
    borderRadius: 5,
    height: 45,
    marginTop: 10,
    backgroundColor: 'rgba(56, 151, 241, 1)'
  }
});

// Component code scaled down for simplicity
const MyComp = () => (
    <KeyboardAvoidingViewStyled
      behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
    >
      <LoginScreenContainer device={Platform.OS}>
        <LoginFormView>
          <Button buttonStyle={styles.loginButton} title="Login" />
        </LoginFormView>
      </LoginScreenContainer>
    </KeyboardAvoidingViewStyled>
  );

Warning: Failed prop type: Invalid prop `buttonStyle` supplied to `Button`.
    at Button (http://localhost:19006/static/js/bundle.js:65901:81)

Expected behavior (Required)

Render the component with Button and no errors.

To Reproduce (Required)

For some reason I can’t reproduce it on this Snack.

Any thoughts?

Screenshots (Required)

[avgupta456]

I also ran into this exact issue for buttonStyle, titleStyle, containerStyle and others. I was able to resolve my errors by wrapping my styles in an array, or moving the object from the stylesheet directly into the prop.

<Button buttonStyle={styles.loginButton} title="Login" /> // did not work
<Button buttonStyle={[styles.loginButton]} title="Login" /> // did work
<Button buttonStyle={{ borderRadius: 5, ... }} title="Login" /> // did work

Hope this helps someone else!

[cglacet]

We have this error on 3.2.0, wrapping in an array does solve the problem, but it looks ugly. We also have the same error in the containerStyle prop.