Today, we’ll use the most common React Native components to build an app that Instagram feed page. We’ll build the main image feed with the components View, Text and Image. We’ll also build a comments sections using ScrollView.

Project Folder Structure

android 
ios 
node_modules 
src 
   assets 
        images 
             insta.png //header logo file 
    components 
        Home 
           Header.js 
           Post.js 
           Stories.js 
     data // dummy json 
         post.js 
         users.js 
     screens 
         Home 
             index.js 
app.json 
App.js 
babel.config.js 
index.js 
metro.config.js 
package.json

• Creating New Project run this command

     npx react-native init <Project-name>
     cd <Project-name>

• After then create a file in this path src/components/Home/Header.js and add code here:

import React from 'react'
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons';

const Header = () => {
    return ( <
        View style = {
            styles.container
        } >
        <
        TouchableOpacity >
        <
        Image style = {
            styles.logo
        }
        source = {
            require('../../assets/images/insta.jpeg')
        }
        /> <
        /TouchableOpacity> <
        View style = {
            styles.iconsContainer
        } >
        <
        TouchableOpacity >
        <
        Icon style = {
            styles.icon
        }
        name = "add-circle-outline"
        size = {
            30
        }
        color = "#fff" / >
        <
        /TouchableOpacity> <
        TouchableOpacity >
        <
        Icon style = {
            styles.icon
        }
        name = "heart-outline"
        size = {
            30
        }
        color = "#fff" / >
        <
        /TouchableOpacity> <
        TouchableOpacity >
        <
        View style = {
            styles.unreadBadge
        } >
        <
        Text style = {
            styles.unreadBadgetext
        } >
        11 <
        /Text> <
        /View> <
        Icon style = {
            styles.icon
        }
        name = "chatbubble-ellipses-outline"
        size = {
            30
        }
        color = "#fff" / >
        <
        /TouchableOpacity> <
        /View> <
        /View>
    )
}
const styles = StyleSheet.create({
    container: {
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        marginHorizontal: 20
    },
    iconsContainer: {
        flexDirection: 'row',
        color: 'white'
    },
    logo: {
        width: 100,
        height: 80,
        resizeMode: 'contain'
    },
    icon: {
        width: 30,
        height: 30,
        marginLeft: 10
    },
    unreadBadge: {
        position: 'absolute',
        backgroundColor: '#FF3250',
        right: -5,
        top: -5,
        borderRadius: 25,
        width: 25,
        height: 18,
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 100
    },
    unreadBadgetext: {
        color: 'white',
        fontWeight: '600'
    }
})

export default Header

• After then create a file in this path src/components/Home/Stories.js and add code here:

import React from 'react'
import {
    View,
    Text,
    ScrollView,
    Image,
    StyleSheet
} from 'react-native'
import {
    USERS
} from '../../data/users'

const Stories = () => {
    return ( <
        View style = {
            {
                marginBottom: 13
            }
        } >
        <
        ScrollView horizontal = {
            true
        }
        showsHorizontalScrollIndicator = {
            false
        } > {
            /*  */ } {
            USERS.map((story, index) => ( <
                View key = {
                    index
                }
                style = {
                    {
                        alignItems: 'center',
                        justifyContent: 'center'
                    }
                } >
                <
                Image source = {
                    {
                        uri: story.image
                    }
                }
                style = {
                    styles.story
                }
                /> <
                Text style = {
                    {
                        color: 'white'
                    }
                } > {
                    story.user.length > 11 ? story.user.slice(0, 10).toLowerCase() + '... ' : story.user.toLowerCase()
                } <
                /Text> <
                /View>
            ))
        } <
        /ScrollView> <
        /View>
    )
}

const styles = StyleSheet.create({
    story: {
        width: 70,
        height: 70,
        marginLeft: 6,
        borderWidth: 3,
        borderColor: '#ff8501',
        borderRadius: 70,
    }
})

export default Stories

After then create a file in this path src/components/Home/Post.js and add code here:

