Instagram Stories Clone with React native + Expo

Nur Fikri
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.

layout

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

you can run it
it will be look like this

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?

  1. Set the duration if the “content” is a video using expo-av api.
  2. Set if the image/video loads up then start the animation using state.
  3. looping the “content” use map().
  4. 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:

Try it on Expo :

https://expo.io/@kidingki/instagramstoryclone

I know there are many ways to optimize this, this is my best way of doing this for now.

Thank you❤️.

I’ll appreciate that clap! 👏

Follow me on social media :

https://www.instagram.com/kikidding/

https://twitter.com/kikiding/

--

--

Nur Fikri
Nur Fikri

Responses (2)