React Native 101 For Designers

Learn how to style React Native components, implement responsive design, handle user input, create animations and more

Or buy now if you are already convinced!
The ability to see visuals that accompany the explanations are beyond helpful.
Anthony Barbato
Lead Product Designer
👉 More testimonials

FULL CURRICULUM

  1. Getting Started
    • 1.1 Welcome
    • 1.2 Create your first React Native app
    • 1.3 What is React Native?
    • 1.4 What are native apps?
    • 1.5 Environment Setup and Coding Exercises
  2. React Native Core Components
    • 2.1 A review of tags in React (web)
    • 2.2 Image vs img
    • 2.3 View and Text
    • 2.4 ScrollView
    • 2.5 Lists
    • 2.6 JavaScript Premier: Destructuring
  3. Style React Native Components
    • 3.1 Styling options in React Native
    • 3.2 StyleSheet
    • 3.3 Combine styles
    • 3.4 styled-components
    • 3.5 Quick review of Flexbox for the web
    • 3.6 Flexbox in React Native
    • 3.7 Flexible and inflexible sizes
    • 3.8 Flex under the hood
  4. Implement Responsive Design
    • 4.1 An overview of responsive design
    • 4.2 Unify screen density
    • 4.3 Adapt to screen sizes with Flexbox
    • 4.4 iPhone X the notch and SafeAreaView
    • 4.5 Adapt to screen sizes with Dimensions API
    • 4.6 Dimension breakpoints
    • 4.7 Build a responsive grid view
    • 4.8 Adapt to device orientation with Dimensions API
    • 4.9 Adapt to device size and orientation with onLayout
    • 4.9.1 JavaScript Premier: Spread operator
    • 4.10 Material on Android Only! - Platform API
    • 4.11 Load platform dependent code by file extension
  5. Handle User Input
    • 5.1 Handle touches: Button and touchable components
    • 5.2 Accept text input: TextInput props
    • 5.3 Accept text input: save the value
    • 5.4 Style TextInput
    • 5.5 Avoid the keyboard!
    • 5.6 Implement drag-and-drop
    • 5.7 Fix a bug in the drag-and-drop code
    • 5.8 Implement pinch-to-zoom
  6. Animations
    • 6.1 Animation options in React Native
    • 6.2 Let the hat fly: LayoutAnimation
    • 6.3 Fly the hat with Animated
    • 6.4 Animate opacity and scale with Animated
    • 6.5 Flip the hat: Animated interpolate (rotate)
    • 6.6 Animation master control: Animated interpolate
    • 6.7 Swipe the hat away: Animated and gestures
    • 6.8 react-native-animatable
    • 6.9 Lottie
  7. Connect Screens Together: Navigation
    • 7.1 Navigation options in React Native
    • 7.2 React Navigation: one-screen navigation
    • 7.3 React Navigation: master-detail screens
    • 7.4 React Navigation: pass around parameters
    • 7.5 React Navigation: tabs
    • 7.6 React Navigation: transition animations
  8. The "Real" React Native
    • 8.1 What? It's not the real React Native?
    • 8.2 Set up XCode and Android Studio
    • 8.3 Eject an Expo project
    • 8.4 Install native extensions

Check out this Tweet thread for a visual guide to every chapter

LEARN WITH FELLOW DESIGNERS

This course is great at explaining React concepts with visuals.
Patrick Multani
Product Designer
👉 More testimonials

FAQs

Why should a designer learn coding?

I encourage you to check out this post to hear other designers’ opinions.

Learning to code will help you become better at design. Armed with a better understanding of how things work, you will find the communication with developers much more efficient. Your design ideas would be more convincing and more respected. You can even design with code.

New skills you learn will open new doors. Trust me, it will be a new world of creativity!

What are the prerequisites of the course?

This course requires basic understanding of React. If you are new to React, check out React 101 for Designers.

What if I am not satisfied?

If you are not completely satisfied with the courses, you can get 100% refund within 30 days of your purchase. No hard feelings!

I have other questions!

Feel free to email me, or tweet at me, anytime!
Hi! I'm Linton!

Super excited to create these courses to help you become a better designer!

I'm a full-stack developer who's learning design. I have 10+ years of experience in mobile, development/design tools and web development. I've been working on React Native since 2015, and building Android apps since 2007 before the first Android phone, HTC G1, was even available. I also contribute to React Navigation project, and write a blog about React.

I love teaching. I've authored a few courses at Treehouse and Lynda. My dark little secret: 😈 creating this course is also my special way to learn all things about design and React -- trying to explain things clearly has taken my understanding of the concepts to a whole new level.

Thrilled to be on this journey with you!

Hey! I'm Beebee!

I'm a designer and animator. I draw inspiration from my dream diaries.

In my dreams, I saw mammoths chasing little bears on a circus. I managed to turn missiles launched from North Korea into splendid firework shows. I convinced the Emperor of Qing Dynasty to stop killing. I chatted with Prince Edwards in Chinese. I was left in awe by the weirdly breathtaking scenes made up of lily pads, lotus, water grass and pale dead fish...

What's in your dreams?

© 2018 jimu Labs, Inc.