score:-3

You should use the hex code backgroundColor="#FF0000" instead of color="red". Also please use raised={true} other wise background color is not override.

score:0

this answer is little bit late, but can be good for anothers. To solve this problem it is better to use "Text" Component as a Button

fist make a component name it AppButton

function AppButton({children,style,onPress}) {
 return (
   <TouchableOpacity onPress={onPress}>
    <Text
      style={[styles.appButton,style]} >
      {children}
    </Text>
   </TouchableOpacity>
 );
}

export default AppButton;

then Import it in where that you want to use it

import AppButton from './AppButton';

and with this line you can call your custom Button that actually is a Text which you can customize it. remember onPress Event have to calling in TouchableOpacity not Text:

<AppButton style={styles.appOk} onPress={()=> visibleFunc(false)} >Ok</AppButton>

score:4

"color" property applies to background only if you're building for android.

Other than that I personally find it easier to manage custom buttons. That is create your own component named button and have it as a view with text. This way its way more manageable and you can import it as easy as Button.

score:14

I suggest to use React Native Elements package, which allow to insert styles throught buttonStyle property.

styles:

const styles = StyleSheet.create({
   container: {
      flex: 1
   },
   button: {
      backgroundColor: '#00aeef',
      borderColor: 'red',
      borderWidth: 5,
      borderRadius: 15       
   }
})

render()

render() {
   return (
      <View style={styles.container}>
          <Button
             buttonStyle={styles.button}
             title="Example"
             onPress={() => {}}/>
      </View>
   )
}

Effect: Effect button

Expo Snack: https://snack.expo.io/Bk3zI0u0G

score:56

Use this for adding the background color to the button in iOS:

Styles:

  loginScreenButton:{
    marginRight:40,
    marginLeft:40,
   marginTop:10,
    paddingTop:10,
    paddingBottom:10,
    backgroundColor:'#1E6738',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  loginText:{
      color:'#fff',
      textAlign:'center',
      paddingLeft : 10,
      paddingRight : 10
  }

Button:

<TouchableOpacity
          style={styles.loginScreenButton}
          onPress={() => navigate('HomeScreen')}
          underlayColor='#fff'>
          <Text style={styles.loginText}>Login</Text>
 </TouchableOpacity>

enter image description here

For Android it simply works with Button color property only:

<Button  onPress={onPressAction}  title="Login"  color="#1E6738"  accessibilityLabel="Learn more about this button" />

Related Query

More Query from same tag