import React from 'react';
import {
  Alert,
  Button,
  StyleSheet,
  View,
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonContainer: {
    margin: 20,
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

class ButtonBasics extends React.Component {
  onPressButton() {
    Alert.alert('You pressed THE button');
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button onPress={this.onPressButton}
            title="Press me"
          />
          <Button onPress={this.onPressButton}
            title="Press me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button onPress={this.onPressButton}
            title="This looks great!"
          />
          <Button onPress={this.onPressButton}
            title="OK"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

export default ButtonBasics;