import React from 'react'
import {
    View,
    Text,
    StyleSheet,
    Image,
    TouchableOpacity,
    ViewBase
} from 'react-native'
import {
    Divider
} from 'react-native-elements';
import Icon from 'react-native-vector-icons/Ionicons';
const Post = ({
    post
}) => {
    return ( <
        View style = {
            {
                marginBottom: 30
            }
        } >
        <
        Divider width = {
            1
        }
        orientation = "vertical" / >
        <
        PostHeader post = {
            post
        }
        /> <
        PostImage post = {
            post
        }
        /> <
        View style = {
            {
                marginHorizontal: 15,
                marginTop: 10
            }
        } >
        <
        PostFooter post = {
            post
        }
        /> <
        /View> <
        PostLikes post = {
            post
        }
        /> <
        PostCaption post = {
            post
        }
        /> <
        PostCommentSection post = {
            post
        }
        /> <
        PostComment post = {
            post
        }
        />

        {
            /* <Text style={{color:'white'}}>Post</Text> */ } <
        /View>
    )
}

const PostHeader = ({
    post
}) => ( <
    View style = {
        {
            flexDirection: 'row',
            justifyContent: 'space-between',
            margin: 5,
            alignItems: 'center'
        }
    } >
    <
    View style = {
        {
            flexDirection: 'row',
            alignItems: 'center'
        }
    } >
    <
    Image source = {
        {
            uri: post.imageUrl
        }
    }
    style = {
        styles.story
    }
    /> <
    Text style = {
        {
            color: 'white',
            marginLeft: 5,
            fontWeight: '700'
        }
    } > {
        post.user
    } <
    /Text> <
    /View> {
        /* <ion-icon name="ellipsis-vertical-circle-outline"></ion-icon> */ }

    <
    TouchableOpacity >
    <
    Icon style = {
        styles.icon
    }
    name = "ellipsis-horizontal-outline"
    size = {
        20
    }
    color = "#fff" / >
    <
    /TouchableOpacity> <
    /View>
)

const PostImage = ({
    post
}) => ( <
    View style = {
        {
            width: '99%',
            height: 450
        }
    } >
    <
    Image source = {
        {
            uri: post.imageUrl
        }
    }
    style = {
        {
            height: '100%',
            resizeMode: 'cover'
        }
    }
    /> <
    /View>

)

const PostFooter = ({
    post
}) => ( <
    View style = {
        {
            flexDirection: 'row'
        }
    } >
    <
    View style = {
        {
            flexDirection: 'row',
            width: "32%",
            justifyContent: 'space-between'
        }
    } >
    <
    TouchableOpacity >
    <
    Icon name = "heart-outline"
    size = {
        25
    }
    color = "#fff" / >
    <
    /TouchableOpacity> <
    TouchableOpacity >
    <
    Icon name = "chatbubble-outline"
    size = {
        25
    }
    color = "#fff" / >
    <
    /TouchableOpacity> <
    TouchableOpacity >
    <
    Icon style = {
        styles.shareicon
    }
    name = "send-outline"
    size = {
        25
    }
    color = "#fff" / >
    <
    /TouchableOpacity> <
    /View> <
    View style = {
        {
            flex: 1,
            alignItems: 'flex-end'
        }
    } >
    <
    TouchableOpacity >
    <
    Icon name = "bookmark-outline"
    size = {
        25
    }
    color = "#fff" / >
    <
    /TouchableOpacity> <
    /View>

    <
    /View>
)
const PostLikes = ({
    post
}) => ( <
    View style = {
        {
            flexDirection: 'row',
            marginTop: 4
        }
    } >
    <
    Text style = {
        {
            color: 'white',
            fontWeight: '600'
        }
    } > {
        post.likes.toLocaleString('en')
    }
    likes < /Text> <
    /View>
)

const PostCaption = ({
    post
}) => ( <
    View style = {
        {
            flexDirection: 'row',
            marginTop: 5
        }
    } >
    <
    Text style = {
        {
            color: 'white',
            flexWrap: 'wrap',
            flex: 1
        }
    } >
    <
    Text style = {
        {
            fontWeight: '600'
        }
    } > {
        post.user
    } < /Text> <
    Text > {
        post.caption
    } < /Text> <
    /Text> <
    /View>
)


