react-native-elements Button backgroundColor not working

Question

I am new to React Native. In my simple test app, I want to try out using react-native-elements button

However, I can't get my button background color to show.

I followed the documentation and tried adding a button like this:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Button } from 'react-native-elements';

export default class loginForm extends Component {
  render() {
    return (
      <View>
        <Button
            backgroundColor={'red'}
            title='Login' 
            />
      </View>
    )
  }
}

And in App.js, I import it like so:

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, TextInput } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';
import loginForm from './app/src/components/loginForm.js'

const TestStack = createStackNavigator(
  {
    Login: {screen: loginForm}
  }
)

const AppContainer = createAppContainer(TestStack);

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <AppContainer/>
    );
  }
}

What am I doing wrong?

See actual result

score 25 · Accepted Answer · answered Feb 19 '19 at 01:02

25

Use the prop below to make the background red in react-native-elements.

buttonStyle={{backgroundColor: 'red'}}

You should edit the styling of a button in react-native-elements using the prop buttonStyle .

Here is the working code. The button is red in here.

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View>
        <Button
            title='Login' 
            buttonStyle={{
              backgroundColor:'red'
            }}
            />
      </View>
    );
  }
}

Here is a working code, https://snack.expo.io/BkRgH0_HE

You can find more information about the props of the elements in react-native-elements in the link below, Props of Buttons

answered Feb 19 '19 at 01:02

Fatih Aktaş

1,446
13
25

Thank you this works, I am just very confused because this doc here clearly has examples of the approach shown in my post https://react-native-training.github.io/react-native-elements/docs/button.html – JAM Feb 19 '19 at 01:23
@jacobMarsellos I couldn't see any examples with backgroundColor. If you look at the props of the Button, you will see that backgroundColor isn't one of them. So, you can't use it that way. – Fatih Aktaş Feb 19 '19 at 03:05
Somehow this didn't change the color. On iOS the buttons always had no background color and on android they were always blue. The only thing that worked for me was to use the button from react-native-elements: https://github.com/react-native-elements/react-native-elements – Boommeister Jul 07 '21 at 04:41

react-native-elements Button backgroundColor not working

1 Answers1