React Native Instagram Page Transition

Warning This is an experimental project. I have always been impressed with Instagram's iOS page transitions. I tried to implement the same with the following technologies. The result was much better than I expected. There are still some things to do to provide the same experience. Using it in production is not recommended.

Stack

• Expo (SDK 44)
• TypeScript
• React Native Reanimated
• React Native Gesture Handler
• FlashList
• React Native Fast Image
• SWR for requests
• Unsplash API for awesome images.

Want to try?

If you want to try this on your device, you can install and run the app in a few seconds with the following commands;

Install the packages:

yarn install

Run the app with the following command.

Warning Be sure that Expo CLI is installed.

yarn ios

That's it, enjoy 🤞🏽

Unsplash API

In this project, I used Unsplash API to get awesome images. To try on your own, you'll need to create and app on Unsplash dashboard and get the Client ID and replace that id in the /constants/api.ts with YOUR_UNSPLASH_CLIENT_ID.

Challanges / Todo's

• Integrate with the transition api from Reanimated.
• Custom list inside details screen. Just like the Instagram, in every detail screen, we can implement new lists by fetching another query. Currently, it's just rendering FlashList with only selected image.
  • After scrolling down in details list, when close the details screen, we can do show first image by fading or change the original one with the last image scrolled.
• Integrating this with the React Navigation would be super cool.

License

The source code is made available under the MIT license.

Show Your Support

If you like this project, please give a star and follow me on Github for more 🤩