Forem: Saad

I wish there was an intensive course where we only focus on working with objects, arrays, and solving real-life problems.

Saad — Wed, 03 Mar 2021 11:25:51 +0000

I may have not expressed myself properly from the title. But most of the time as front-end devs, we need to work with objects and arrays. I wish there was a course/tutorial only focusing on solving real-life problems with objects and arrays. Writing clean functions to extract, filter, combine objects/arrays to come to the real solution.

I hope I could made my points clear.

Remove Item with animation in a Horizontal FlatList in React Native

Saad — Sat, 27 Feb 2021 15:08:14 +0000

I have been working on a horizontal FlatList in React Native. The idea is, a user can remove the item by clicking on the item. So once the item is removed, I need to :

Remove the item from the list with a nice opacity animation
At the same time, I need to fill up space with the next items sliding in to fill it up properly.

At first, I was trying it out with react native Animated library but it was getting messier and I could not achieve the effects that I wanted. However, with LayoutAnimation from react-native, this can be done easily. Let’s start then. First, we will put the initial set up for our horizontal FlatList.



const { height, width } = Dimensions.get("window");
const dummyData = [
  {
    id: 1,
    name: "orange card",
    color: "orange",
  },
  {
    id: 2,
    name: "red card",
    color: "red",
  },
  {
    id: 3,
    name: "green card",
    color: "green",
  },
  {
    id: 4,
    name: "blue card",
    color: "blue",
  },
  {
    id: 5,
    name: "cyan card",
    color: "cyan",
  },
];
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: 120,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  flatList: {
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
  cardContainer: {
    height: 100,
    width: width * 0.5,
    marginRight: 8,
  },
  card: {
    height: 100,
    width: width * 0.5,
    borderRadius: 12,
    padding: 10,
  },
  text: { color: "white", fontWeight: 'bold' }
});

export default function App() {
  const [data, setData] = React.useState(dummyData);
  return (
    <View style={styles.container}>
      <FlatList
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.flatList}
        horizontal={true}
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity
              style={styles.cardContainer}
              onPress={() => removeItem(item.id)}
            >
              <Card style={[styles.card, {backgroundColor: item.color}]}>
                <Text style={styles.text}>{item.name}</Text>
              </Card>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
}

With this, we get the following output.

Now it is time for removing the item from the FlatList, we can just pass the id of the item to our FlatList and remove the items that match the id. Like so:



const removeItem = (id) => {
    let arr = data.filter(function(item) {
      return item.id !== id
    })
    setData(arr);
  };

if we click our item, the items will be removed from the FlatList but without any animation. This will like odd. The output will be like the following -

Okay, now let's start the animation. With LayoutAnimation we can easily create a layout config that will have the effect.



const layoutAnimConfig = {
  duration: 300,
  update: {
    type: LayoutAnimation.Types.easeInEaseOut, 
  },
  delete: {
    duration: 100,
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity,
  },
};

const removeItem = (id) => {
   let arr = data.filter(function(item) {
     return item.id !== id
   })
   setData(arr);
   // after removing the item, we start animation
   LayoutAnimation.configureNext(layoutAnimConfig) 
};

If we check the config, we can see the animation that we are doing while deleting the item from the list. The type is easeInEaseOut and the property is opacity. So let us see the final result with the LayoutAnimation effect.

One last important thing to note that, ensure your key extractor returns a unique key for each item. Do not return index.toString() in your keyExtractor function of the FlatList. Otherwise, the animation will not work. I was stuck with this for quite a long time. :D

You can check out the full demo here

Dynamic Height, Width, and Aspect Ratio in React Native

Saad — Fri, 05 Feb 2021 04:28:42 +0000

Let's say you are given this design to build a simple horizontal FlatList. How can you dynamically find the width and height of the items in the flat list? We can do it in different ways but recently in my code read journey I have learned a cool trick from my colleague. First of all, let's find the width of the item, shall we?

As we can see from the above image, the whole screen width is 376 and if we inspect our item width in Figma (which is not shown in the above image), the item width is 240. So if we take this as our general measurement we can find out the item width according to screen width.

itemWidth = screenWidth * 376/240 OR screenWidth * 0.64

Meaning that our items in the flat list are taking up 64% of the total width. So how do we define the height now? We can get the dynamic height from the width and aspect ratio.

// In Figma, our item width is 240 and height is 198
// so first we get the aspect ratio
const CARD_ASPECT_RATIO = 240 / 198; // aspectRatio = width / height
const CARD_WIDTH = Metrics.screenWidth * 0.64; // this we already found out
const CARD_HEIGHT = CARD_WIDTH / CARD_ASPECT_RATIO;

