Buttons either don't style correctly or I'm doing something wrong.

[mintuz]

Hello before I start, I am loving the concept/what you've done so far but have come across a bug/misunderstanding about how to style these buttons.

Below is some code I've written and the output is unexpected. essentially the spacing is broken and can't style them up to look like buttons.

var React = require('react-native');
var AuthActions = require('../actions/AuthActions.ios.js');
var UserService = require('../services/UserService.ios.js');
var Button = require('react-native-button');
var _ = require('lodash');

var {
  StyleSheet,
  TextInput,
  View,
  AlertIOS
} = React;

var LoginView = React.createClass({

  /** Stylesheet **/
  _styles: StyleSheet.create({
    viewContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#000000'
    },
    buttonContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    textBox: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
      height: 40,
      borderRadius: 20,
      backgroundColor: '#FFFFFF',
      paddingLeft: 20
    }
  }),

  /** Login Action**/
  _handleLoginAction: function() {

    if(!_.isEmpty(this.state.email) && !_.isEmpty(this.state.password)) {

      UserService.authUser({
        email: this.state.email, 
        password: this.state.password 
      }, function(err, res){

        var response = JSON.parse(res.text);
        AuthActions.loggedIn(response.authCode);
      });

    } else {

      AlertIOS.alert(
        'Woops',
        'You have not provided all the information, please try again.'
      );
    }
  },
  getInitialState : function(){

    return {
      email: false, 
      password: false
    };
  },
  /** Lifecycle **/
  render: function() {
    return (
      <View style={this._styles.viewContainer}>
        <TextInput
          placeholder={'Email'}
          style={this._styles.textBox}
          onChangeText={(email) => this.setState({email: email})}
        />
        <TextInput
          placeholder={'Password'}
          style={this._styles.textBox}
          password={true}
          onChangeText={(password) => this.setState({password: password})}
        />
        <View style={this._styles.buttonContainer}>
          <Button style={{textAlign: 'left', flex: 1, color: 'green'}} onPress={this._handleLoginAction}>
            Register
          </Button>
          <Button style={{textAlign: 'left', flex: 1, color: 'green'}} onPress={this._handleLoginAction}>
            Login
          </Button>
        </View>
      </View>
    );
  }
});

module.exports = LoginView;

[ide]

In this case, Button components are styled very similar to Text components with UIKit-like defaults (the right type of Helvetica Neue, text color, etc.). But what kind of rendering did you have in mind?

[mintuz]

Register and login text aligned left and right respectively and for them to maybe have square backgrounds, padding etc.

[ide]

Left/right aligning the buttons is tricky because of flexbox's limitations. I believe you'll have to add this to your buttonContainer style to get the justifyContent property to apply.

position: 'absolute',
left: 0,
right: 0,

Looking at iOS none of the buttons have backgrounds so I prefer for users of the library to customize that, but padding is an interesting idea since it's not supported on plain Text components or TouchableOpacity so Button could make that easier. Hope that answers your questions.