Travel App UI Part 1 - Figma to React Native

This is the first video in the Travel App UI Series - where we turn Figma designs into React Native apps!

What you’ll learn: Setting up a react native project from scratch, Adding custom fonts to a react native project using google fonts, Adding colors to a react native project, Adding custom images from Figma, Using the Stack and Tab
Navigators from react native navigation, Moving between different screens in react native, Styling tons of different react native components and more!

Link to source code - https://github.com/mattfrances/TravelAppUI
Link to Figma design - https://www.figma.com/file/pjHG7bwiYQHoWzjDI84pu2/Travel-App-UI?node-id=0%3A1

Link to design video - https://youtu.be/T1wg4ekz9_c
Link to Part 2 - https://youtu.be/sjYDLOMMjGM

❤️ Thanks for watching
👍 If you liked this video, be sure to give it a thumbs up
👊 Want to see more of this? Smash that subscribe button
📢 Let me know in the comments what you’d like to learn!

Follow me:
Twitter - https://twitter.com/madewithmatt
YouTube - https://www.youtube.com/channel/UCHgS0H3T3459H1e9QWK_Ezg?sub_confirmation=1

Dribble Inspiration: https://dribbble.com/shots/11141145-Travel-service-Mobile-App

Intro: (0:00)
Setting up the react native project: (0:14)
Adding our Figma images into our project: (0:38)
Creating our data lists (discoverData): (1:27)
Creating our data lists (activitiesData): (4:13)
Creating our data lists (learnMoreData): (5:30)
Creating our data lists (discoverCategoriesData): (6:46)
Adding colors from Figma: (7:57)
Adding our custom Google Fonts: (9:20)
Figuring out what we need for navigation: (10:48)
Downloading React Navigation: (11:46)
Adding React Native Vector Icons: (13:22)
Creating components for the project: (14:15)
Starter code for App.js: (16:05)
Setting up our Tab Navigator and Stack Navigator: (17:58)
Building our Tab Navigator: (18:20)
Building our Stack Navigator: (20:31)
Styling our Tab Navigator bar: (21:29)
Adding our icons to our Tab Navigator: (23:42)
Removing text under the icons in our Tab Navigator: (25:52)
Testing out our navigation: (26:10)
Removing default headers on all pages: (27:32)
DONE 🎉: (28:18)

#react native

Travel App UI Part 1 - Figma to React Native