Artur Chabera

Artur Chabera

Senior iOS Developer at Snowdog

How to recreate Snapchat's navigation on iOS? Part 3

In Part 3 of our tutorial on recreating Snapchat's navigation on iOS, we're going to explore the use of custom navigation buttons. Unlike the standard UITabBar buttons, these buttons have a unique design with custom height, animated transparency, and full-screen UX. By creating layout constants and adding a container for the buttons controller, we can achieve the desired look and feel of our app's navigation. With this final touch, our app will provide a fully immersive experience for users.

How to recreate Snapchat's navigation on iOS? Part 2

In Part 1 of this tutorial, we explored how to replicate the horizontal axis (X) of Snapchat's navigation system. Now, in Part 2, we'll delve into the vertical axis (Y) and learn how to incorporate it into our iOS app. While the vertical axis may be a bit more challenging to develop, it's a crucial component of Snapchat's navigation system and allows for seamless navigation between different screens. To begin, we'll need to understand the basic structure of the vertical axis and how it interacts with the horizontal axis. This includes understanding the concept of "pages" and "tabs," as well as how to create a custom tab bar controller to support our navigation system. Throughout this tutorial, we'll also explore some common issues that can arise when implementing the vertical axis and how to address them. By the end of Part 2, you'll have a thorough understanding of how to develop both the horizontal and vertical axes of Snapchat's navigation system, and be well on your way to creating your own immersive and intuitive navigation system for your iOS app.

How to recreate Snapchat's navigation on iOS? Part 1

Snapchat has revolutionized the way we communicate through social media. With its unique features such as filters, lenses, and Stories, it has become one of the most popular apps in the world. However, what sets it apart from its competitors is its intuitive and immersive navigation system. When I first started using Snapchat, I was instantly drawn to the way the app's navigation felt so natural and fluid. As a developer, I was curious to explore how this navigation system works and see if I could recreate it myself. While there are various libraries available that can reproduce Snapchat's navigation, I wanted to take a deeper dive into the development process and uncover what's happening behind the scenes. So, if you're like me and want to discover the magic behind Snapchat's navigation system, this blog series is for you. We'll explore the different components that make up Snapchat's navigation and learn how to recreate them step-by-step. Whether you're a seasoned developer or just starting out, this series will provide you with the knowledge and skills you need to develop a similar navigation system in your own app. So, let's get started and see what's under the hood of Snapchat's navigation!