Today, we’ll use the most common React Native components to build an app that Instagram post create screen. We’ll build create a form for the image feed with the components View, Text, TextInput, and Image. We’ll also add navigation native route home to the new post screen. 

Part One

Create an Instagram home page (post feed ) in React Native clone

Project Folder Structure

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

When you are done with part one then follow step by step.

Install the dependency

yarn add yup formik react-native-gesture-handler @react-navigation/stack @react-navigation/native
or
npm i -s yup formik react-native-gesture-handler @react-navigation/stack @react-navigation/native

after add dependency run command for ios
npx pod-install ios

• creating the file give position src/components/NewPost/AddNewPost.js and add code

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

const AddNewPost = ({
    navigation
}) => {
    return ( <
        View style = {
            styles.container
        } >
        <
        Header navigation = {
            navigation
        }
        /> <
        FormPost / >
        <
        /View>
    )
}

const Header = ({
    navigation
}) => ( <
    View style = {
        styles.headerContainer
    } >
    <
    TouchableOpacity onPress = {
        () => navigation.goBack()
    } >
    <
    Icon style = {
        styles.icon
    }
    name = "chevron-back-outline"
    size = {
        35
    }
    color = "#fff" / >
    <
    /TouchableOpacity> <
    Text style = {
        styles.hederText
    } > NEW POST < /Text> <
    Text > < /Text> <
    /View>
)

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 10
    },
    headerContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    hederText: {
        color: '#fff',
        fontWeight: '700',
        fontSize: 20,
        marginRight: 25
    }
})

export default AddNewPost

• after creating the file give position src/components/NewPost/FormPost.js and add code

import React, {
    useState
} from 'react'
import {
    View,
    Text,
    Image,
    TextInput,
    Button
} from 'react-native'
import * as Yup from 'yup';
import {
    Formik
} from 'formik';
import {
    Divider
} from 'react-native-elements';

const placeholderimage = "http://localhost:8000/images/default/icon.webp";
const upladPostSchema = Yup.object().shape({
    imageUrl: Yup.string().url().required('Url is required'),
    caption: Yup.string().max(2200, 'Caption has reached the character')
})

const FormPost = () => {
    const [thumbnailUrl, setThumbnailUrl] = useState(placeholderimage);
    return ( <
        Formik initialValues = {
            {
                caption: '',
                imageUrl: ''
            }
        }
        onSubmit = {
            (value) => console.log("value", value)
        }
        validationSchema = {
            upladPostSchema
        }
        validateOnMount = {
            true
        } >
        {
            ({
                handleBlur,
                handleChange,
                handleSubmit,
                values,
                errors,
                isValid
            }) => ( <
                >
                <
                View style = {
                    {
                        margin: 20,
                        justifyContent: 'space-between',
                        flexDirection: 'row'
                    }
                } >
                <
                Image source = {
                    {
                        uri: thumbnailUrl ? thumbnailUrl : placeholderimage
                    }
                }
                style = {
                    {
                        width: 100,
                        height: 100
                    }
                }
                />

                <
                View style = {
                    {
                        flex: 1,
                        marginLeft: 12
                    }
                } >
                <
                TextInput style = {
                    {
                        color: "white",
                        fontSize: 20
                    }
                }
                placeholder = {
                    'Write a caption...'
                }
                placeholderTextColor = "gray"
                multiline = {
                    true
                }
                onChangeText = {
                    handleChange('caption')
                }
                onBlur = {
                    handleBlur('caption')
                }
                value = {
                    values.caption
                }
                /> 

                <
                /View>

                <
                /View> <
                Divider width = {
                    0.2
                }
                orientation = "vertical" / >
                <
                TextInput onChange = {
                    (e) => setThumbnailUrl(e.nativeEvent.text)
                }
                style = {
                    {
                        color: "white",
                        fontSize: 18,
                        marginTop: 5
                    }
                }
                placeholder = {
                    'Enter Image url'
                }
                placeholderTextColor = "gray"
                onChangeText = {
                    handleChange('imageUrl')
                }
                onBlur = {
                    handleBlur('imageUrl')
                }
                value = {
                    values.imageUrl
                }
                />  {
                    errors.imageUrl && ( <
                        Text style = {
                            {
                                fontSize: 10,
                                color: 'red'
                            }
                        } > {
                            errors.imageUrl
                        } <
                        /Text>
                    )
                }

                <
                Button onPress = {
                    handleSubmit
                }
                title = {
                    'share'
                }
                disabled = {
                    !isValid
                }
                /> <
                />
            )
        }

        <
        /Formik>
    )
}

