App.js

 avatar
unknown
javascript
2 years ago
2.1 kB
6
Indexable
import React, { cloneElement, useState } from "react";
import { View, TextInput, TouchableOpacity, Text } from "react-native";
import Clipboard from "@react-native-clipboard/clipboard";
export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [website, setWebsite] = useState("");
  const [downloadLink, setDLlink] = useState(false);
  const [showCopyButton, setShowCopyButton] = useState(false);

  const getyoutubelink = async () => {
    setShowCopyButton(false);
    setIsLoading(true);

    // code to get download link

    setShowCopyButton(true);
    setIsLoading(false);
  };

  const copyToClipboard = () => {
    Clipboard.setString("moji");
    setShowCopyButton(false);
  };

  return (
    <View
      style={{
        flex: 1,
        gap: 25,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <TextInput
        placeholder="Enter the address"
        onChangeText={setWebsite}
        value={website}
        style={{
          borderColor: "black",
          borderWidth: 1,
          padding: 10,
          paddingLeft: 23,
          paddingRight: 23,
          borderRadius: 150,
          width: 290,
        }}
      />
      <TouchableOpacity
        style={{
          backgroundColor: "#0091EA",
          alignItems: "center",
          padding: 10,
          marginTop: 10,
          width: 150,
          borderRadius: 25,
        }}
        onPress={getyoutubelink}
        disabled={isLoading}
      >
        <Text style={{ color: "#fff", fontSize: 16 }}>
          {isLoading ? "please wait" : "Get download link"}
        </Text>
      </TouchableOpacity>
      {showCopyButton && (
        <TouchableOpacity
          style={{
            backgroundColor: "#0091EA",
            alignItems: "center",
            padding: 10,
            marginTop: 10,
            borderRadius: 5,
          }}
          onPress={copyToClipboard}
        >
          <Text style={{ color: "#fff", fontSize: 16 }}>Copy the link</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}
Editor is loading...