Creating a simple portfolio card in React Native

Hey all, welcome back to my react native series. Today we will be creating a simple portfolio card to understand more about styling. Feel free to choose the context of the card as per your interest.

Before you start, here is the link to my previous article to get your concepts clear.

PortfolioCard

First and foremost, I will create a new file named PortfolioCard.tsx and import that into App.tsx file. I hope you can do this now on your own.

So let me first visualize what I am going to create so that you will understand what I am coding easily.

So now let's see how we can achieve the above structure step by step:

As you can see we have all our content in a card so we will first create a view that will act as a card.
Then inside that view, we have 4 sections namely profile, name, intro, and social accounts.
For the profile section, we will use <Image />. We will give height and width to the image.
For name, intro, and connect with me, we will use <Text>. So let's first see how we can code this.

import { StyleSheet, Text, View, Image } from 'react-native'
import React from 'react'

export default function PortfolioCard1() {
  return (
    <View>
      <Text style={styles.heading}>My Portfolio</Text>
      <View style={styles.card}>
        <Image 
            source={require('../images/Profile.jpg')}
            alt="Profile"
            style={styles.profile}
        />
        <View style={styles.contentView}>
            <Text>Shrutika Dorugade</Text>
            <Text>I am a Software Engineer at Accenture having decent knowledge of Spring Boot and MERN Stack</Text>
            <Text>Connect with me via</Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
    heading: {
        fontSize: 40,
        paddingHorizontal: 10,
        paddingBottom: 10,
        color: '#6A1B4D'
    },
    profile: {
        height: 300,
        width: 350,
    },
    card: {},
    contentView: {}
})

With this our card is looking something like the below:

I know this is not looking too good. So let's first style these elements then we will see the social accounts part.

I would recommend you please follow me along as I won't be attaching the result after adding each style otherwise the article would become too long. So kindly see the result on your app.

Firstly, I would like to give some border and margin to my card.

card: {
    borderWidth: 2,
    margin: 20,
    borderColor: 'red'
}

Now I would like to give some margin to contentView so that there will be some space between the border of the card and the text inside contentView.

contentView: {
    marginHorizontal: 30,
    marginVertical: 20
}

Now let's change the font size of all text sections according to their importance and also add bottom padding to have some space in between.

name: {
    fontSize: 30,
    paddingBottom: 5
},
intro: {
    fontSize: 16,
    paddingBottom: 30
},
connect: {
    fontSize: 18,
    paddingBottom: 20
}

Note: Please apply these styles to all text sections appropriately.

Now, what remained last? The social accounts section. So as you can see we are planning to use icons of social media apps in a row. For that, we need to use flex. Now here we need to have one View and all our images will go inside that View. Let's see what our code looks like.

<View style={styles.socialMediaHub}>
    <Image 
        source={require('../images/linkedin.png')}
        alt="LinkedIn"
        style={styles.account}
    />
    <Image 
        source={require('../images/instagram.png')}
        alt="Instagram"
        style={styles.account}
    />
    <Image 
        source={require('../images/hashnode.png')}
        alt="Hashnode"
        style={styles.account}
    />           
</View>

This will display our social media icons one after the other. They are not looking too good. So let's add some styling:

socialMediaHub: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly'
},
account: {
    height: 50,
    width: 50
}

I added flex property to View and have specified the value of justifyContent as 'space-evenly' to have our icons at equal distances.
Also have given height and width to our app images so that they will look like an icon.

That's it, my friends. This is enough to create a pretty much good portfolio card. Let me show you the final card.

I hope friends, this helped you to understand a bit more about the styling part in React Native.

Improving the styling part requires a lot more practice. Even I am not a pro designer. I am also practicing and learning. So try to build more cards and structures that come into your mind and style them in your own way. You will eventually be able to create attractive apps.

Special thanks to Hitesh Choudhary !!!