Snapchat Interface in React Native
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:
- Enables paging
- Determines if it should scroll vertically or horizontally
- Turns off bouncing (on iOS)
- Allows us to pass an index to start with that isn’t the first route
- 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?
Want me to let you know as soon as a new blog post is out? Sign up for my email list! I’ll send you a value packed email every week.
