Instagram Stories Clone with React native + Expo

2 min readMay 13, 2020

After experimenting with expo-av api, Video component and react-native Animations, I found my way to clone the instagram stories.

Demo

Ok lets get start, first up is figure the layout of the insta stories, i used to sketch before i code.

After I designed it, its easier for me to translate the layout into coding.

you can run it

I add the gradient on the top with LinearGradient, and i add backgroundColor to the View for handling the next and previous press.

Now start creating the animation bar at the top, hmm the first is if the “content” is an image there wont be a “duration” right? so an if else would be a good idea. So the “content” would be an array with some object, and we need an object to define if the video/image is showed.

We also need to have a state for getting the index of the “content” because the “contents” will be an array.

const [current, setCurrent] = useState(0); // start the index from 0
const [content, setContent] = useState([
{
content: 'uri video/image', 
type: 'image/video', 
finish: 0 // to define if the video or image is showed
},
]);

So we have the content now what?

Set the duration if the “content” is a video using expo-av api.
Set if the image/video loads up then start the animation using state.
looping the “content” use map().
Start working with Animated for the for the Animation bars.

const [end, setEnd] = useState(0); // the duration
const [load, setLoad] = useState(false); 
const progress = useRef(new Animated.Value(0)).current; //set the progress of the animation bar to 0

setting the duration and function play, start, next, previous and close

mapping the “content” and set the flex to the progress

and its done the code would be look like this

try run it

The result

There you have it. I use modal for the container of the instagram stories. If you want just like on the demo get the source code file here: