react-native-surveys/Forms/components/Badge.js

Build your own forms, surveys and polls for your React Native apps.

import React, { memo } from "react";
import { View, StyleSheet, Text } from "react-native";
import { colors } from "../theme";

const Badge = ({ color, value }) => {
  const badgeStyle = {
    backgroundColor: colors.white,
    borderColor: colors.border,
    color: color,
    borderWidth: 1,
    borderStyle: "solid"
  };
  if (!value) return null;
  return React.createElement(
    View,
    {
      style: styles.wrapper
    },
    React.createElement(
      Text,
      {
        style: [badgeStyle, styles.badge]
      },
      value
    )
  );
};

const styles = StyleSheet.create({
  wrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    marginTop: -10,
    zIndex: 4
  },
  badge: {
    fontSize: 10,
    borderRadius: 10,
    paddingHorizontal: 16,
    paddingVertical: 4
  }
});
export default memo(Badge);