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

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

import React, { memo } from "react";
import {
  Text,
  StyleSheet,
  TouchableOpacity,
  Linking,
  Platform,
  View
} from "react-native";
import { colors } from "../theme";
import { config } from "../config";
import { SOURCE_REACT_NATIVE, SOURCE_WEB } from "../helpers";

const PoweredBy = () => {
  const source = Platform.OS === "web" ? SOURCE_WEB : SOURCE_REACT_NATIVE;

  if (Platform.OS === "web") {
    return React.createElement(
      View,
      {
        style: styles.container
      },
      React.createElement(
        "a",
        {
          href:
            config.NATIVE_FORMS_ADDRESS +
            `?utm_source=powered_by&utm_medium=${source}`,
          rel: "noopener noreferrer",
          style: {
            textDecoration: "none",
            fontSize: 10,
            color: colors.primary
          },
          target: "_blank"
        },
        "Powered by ",
        React.createElement(
          Text,
          {
            style: styles.strong
          },
          "Native"
        ),
        React.createElement(
          Text,
          {
            style: styles.bold
          },
          "Forms"
        )
      )
    );
  }

  return React.createElement(
    TouchableOpacity,
    {
      onPress: () => {
        Linking.openURL(
          `${config.NATIVE_FORMS_ADDRESS}?utm_source=powered_by&utm_medium=${source}`
        );
      },
      style: styles.container
    },
    React.createElement(
      Text,
      {
        style: styles.title
      },
      "Powered by ",
      React.createElement(
        Text,
        {
          style: styles.strong
        },
        "Native"
      ),
      React.createElement(
        Text,
        {
          style: styles.bold
        },
        "Forms"
      )
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "white",
    width: "100%",
    minHeight: 24,
    maxHeight: 24
  },
  title: {
    fontSize: 10,
    margin: 0,
    padding: 0,
    color: colors.primary
  },
  bold: {
    fontWeight: "bold",
    fontSize: 10
  },
  strong: {
    fontWeight: "bold",
    color: colors.main,
    fontSize: 10
  }
});
export default memo(PoweredBy);