After experimenting with expo-av api, Video component and react-native Animations, I found my way to clone the instagram stories.
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.
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
and its done the code would be look like this
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 :