Simple Circle React Native Component

Circle.js

import React from "react";
import PropTypes from "prop-types";
import {
  View,
  StyleSheet,
  TouchableHighlight,
  Text,
  Dimensions
} from "react-native";

const screen = Dimensions.get("screen");

handlePress = text => {
  alert(text + " Clicked");
};

const Circle = props => {
  return (
    <View style={styles.circle}>
      <TouchableHighlight
        underlayColor={"#fcf"}
        style={styles.innerCircle}
        onPress={() => this.handlePress(props.text)}
      >
        <Text style={styles.text}> {props.text} </Text>
      </TouchableHighlight>
    </View>
  );
};

Circle.propTypes = {
  text: PropTypes.string.isRequired
};

Circle.defaultProps = {
  text: "Default"
};

export default Circle;

const styles = StyleSheet.create({
  circle: {
    width: screen.width / 7,
    height: screen.width / 7,
    borderRadius: screen.width / 14,
    borderColor: "#ccc",
    padding: 5,
    borderWidth: 1,
    margin: 10
  },
  innerCircle: {
    flex: 1,
    borderRadius: screen.width / 14,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    fontSize: 10
  }
});