DEV Community: Uwem

How to add image preloading animation to a react native component using reanimated2

Uwem — Wed, 29 Dec 2021 09:18:19 +0000

Hello, how about we make our react native app a little bit fancy by adding preloading animations to our image component using the awesome reanimated2 library

We'll wrap the the Image component in an animated view having the same dimension as the image and create a state to manage the image status.

import React, { useEffect, useState } from "react";
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

interface Props {
  /**base64 string or url for the image */
  uri: string;
  width: number;
  height: number;
}
const AppImage = ({ height, uri, width }: Props) => {
  const [isImageLoading, setIsImageLoading] = useState(true);

  return (
    <Animated.View style={[{ width, height }]}>
      <Animated.Image
        {...{ height, width, source: { uri } }}
        style={[{ width, height }]
        resizeMethod="auto"
        resizeMode="cover"
      />
    </Animated.View>
  );
};

export default AppImage;

The image opacity will be set to 0 on mounting while we animated the background of the animated view with a loop animation
When the image is loaded, we'll stop the loop animation and set the image opacity to 1

import React, { useEffect, useState } from "react";
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

interface Props {
  /**base64 string or url for the image */
  uri: string;
  width: number;
  height: number;
}
const AppImage = ({ height, uri, width }: Props) => {
  const [isImageLoading, setIsImageLoading] = useState(true);
  const loop = useSharedValue(0); // this will be used to control the animation of the image container

  const animatedContainerStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(loop.value, [0, 1], ["black", "white"]), // animate the background color of the image container
  }));

  const animatedImageStyle = useAnimatedStyle(() => ({
    opacity: withTiming(isImageLoading ? 0 : 1, { duration: 500 }), // fade in image when loaded
  }));

  useEffect(() => {
    let animationInterval: NodeJS.Timeout;

    //start animation when the component mounts
    animationInterval = setInterval(() => {
      loop.value = withTiming(loop.value === 1 ? 0 : 1, { duration: 500 });
    }, 250);

    //stop animation when the image is loaded
    !isImageLoading && clearInterval(animationInterval);
    return () => clearInterval(animationInterval); //cleanup
  }, [isImageLoading]);

  return (
    <Animated.View style={[{ width, height }, animatedContainerStyle]}>
      <Animated.Image
        {...{ height, width, source: { uri } }}
        style={[{ width, height }, animatedImageStyle]}
        onLoad={(e) => {
          setIsImageLoading(false);
        }}
        resizeMethod="auto"
        resizeMode="cover"
      />
    </Animated.View>
  );
};

export default AppImage;

Here is a preview

How to send custom emails from a spreadsheet using google apps script.

Uwem — Sun, 25 Apr 2021 08:10:32 +0000

We are in an age where most of us are constantly seeking an easier way to do things, especially in professional settings where there is a lot of repeated task. If you're currently looking for an easier way to send emails directly from your spreadsheet, well, you're in luck because this blog post is for you.

This post will be focusing on Google sheets because it's one of the coolest spreadsheets ever, and together with the google apps script, it turns into the hulk on steroids. If this is your first time hearing about apps script, here's a summary of it.

Now let us begin.

Let us assume that the task of sending a series of acceptance /rejection emails to job applicants was assigned to us, and for each email, we are to include the job position of the candidate and the status of their application.

Step One:

Create a template for the email we want to send in google docs.

You'll notice that in the email template above, we have place-holders for the applicant's name, position applied for, and status(i.e, accepted and rejected)

Step two:

We'll create a spreadsheet with values that we want to replace our placeholders with (Name, Position, and status) and add a send email button at the button of the sheet.

Step Three:

It's time for the fun part. Open the script editor by clicking on 'tools' located in the ribbon section and select script editor. The script editor will be opened in a new tab.

First, we'll write a function that takes applicant details and creates a custom email from the template, then sends an email to the applicant

function createDocument(name, email, position, status){
  //get the email template from google doc using the url of the file
  const templateUrl = 'https://docs.google.com/document/d/1sRHXLlb3nsaiGVodhPNdt0SeYE1Gy-UnB4HQ1r2Wn-8/edit'

  //Get that template
  const template = DocumentApp.openByUrl(templateUrl)

  // Extract the text in the body of the documemt
  const text = template.getBody().getText()

  //Replace all placeholders
  const emailBody = text.replace('#Name', name)
              .replace('#position', position)
              .replace('#status', status)


  MailApp.sendEmail(
    email,
    'Response to Job Application',
    emailBody
  )
}

Next, we'll create a second function that takes rows of data from the spreadsheet and calls the createDocument function on each row. The last action by this function will be to alert us that all emails have been sent.

function sendEmails() {
  //get the spreadsheet with the emails
  const emialSpreadsheet =  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()

  //get all data inside the spreadsheet
  const data = emialSpreadsheet.getDataRange().getValues()

  //Iteriate through the data
  data.forEach((applicant, index) => {
    if (index > 0) //Skips the first array which is the header
    {
      createDocument(...applicant)
    }
  })

  SpreadsheetApp.getUi().alert('ALL Emails have been sent') //Show an alert on google sheet that the mails have been sent.
}

