RoundedButton.tsx

import React from "react";
import { TouchableOpacity, Text, ViewStyle, StyleSheet, StyleProp } from "react-native";
import { fonts } from "../styles";

interface Props{
  onPress?() : void;
  centerText: string;
  backgroundColor: string;
  textColor: string;
  style?: ViewStyle;
  shadow?: boolean;
}

export default class RoundedButton extends React.Component<Props>{

  render(){
    const defStyles : StyleProp<ViewStyle> = [style.button, {
      backgroundColor: this.props.backgroundColor,
    }, this.props.style];
    if(this.props.shadow)
      defStyles.push(style.shadow);
    

    return(
      <TouchableOpacity
        disabled={!this.props.onPress}
        onPress={() => {
          if(this.props.onPress)
            this.props.onPress();
        }}
        style={defStyles}
      >
        <Text style={{
          color: this.props.textColor,
          fontFamily: fonts.bold,
          fontSize: 16
        }}>{this.props.centerText}</Text>
        
      </TouchableOpacity>
    );
  }

}

const style = StyleSheet.create({
 button:{
  height: 50,
  borderRadius: 10,
  alignItems: "center",
  justifyContent: "center",
  paddingVertical: 5,
  paddingHorizontal: 20,
  zIndex: 2
 },
 shadow: {
  shadowColor: "#000000",
  shadowOpacity: 0.8,
  shadowRadius: 3,
  shadowOffset: {
    height: 1,
    width: 1
  },
  elevation: 2,
 }
});