#2 Shared Element Transitions in React Native & M1

👋 Hello Dev!

I hope this newsletter finds you in your best health.

The first month of 2021 is almost over and I have two new posts to share on React Native. Let’s get started!

In the last letter, I shared with you what’s coming next, well here it is.

How to use Shared Element Transition with React Navigation v5

Transitions between different views or activities involve enter and exit transitions that animate the entire view hierarchies independent of each other. There are times when two different views in continuity have common elements. Providing a way to transition these common elements from one view to the second view and back, emphasizes the continuity between transitions. The nature of these transitions maintain focus for the end-users on the content and provides a seamless experience. A Shared Element Transition determines how two different views share one or more elements to maintain the focus and experience.

This post uses:

  1. React Navigation v5

  2. react-navigation-shared-element

  3. react-native-shared-element

  4. Images from Unsplash

  5. Delayed loading example using react-native-animatable 🔥

  6. Expo SDK 40

➡️ Read the complete post here.

How to remove bottom tab bar border in React Navigation

Navigation plays an important role in mobile applications and the React Navigation library does an awesome job in providing a completely customizable interface for utilizing different navigation patterns to React Native apps.

In this post, let’s explore how to remove the border from the Tab bar using ReactNavigation v5 library.

➡️ Read the complete post here.

I recently upgraded from Macbook Air 2017 to Macbook Pro with an M1 chip. My four year old Macbook Air was giving up.  Find out more in this post, how I have managed to set it up for Web Development and React Native in general.

➡️ Read the complete post here.

🙏 Thank you so much for reading this letter.
Happy coding!

Twitter - Blog - Dev.to - Buy me a coffee