React Alias Components

react-alias-component.js

import React, {Component} from 'react'
import Icon from '...'
import {
  Text,
  TouchableOpacity,
  View
} from 'react-native'

import styles from './styles'

const SUBMIT_TEXT = '...'
const CANCEL_TEXT = '...'

export default Alert extends Component {
  render () {
    <View style={styles.alertContainer}>
      <View style={styles.alertHeader}>
        <Icon src='...' style={styles.alertIcon} />
        <Text style={styles.alertText}>{alertHeaderText}</Text>
      </View>

      <View style={styles.alertBody}>
        <Text style={styles.alertText}>{alertBodyText}</Text>
      </View>

      <View style={styles.alertFooter}>
        <TouchableHighlight style={[styles.alertButton, styles.cancelButton]} onPress={...}>
          <Text style={[styles.buttonText, styles.cancelButtonText]}>
            {CANCEL_TEXT}
          </Text>
        </TouchableHighlight>
        <TouchableHighlight style={[styles.alertButton, styles.submitButton]} onPress={...}>
          <Text styles={[styles.buttonText, styles.submitButtonText]}>
            {SUBMIT_TEXT}
          </Text>
        </TouchableHighlight>
      </View>
    </View>
  }
}