mancala/mobile/src/components/Button.tsx

import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../context/context";
import { getColorByBrightness } from "@mancala/core";
import { Pressable, View } from "react-native";

const Button: FunctionComponent<{
  context: Context;
  text: String;
  onClick: () => void;
  color: string;
}> = ({ context, text, color, onClick }) => {
  const textColor = getColorByBrightness(
    color,
    context.themeManager.theme.textColor,
    context.themeManager.theme.textLightColor
  );
  return (
    <Pressable onPress={onClick}>
      <View
        style={{
          backgroundColor: color,
          //color: textColor,
          margin: 5,
          padding: 10,
          borderRadius: 30,
        }}
      >
        {text}
      </View>
    </Pressable>
  );
};

export default Button;