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
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