React-native-windows: [Component] Cannot set styles on Button

[kikisaints]

There appears to be no way to apply a defined style to a Button.

Additional Info

I should have a dark navy blue button with the corresponding height/width set. The app compiles and runs just fine, however, no visuals appear to change:

export default class App extends Component {
  //Functions called in the main view tag
  constructor(props) {
    super(props);
    this._onPress = this._onPress.bind(this);
    this.state = { text: 'Button' };
  }

  _onPress(e) {
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={this._onPress} title={this.state.text} style={styles.buttonStyle}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonStyle: {
    height:30,
    width: 160,
    color: '#274677',
  },
});

[rozele]

@kikisaints - are the height and width settings on the button working? If it's just color, did you try backgroundColor? If we're using the default Button.js from React Native the "default" props are for Android when Platform.OS !== 'ios'.

[MikeHillberg]

This shouldn't work, because Button doesn't have a style property? (And if it did, it would be 'style', not 'styles'.)

[kikisaints]

This shouldn't work, because Button doesn't have a style property? (And if it did, it would be 'style', not 'styles'.)

Makes sense! And typo will be fixed :)

[achipa]

@kikisaints I believe the idea for Button is to have minimal configuration options (ie no style={{}}), and people wanting to do more extensive styling should be rolling their own Button (custom TouchableOpacity and friends).

[kikisaints]

This was closed as a separate StyleSheet issue will be opened to cover all control styling scenarios and gaps.