const PostCommentSection = ({
    post
}) => ( <
    View style = {
        {
            flexDirection: 'row',
            marginTop: 5
        }
    } > {
        !!post.comments.length && ( <
            Text style = {
                {
                    color: 'gray',
                    flexWrap: 'wrap',
                    flex: 1
                }
            } >
            View {
                post.comments.length > 1 ? 'all' : ''
            } {
                post.comments.length
            } {
                post.comments.length > 1 ? 'commnets' : 'comment'
            } <
            /Text>
        )
    } <
    /View>
)
const PostComment = ({
    post
}) => ( <
    > {
        post.comments.map((comment, index) => ( <
            View key = {
                index
            }
            style = {
                {
                    flexDirection: 'row',
                    marginTop: 5
                }
            } >
            <
            Text style = {
                {
                    color: 'white',
                    flexWrap: 'wrap',
                    flex: 1
                }
            } >
            <
            Text style = {
                {
                    fontWeight: '600'
                }
            } > {
                comment.user
            } < /Text> <
            Text > {
                comment.comment
            } < /Text> <
            /Text> <
            /View>
        ))
    } <
    />
)


const styles = StyleSheet.create({
    story: {
        width: 35,
        height: 35,
        marginLeft: 6,
        borderWidth: 1.6,
        borderColor: '#ff8501',
        borderRadius: 35,
    },
    icon: {
        width: 20,
        height: 20,
        marginLeft: 10
    },
    shareicon: {
        transform: [{
            rotate: '320deg'
        }],
        marginTop: -3,
    }
})

export default Post

After then create a file in this path src/screens/Home/index.js and add code here:

import React from 'react';
import {
    Text,
    StyleSheet,
    SafeAreaView,
    ScrollView
} from 'react-native';
import BottomTabs from '../../components/BottomTabs/BottomTabs';
import Header from '../../components/Home/Header';
import Post from '../../components/Home/Post';
import Stories from '../../components/Home/Stories';
import {
    POSTS
} from '../../data/post';
const Home = () => {
    return <SafeAreaView style = {
            styles.container
        } >
        <
        Header / >
        <
        Stories / >
        <
        ScrollView > {
            POSTS.map((post, index) => ( <
                Post post = {
                    post
                }
                key = {
                    index
                }
                />
            ))
        } <
        /ScrollView> <
        BottomTabs / >
        <
        /SafeAreaView>

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'black',
        flex: 1,
    }
})
export default Home;

• last step open App.js and add code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';

import Home from './src/screens/Home';

const App = () => {
    return ( <
        Home / >
    );
};

export default App;

here a static data js file 

users.js

export const USERS = [{
        user: 'codesolution',
        image: 'https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ'
    },
    {
        user: 'codesolution',
        image: 'https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ'
    }
]

post.js

import {
    USERS
} from "./users";

export const POSTS = [{
        imageUrl: "https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ",
        user: USERS[0].user,
        likes: 7870,
        caption: "Codesolution here developerm learn and share.",
        profile_picture: USERS[0].image,
        comments: [{
                user: "codesolution",
                comment: "Codesolution application nice "
            },
            {
                user: "codesolution",
                comment: "Codesolution application nice "
            },
            {
                user: "codesolution",
                comment: "Codesolution application nice "
            }
        ]
    },
    {
        imageUrl: "https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ",
        user: USERS[0].user,
        likes: 7870,
        caption: "Codesolution here developerm learn and share.",
        profile_picture: USERS[0].image,
        comments: []
    },
    {
        imageUrl: "https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ",
        user: USERS[0].user,
        likes: 7870,
        caption: "Codesolution here developerm learn and share.",
        profile_picture: USERS[0].image,
        comments: [{
                user: "codesolution",
                comment: "Codesolution application nice "
            },
            {
                user: "codesolution",
                comment: "Codesolution application nice "
            },
            {
                user: "codesolution",
                comment: "Codesolution application nice "
            }
        ]
    },
]

Next

New Post screen and navigation home to new post screen click here

Thanks