Instagram Stories UI In React-Native


In this tutorial we are going to create Instagram stories in React-Native. It is very simple and give a better ux. Without delay lets start with code.

Create a component stories in your project.

Let’s Break Down It into pieces

At Beginning We have created a scroll view and set it to horizontal direction. So users can slide the stories.

We have use Linear-Gradient library to make our borders gradient. The colors prop takes an array of colors to be gradient. We make its border radius to 100 to make it as a circle.

Next we use wrap Image component inside the linear gradient. The main Part is we make an border in the image component with the same color as the background color. We make the border-width to 2 to make gap between the border and the avatar image.

That's all map the component with your data. Stories Component is now ready.

Full Stack Web Developer, Student