Snapchat Interface in React Native


Spencer Carli

Developer, cat dad, and devout pizza lover. Teaching at React Native School and building apps with Handlebar Labs.

Last Updated: June 29, 2016

I’m kind of back to my routine this week and I wanted to make sure I dropped a new post for everyone before moving next week (likely a delay/no post then). I didn’t have the time to dive into an in depth tutorial but I do have some code to share!

I wanted to see what it was like to try and recreate the Snapchat menu system in React Native, without any external libraries, to get a better understanding of what a ScrollView is capable of. I also tried out react-native-camera for the fun of it. Here’s a short video of what I built:

Code Overview

If you want to poke around the code a bit I’ll give you some pointers. The actual app code starts in app/index.js where I’m requiring my “routes” and my Menu component.

The Menu component is where the bulk of the cool stuff is (shout out to Nick Wientge who wrote the initial version of this). It simply sets some defaults around the basics of a ScollView. Specifically the following:

  1. Enables paging
  2. Determines if it should scroll vertically or horizontally
  3. Turns off bouncing (on iOS)
  4. Allows us to pass an index to start with that isn’t the first route
  5. And changes some styles depending on which way we’re scrolling!

You can get the source here. I think this would be fun to push forward as time progresses. Are there any other interfaces you would like to see recreated in React Native?


React Native School Logo

React Native School

Want to further level up as a React Native developer? Join React Native School! You'll get access to all of our classes and our private Slack community.