Example of AwesomeALert component css override

SquareOffsetView.js

import React, {Component, PropTypes} from 'react';
import {TouchableWithoutFeedback,View,Dimensions,
  StyleSheet, Image, Text, TouchableOpacity} from 'react-native';
import Overlay from 'react-native-overlay';
import FloatLabelTextInput from 'react-native-floating-label-text-input';
import {Button,Badge,Icon} from 'native-base';
import AwesomeAlert from 'react-native-awesome-alerts';
import dismissKeyboard from 'react-native-dismiss-keyboard';

const ScreenWidth = Dimensions.get('window').width;

class SquareOffsetView extends Component {

  static propTypes = {
    set: PropTypes.number,
    travel: PropTypes.number,
    run: PropTypes.number,
    loading: PropTypes.bool.isRequired,
    isVisible: PropTypes.bool.isRequired,
    isCalcEnabled: PropTypes.bool.isRequired,
    squareOffsetStateActions: PropTypes.shape({
      increment: PropTypes.func.isRequired,
      calculate: PropTypes.func.isRequired,
      reset: PropTypes.func.isRequired,
      toggleVisibility: PropTypes.func.isRequired
    }).isRequired,
    navigationStateActions: PropTypes.shape({
      pushRoute: PropTypes.func.isRequired
    }).isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      setflag: false,
      travelflag: false,
      runflag: false,
      showAlert: false
    };
  }

  
  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

 
  render() {

    return (
        <View style={styles.container}>
        
          <AwesomeAlert
            style={{minHeight: screenWidth}}
            show={this.state.showAlert}
            title='Input Error'
            message='Input at least 2 values..'
            closeOnTouchOutside={true}
            closeOnHardwareBackPress={true}
            showCancelButton={false}
            showConfirmButton={true}
            confirmText='Ok'
            confirmButtonColor='#DD6B55'
            onConfirmPressed={() => {
              this.hideAlert();
            }}
          />
        
        </View>
    );
  }
  }
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    padding: 5,
    margin: 5
  },
  buttonTextStlye:
  {
    color: 'white'
  },
  linkButton: {
    textAlign: 'center',
    color: '#CCCCCC',
    marginBottom: 10,
    padding: 5
  },
  image: {
    flex: 2.5,
    minWidth: ScreenWidth,
    maxWidth: ScreenWidth,
    borderColor: '#888',
    marginBottom: 5
  },
  largeImage: {
    minWidth: ScreenWidth,
    maxWidth: ScreenWidth,
    borderColor: '#888',
    marginBottom: 10,
    flex: 4
  },
  floatLabelTextInput: {
    alignSelf: 'stretch'
  },
  buttonView: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 15,
    marginBottom: 4
  },
  infoText: {
    paddingLeft: 5
  },
  cancelIcon: {
    color: 'white'
  }
});
export default SquareOffsetView;