Following the same method we can find out the inner content height and width. In our case, we have a top section with empty background and bottom section with text inside it. So in order to get the top section height and width dynamically, we can use the same formula.

const IMAGE_CONTAINER_ASPECT_RATIO = 240 / 140;
const IMAGE_CONTAINER_WIDTH = CARD_WIDTH;
const IMAGE_CONTAINER_HEIGHT = IMAGE_CONTAINER_WIDTH / IMAGE_CONTAINER_ASPECT_RATIO;

Finally, if we put it all together it will look like this in the following:

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Dimensions } from 'react-native';
import { Card } from 'react-native-paper';

const { width, height } = Dimensions.get('window');

const Metrics = {
  section: 16,
  halfSection: 8,
};

const CARD_WIDTH = width * 0.64;
const CARD_ASPECT_RATIO = 240 / 198;
const CARD_HEIGHT = CARD_WIDTH / CARD_ASPECT_RATIO;
const IMAGE_CONTAINER_ASPECT_RATIO = 240 / 140;
const IMAGE_CONTAINER_WIDTH = CARD_WIDTH;
const IMAGE_CONTAINER_HEIGHT =
  IMAGE_CONTAINER_WIDTH / IMAGE_CONTAINER_ASPECT_RATIO;

const styles = StyleSheet.create({
  topCars: {
    height: CARD_HEIGHT,
    width: CARD_WIDTH,
    borderRadius: 12,
    marginRight: Metrics.halfSection,
  },

  topCarsImage: {
    width: IMAGE_CONTAINER_WIDTH,
    height: IMAGE_CONTAINER_HEIGHT,
    borderRadius: 12,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
  },
});

export default function App() {
  return (
    <View style={{ flex: 1, paddingTop: 48 }}>
      <FlatList
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{
          paddingHorizontal: Metrics.section,
          paddingBottom: Metrics.section,
        }}
        horizontal={true}
        data={[
          {
            name: 'KFC',
            location: 'Bukit Bintang, Kuala Lumpur',
            bg: 'cyan',
          },
          {
            name: 'MacDonalds',
            location: 'Damansara, Kuala Lumpur',
            bg: 'orange',
          },
          {
            name: 'Pizza Hut',
            location: 'Damansara Jaya, Kuala Lumpur',
            bg: 'yellow',
          },
          {
            name: 'Pak Punjab',
            location: 'Bukit Heights, Kuala Lumpur',
            bg: 'grey',
          },
        ]}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => {
          return (
            <Card style={styles.topCars}>
              <View
                style={[styles.topCarsImage, { backgroundColor: item.bg }]}
              />
              <View style={{ padding: 12 }}>
                <Text>{item.name}</Text>
                <Text>{item.location}</Text>
              </View>
            </Card>
          );
        }}
      />
    </View>
  );
}

Also if you would like to see it in action, please check out the snack link.
https://snack.expo.io/@saad-bashar/dynamic-height-and-width

Create your own multi-selected input in React-Native

Saad — Thu, 17 Dec 2020 15:59:20 +0000

We can create our multi-selected input in react-native very easily. Let’s say in our demo user can select his favorite brands from a list of options. The user can check/uncheck the inputs.

First, we need to show all the inputs to the user. We can use FlatList to render the items. Like so –

Then we need to keep track of the items that the user is selecting. We can keep track of them using an array. We have two conditions – When an item is already selected and when the item is not selected. So every time the user clicks on an item we need to check if it has been already selected, if it is already selected then we need to remove the item from the selected items, if not then we need to add the item to the selected items list.

We can also change the color of the button and text according to the condition. This is how our renderBrands function looks like after the proper change.

The complete code can be seen in the following snack. https://snack.expo.io/@saad-bashar/68cb24

Creating a reusable “Token Manager” class in react-native.

Saad — Wed, 16 Dec 2020 14:54:20 +0000

In any app, especially an app that has user accounts, it is a very common task to check for existing user token and redirects the user either to AuthStack or AppStack according to the token found. So for this common task, we can create our own token manager class which handles the common functionalities related to user token. In today’s code read I will try to document that.

Usually, we store tokens locally in our AsyncStorage, so we have 2 functions in our class. One is to set and the other one is to clear the token.

Now the next one is the most important function, anywhere in our app where we want to get the valid token for the user we need to check a few things. They are the following:

