Javascript (JSX) Version of `Button100x30` Component

Button100x30.jsx

// Standard Imports for React and React-Native Stuff
import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle } from 'react-native';

// CSS Styles Defined Elsewhere - IGNORE
import MasterStyles from '../styles/MasterStyles';

// CSS Styles - ALSO IGNORE
const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: 100,
    height: 30,
    borderRadius: 5,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: MasterStyles.colors.semiTransparentWhite
  },
  text: {
    fontFamily: 'System',
    fontSize: 16,
    color: MasterStyles.colors.white,
    fontWeight: '400'
  },
  unSelected: {
    color: MasterStyles.colors.semiTransparentWhite
  }
});

/**
 * A simple, stylized, 100x30 button that you
 * can be disabled and further styled.
 */
export default function Button100x30({
  text,
  onPress = () => null,
  containerStyle = {},
  disabled = false
}) {
  return (
    <TouchableOpacity
      style={[styles.button, containerStyle]}
      onPress={onPress}
      disabled={disabled}
    >
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
}