Finally we are going to assign the function above to the 'send email' button on the spreadsheet.
*Right click on the button
*Click on the three vertical dots to the left and select "Assign Script
*Type in "sendEmails" (this is the name of the function that we wish to assign to the button)

And that's it. Now with the click of a button, you can send as many customized emails as you want. Oh! wait!!, I forgot to mention that Google has a limit on the number of emails you can send using Apps script, which is 100/day for basic google accounts(e.g., gmail.com) and 1500/day for workspace accounts.

Enjoy your new superpower.

MY JOURNEY SO FAR AS AN ASPIRING WEB DEVELOPER

Uwem — Tue, 07 Jul 2020 12:41:10 +0000

Two months ago, I started the #100DaysOFCode challenge with Java in mind, I learnt the basics along with some advanced concepts of java but got bored quick because I wasn’t excited with the things I created, everything was stuck in the console, 😢 there was no UI and my laptop specs couldn’t afford android studio. I told a friend and he advised that I switch to web development, introduced me to FreeCodeCamp and encouraged me to give it a try.

A new week started, and I put aside my java notes and created a new one for web development, logged on to FreeCodeCamp with an open mind not knowing what to expect and started the responsive web design course and boy!! was I glad I listened to my friend advice. Before the end of that that day I knew how to create headers, footers, ordered lists and so much more and guess what? It was all console free. Over the next few weeks that followed, I was able to create basic side projects, I had just learnt how to add images to a web page and I wasn’t going to let that knowledge go to waste.😎

The Html5 section of FreeCodeCamp was a no brainer, finished it and moved on to the CSS section. Here, I had to pause and take things slow to fully understand things. I was learning how to breathe life into web pages using CSS and it was just A-M-A-Z-I-N-G😆. Things got a little bit technical with CSS FlexBox and GRID systems, but I was able to grasp Flexbox and skipped GRID because I just couldn't wrap my head around it😕.

I finally finished the course and was overjoyed because now, it was time to use my new ability to build mind blowing web pages😁. How naive I was 😅.

Scanned through the Web design projects and thought, oh! this is easy, and you know what, I’m going to make my own unique😇, for the tribute page I thought of doing a slideshow with a timeline, for the survey project I thought of doing some cool animations with the forms and I was all hyped up💪. Pumped myself up with lots of tutorial videos, created a workspace in VScode and I was ready to unleash the genius in me, but there was just one problem, my div element refused to stay in the center of the screen😭, I flexed it, justified it, aligned it and nope!!, it just wont stay put, there was short moments of victory where it would center and the moment I added another element everything would go haywire and the div elements would start flying here and there like they were in a dance competition. To add insult on injury my images were putting up some magic performance of their own. I went to bed frustrated that night thinking, maybe web Design isn’t for me, maybe I should have stayed in the peaceful world of System.out.println()😪.

The next day I opened twitter to see if I could get motivated from the #100DAYSOFCODE community which is a great community by the way, lots of awesome stuff on that trend. I saw a tweet that stressed the importance of baby steps, taking things slow and breaking down problems into bits, another tweet said

Tutorials doesn’t make you a better developer, practice does.

These tweets really helped reshaped my unrealistic expectations and made me understand that in other to get better i needed to practice more, humble myself and learn from my mistakes.

I decided to follow FreeCodeCamp models for the projects, opened up chrome devTools and inspected how they their set up was, Calmly, I observed how they positioned each element, the amount of padding and margins on some tags, what type of display some elements on the page had and when I didn’t understand the need for a particular style, I would change it and observe how if affected the layout of the page.

Little by little my project began to make sense. FreeCodeCamp’s forum was of great value also. If only you could have seen the big smile on my face when I passed the tribute page test, even if it was similar to that of FreeCodeCamp, I made it, and it wasn’t just a copy and paste project, I knew and understood how everything worked.

True there were times when I was temped to go overboard again but I kept things simple and just tried my best to pass the user stories, although I couldn’t resist the urge with my product landing page. 😂

Now I’m in the amazing world of JavaScript and oh! Yeah, turns out you can’t run from the ‘console’, 😂. But I’ll choose

console.log()

over

System.out.println()

anytime, anyday.

So far, I think i've made some improvements, for example I use to struggle with centering a div but now some of my major struggles are,

what on earth am I going to name this variable?
What’s up with promises and how do I use them
Oh, My God!! I haven’t learnt AJAX!!!
What the difference between prototypes and classes?
What wrong with the This keyword? Why does it keep changing

Occasionally, I still struggle with centering a div, but what the heck!! I’m making progress and building little cool projects.

Maybe one day I’ll write about how a bug in one of my recent project almost made me cry myself to sleep but till then, keep coding, keep learning, drink lots of water and stay close to things that makes you happy. BYE 😆.