First, we check if there is any saved token in our local storage. We check for the tokenObj, that object should have the necessary information about the token. Like token value, expires-at, etc.
If there is not an existing token, we return null.
If there is an existing token, we need to check if the token is still valid, meaning if it is still not expired. This information should be passed from API when the user logged in or signed up in the app before.

So with all these steps, our function should look like following

Finally, we have our new token function where if the token is expired we request for refresh token from the API.

Once we have this class set up, we just need to import this class and create an object to get a valid token from anywhere in our app like the following.

The full code for the tokenizer class is given below for reference.

Create your own radio button component in react native easily

Saad — Thu, 11 Apr 2019 07:07:02 +0000

You can easily create your own radio button components in react native very easily. First you need to create an array of options for your radio buttons and pass it to your radio button component like so:

const options = [
    {
        key: 'pay',
        text: 'Most High Pay',
    },
    {
        key: 'performance',
        text: 'Most Perfomance',
    },
    {
        key: 'aToZ',
        text: 'A - Z',
    },
    {
        key: 'zToA',
        text: 'Z - A',
    },
];

{...}
<RadioButtons options={options} />

after this in your radio button component you can map all these options in your render method and create radio button views

{options.map(item => {
    return (
        <View key={item.key} style={styles.buttonContainer}>
            <Text>{item.text}</Text>
            <TouchableOpacity style={styles.circle} />
        </View>
    });
}

this will create default radio buttons which looks like this -

Right now it is time to set the state when clicked on the radio button. First we declare our state

state = { value: null }

then inside out tag we define our checked button when clicked on any particular button.

<TouchableOpacity
    style={styles.circle}
    onPress={() => this.setState({ value: key })} // we set our value state to key
>
    { value === item.key && (<View style={styles.checkedCircle} />) } // when value is equal to key
</TouchableOpacity>

So right now when clicked it looks like this -

finally the styles -

buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 30,
},
circle: {
    height: 20,
    width: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#ACACAC',
    alignItems: 'center',
    justifyContent: 'center',
},
checkedCircle: {
    width: 14,
    height: 14,
    borderRadius: 7,
    backgroundColor: '#794F9B',
},

Here is the snack link - https://snack.expo.io/@saad-bashar/radio-buttons

React Native Animated Inputs

Saad — Sat, 23 Feb 2019 12:43:47 +0000

This is a very straight forward exploration of how I did animated inputs in my react native form. The demo is given below:

So I have basically three text inputs which I need to animate one after another. I used react native animated modules to do this kind of animation.

In animated modules there is a method called stagger which helps to animate components one after another with successive delays. I just needed to pass my array inputs to this method to implement this animation. The whole code is given below:

React Native Animated Inputs

Saad — Wed, 23 Jan 2019 11:26:23 +0000

This is a very straight forward exploration of how I did animated inputs in my react native form. The demo is given below:

So I have basically three text inputs which I need to animate one after another. I used react native animated modules to do this kind of animation.

// Creating arrays to hold the animation arrays
const arr = [];
for (var i = 0; i < 3; i++) {
  arr.push(i)
};

// Inputs configs
const inputs = [
  {
    placeholder: 'Full Name',
  },
  {
    placeholder: 'Email Address',
  },
  {
    placeholder: 'Password',
  }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.animatedInputValue = [];
    arr.forEach((value) => {
      this.animatedInputValue[value] = new Animated.Value(0)
    });
  }

  componentDidMount() {
    // creating array animations 
    const inputAnimations = arr.map((item) => {
      return Animated.timing(
        this.animatedInputValue[item],
        {
          toValue: 1,
          duration: 1500,
        }
      );
    });
    // Animate each element after 1000 miliseconds
    Animated.stagger(1000, inputAnimations).start();
  }

  render() {
    const animatedInputs = inputs.map((a, i) => {
      return (
        <Animated.View 
          key={i} 
          style={{
            opacity: this.animatedInputValue[i], // attaching animations to the input opacity
          }} 
        >
          <TextInput
            style={[{ borderColor: '#fff', borderBottomWidth: 1, padding: 5, marginBottom: 30 }]}
            selectionColor="#fff"
            placeholder={a.placeholder}
            placeholderTextColor="#fff"
          />
        </Animated.View>  
      );
    });

    return (
      <LinearGradient
        colors={['#642B73', '#C6426E']}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <View style={{ width: '100%', paddingHorizontal: 25  }}>
          {animatedInputs}
        </View>
      </LinearGradient>
    );
  }
}

Splash Screen, Tutorial Screens, Authentication Screens Flow in React-Native

Saad — Mon, 15 Oct 2018 01:16:04 +0000

