DEV Community: Anaturuchi

Answer: React Native - Tailwind CSS autocomplete in VSCode for twrnc package

Anaturuchi — Thu, 06 Oct 2022 17:03:27 +0000

Oct 6 '22

 - //Use TailwindCss in ReactNative
  - Install twrnc: npm install twrnc
  - import tw from "twrnc";
  - Be sure to install the TailWind CSS Intellisense extension in VS code 
  - Go to the extension settings and
  add 'style' in Class Attributes 
  - Go to your project root folder and
  manually

…

Open Full Answer

EASIEST way to copy text to clipboard when button is pressed - using JavaScript

Anaturuchi — Fri, 27 May 2022 10:07:04 +0000

This is by far the easier way I have seen to copy text to clipboard when a button is clicked. This is for Javascript devs.

You can use this to create a Copy to Clipboard button on your javascript site or app.

I believe in practical learning so let us just build something small that shows this in use.

Let us create a very simple HTML document that where you can type a string as input and display the text in a paragraph by clicking a button. Then you will use another button to copy the paragraph to your computer's or phone's clipboard.

We will not style this and our javascript will be on same file for simplicity and speed.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body>
<h1>Simple example of copy text to clipboard using Javascript </h1>
<input placeholder="Type text" id="textInput">
<button>Save This</button>
<p id="savedText"></p>
<button>Copy This</button>

<script>
</script>
</body>

</html>

Intentionally left the Script tag empty. That is where our javascript will be written.

We will now write the first Javascript code inside our script tag that will grab the text that is entered in the text input space (id ="textInput") and display it inside the paragraph with id "savedText" which is currently empty.

Next, we will add an onClick function invocation to the "Save" button in our html.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body>
<h1>Simple example of copy text to clipboard using Javascript </h1>
<input placeholder="Type text" id="textInput">
<button onClick="saveText()" >Save This</button>
<p id="savedText"></p>
<button>Copy This</button>


<script>

function saveText(){
document.getElementById("savedText").innerText = document.getElementById("textInput").value
}
</script>
</body>

</html>

If you run this on your browser now, you will see that when you make an input and click on the "Save" button, the text you typed will be displayed below the save button.

The save button is calling a function "SaveText()". What this does is to take the value(ie, content) of the text input field and use it to replace whatever is in the inner text of the paragraph with id="savedText", whether an empty space or another text.

I know you may already know all these but I need to make it as simple as possible for even the absolute beginner😉.

Next, we create the function that actually does the copying to clipboard in Javascript. You can place this under the first function still inside your script tag:

 const copyToClipboard = (text) => {
            navigator.clipboard.writeText(text)
        }

Note that we gave it the parameter "text". This will be replaced with a variable (an argument) whose value will be the text saved in our "savedText" paragraph.

Next, Create a function that is called when the "Copy" button is clicked. We name this function "copy". Write this under the previous function.

 function copy() {
            const textToCopy = document.getElementById("savedText").innerText;
            copyToClipboard(textToCopy)
            console.log(textToCopy)
        }

Above: inside the function, we first created a variable named "textToCopy" and made it's value to be the text we grab from our "savedText" paragraph.
Then we use "textToCopy" as an argument when we call our earlier function: *copyToClipboard *. If you are new to this, this is called calling a function inside another function.

Finally, we go back to our "Copy this" button in the html and make it to call the copy() function whenever it is pressed.

<button onClick="copy()"> Copy This </button>

Putting it all together,

We will have this as our complete code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body>
    <h1>Simple example of copy text to clipboard using Javascript </h1>
    <input placeholder="Type text" id="textInput">
    <button onClick="saveText()">Save This</button>
    <p id="savedText"></p>
    <button onClick="copy()"> Copy This</button>


    <script>

        function saveText() {
            document.getElementById("savedText").innerText = document.getElementById("textInput").value
        }

        const copyToClipboard = (text) => {
            navigator.clipboard.writeText(text)
        }

        function copy() {
            const textToCopy = document.getElementById("savedText").innerText;
            copyToClipboard(textToCopy)
            alert("Text copied to clipboard")
        }

    </script>
</body>

</html>

I hope this helps someone out there. You can follow me on Twitter or BuyMeACoffee

How to change color of an icon, text or other component with ReactNative useState Hook

Anaturuchi — Sat, 26 Mar 2022 01:20:19 +0000

answer re: How do I use the useState hook to change the color of my react icons to blue?

Mar 26 '22

Here is an example that can be helpful. In this case, I want to update the colour of my heart IonIcon when a user clicks on it once, so I first wrapped it in touchableOpacity to get that blink effect. If you don't want to wrap it, you simply put…

Open Full Answer

Answer: How To Pass Style Props into a reusable component in React Native for more flexible styling in the future

Anaturuchi — Tue, 22 Mar 2022 18:13:40 +0000

answer re: How To Pass Style Props into a reusable component in React Native for more flexible styling in the future

Mar 22 '22

The Goal To create a reusable react component and have the flexibility to style any part of the component in the future.

How to achieve this:

Create the reusable component using const or function.
Pass 'props' as a parameter to the component, whether functional or const.
Give the components of…

Open Full Answer

Answer: React Native backgroundColor overlay over image. How To Make a Colour Overlay on an Image in react native

Anaturuchi — Tue, 11 Jan 2022 16:51:19 +0000

Jan 11 '22

Make an overlay on react native image background: If you want to make an overlay on the background image ONLY in react native and not affect other elements that are inside the < ImageBackground> tag, do this:

//Fetching the background image from online, you can use any image source of

…

Open Full Answer



//Fetching the background image from online, you can use any image source of your choice.

const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };

// Setting the background image for the view:

 <View style={styles.GoProBox}>
            <ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
            <View style={styles.overlayView}/>
            <Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
            <GoProButton />
            </ImageBackground>


//Stylesheet

const styles = StyleSheet.create({
GoProBox: {
        width: '95%',
        height: 200,
        margin: 5,
        backgroundColor: '#00cc00',
        borderRadius: 10,
        alignSelf: 'center',
        overflow: 'hidden'

    },
goProBgImage: {
        width: '100%', height: '100%',


    },

    goProText: {
        textAlign: 'center',
        fontSize: 20,
        marginTop: 10,
        fontWeight: 'bold',
        padding: 10,
        color: 'white'

    },
GoProButton: {
        height: 60,
        width: 200,
        backgroundColor: 'red',
        borderRadius: 15,
        alignSelf: 'center',
        justifyContent: 'center',
        top: 50
    },
overlayView: {
        height: "100%",
        width: "100%",
        position: 'absolute',
        backgroundColor: 'rgba(0, 204, 0, 0.5)',

    }

})