export default FormPost

• after creating the file give position src/screen/NewPost/index.js and add code

import React from 'react'
import {
    View,
    Text,
    SafeAreaView,
    StyleSheet
} from 'react-native'
import AddNewPost from '../../components/NewPost/AddNewPost'

const NewPost = ({
    navigation
}) => {
    return ( <
        SafeAreaView style = {
            styles.container
        } >
        <
        AddNewPost navigation = {
            navigation
        }
        /> <
        /SafeAreaView>
    )
}

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

export default NewPost;

• after creating a navigation.js file in the src folder src/navigation.js and adding this code

import React from 'react'
import {
    NavigationContainer
} from '@react-navigation/native'
import {
    createStackNavigator
} from '@react-navigation/stack'
import Home from './screens/Home';
import NewPost from './screens/NewPost';

const Stack = createStackNavigator();
const screenOptions = {
    headerShown: false
}
const SingedInStack = () => ( <
    NavigationContainer >
    <
    Stack.Navigator initailRouteName = "HomeScreen"
    screenOptions = {
        screenOptions
    } >
    <
    Stack.Screen name = "HomeScreen"
    options = {
        {
            gestureEnabled: false
        }
    }
    component = {
        Home
    }
    /> <
    Stack.Screen name = "NewPostScreen"
    options = {
        {
            gestureEnabled: false
        }
    }
    component = {
        NewPost
    }
    /> <
    /Stack.Navigator> <
    /NavigationContainer>
)

export default SingedInStack

• After opening App.js  and updating code 

import React from 'react';
import SingedInStack from './src/navigation';

const App = () => {

    return ( <
        SingedInStack / >
    );
};

export default App;

Note: Update screen/Home/index.js get navigation and pass Header component like that

const Home = ({
    navigation
}) => {
    return ( <
        SafeAreaView style = {
            styles.container
        } >
        <
        Header navigation = {
            navigation
        }
        /> <
        Stories / >
        <
        ScrollView > {
            POSTS.map((post, index) => ( <
                Post post = {
                    post
                }
                key = {
                    index
                }
                />
            ))
        } <
        /ScrollView> <
        BottomTabs / >
        <
        /SafeAreaView>
    )
}

In Header Components update code like that

in Header Components create a GotoNew function to navigate NewPostScreen

const Header = ({
    navigation
}) => {
    const GotoNew = () => {
        navigation.navigate('NewPostScreen');
    }
    return ( <
        View style = {
            styles.container
        } >
        <
        TouchableOpacity >
        <
        Image style = {
            styles.logo
        }
        source = {
            require('../../assets/images/logo.png')
        }
        /> <
        /TouchableOpacity> <
        View style = {
            styles.iconContainer
        } >
        <
        TouchableOpacity onPress = {
            () => GotoNew()
        } >
        <
        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.unreadBadget
        } >
        <
        Text style = {
            styles.unreadBadgetText
        } > 11 < /Text> <
        /View> <
        Icon style = {
            styles.icon
        }
        name = "chatbubble-ellipses-outline"
        size = {
            30
        }
        color = "#fff" / >
        <
        /TouchableOpacity> <
        /View> <
        /View>
    )
}

Hope this tutorial saves your time and makes the Instagram post screen easy in react native. If it helps you in any way, don’t forget to love! Thanks :)