Recently I had to start up a project from scratch and I had to make a general flow of splash screens, tutorial screens and authentication screens. Today I am going to share how did I create the flow and what difficulties that I faced during the process. The flow is a very common scenario. It goes like this

First the user sees the splash screen for few seconds
If the user opens the app for the first time then the user will go through some tutorial screens.
If not the first time, the user will be redirected to the authentication screen. If not the first we can not show the tutorial screens again to the users.

Splash Screen

In react native splash screen can be added natively and also using react-native-splash-screen package but I just did it in a very simple way by creating a splash screen component in my react-native side. I had to use set timeout to show the splash screen for few seconds and then redirect back to another screen. The splash screen component is given below:

Note that I had to use resetActions to make the stack empty again while redirecting so that the user can not go back again to splash screen using hardware back button.

Starting Screen

This is the screen where I do not render anything but put my logic to redirect the user to the proper places. The component is given below:

I am using async storage to store the value if the app is already launched or not. In the componentDidMount function I am checking first if the alreadyDidLaunch value from async storage is null or not, if null then I am showing a loader in the render and also changing the value of alreadyLaunched at the same time. So after changing the value I am redirecting the user to the tutorial screens.

Next time when the user opens the app again, the alradyDidLaunched value is set to true and the user will be redirected to authentication screens.

Note that the asyncStorage is asynchronous by nature so it takes some time to get the value. While getting the value I am showing a loader in the meantime.

So that’s how I did it. Kindly let me know the better way that I could do this flow than this. Thanks for reading!

Showcasing your work/Promoting yourself

Saad — Thu, 22 Feb 2018 04:34:14 +0000

As a software developer who is just starting, how should one promote himself. What are the important things/tasks that he needs to do consistently to build a good portfolio of their work or theirselves?

Finding Video Duration React Native

Saad — Mon, 22 Jan 2018 10:44:09 +0000

In my recent project I was stuck when the client asked me to set the timelimit of a video. I thought it would be easy, I would just call a built-in function and boom! It would work! But unfortunately I could not find such a function to call.

First of all, to take a video I was using a package called react-native-image-picker, that package has the built in option to set the duration limit of a video while recording a video which is great. But unfortunately it does not have any such option to set the timelimit while a user is selecting and uploading a video from the device gallery. That's where I was stuck.

Then I found out another great package for react-native which gives the meta-data of any media file. The package is called react-native-media-meta. I just have to give the filepath to the package and it would return me meta-data of that particular media file. So everything becomes simple for me now. I tried to do the following:

Get the file path of the media from react-native-image-picker option.
Sending the path to the meta-data package.
Getting back the meta-data which also includes video duration.
Finally using condition to do whatever I want to do.

But then again I was stuck! react-native-image-picker gives back the file path only for the android but not for the ios. So it was only working for android. Eventually I found out the I have to modify the uri substring to get the actual path for ios. Luckily react-native-image-picker supports uri for both ios and android. Then finally I was able to find out the video length using react-native-image picker.

The working sample of code is given below:

// react-native-image-picker options
const options = {
  title: '', // specify null or empty string to remove the title
  cancelButtonTitle: 'Cancel',
  takePhotoButtonTitle: 'Record Video', // specify null or empty string to remove this button
  chooseFromLibraryButtonTitle: 'Upload Video', // specify null or empty string to remove this button
  cameraType: 'back', // 'front' or 'back'
  thumbnail: true,
  durationLimit: 300, // 5 mins - Works only when you are recording
  allowsEditing: true,
  mediaType: 'video', // 'photo' or 'video'
  videoQuality: 'high', // 'low', 'medium', or 'high'
  storageOptions: { // if this key is provided, the image will get saved in the documents/pictures directory (rather than a temporary directory)
    skipBackup: true, // image will NOT be backed up to icloud
    path: 'images' // will save image at /Documents/images rather than the root
  }
};

// after you take the video...
ImagePicker.showImagePicker(options, (video) => {
      const path = video.path; // for android
      const path = video.uri.substring(7) // for ios
      const maxTime = 300000; // 5 min
      MediaMeta.get(path)
        .then((metadata) => {
          if (metadata.duration > maxTime ) {
            Alert.alert(
              'Sorry',
              'Video duration must be less then 5 minutes',
              [
                { text: 'OK', onPress: () => console.log('OK Pressed') }
              ],
              { cancelable: false }
            );
          } else {
            // Upload or do something else
          }
        }).catch(err => console.error(err));
    });

If there is any better option to do this, please let me know :)