Skip to content

Instantly share code, notes, and snippets.

@yonibot

yonibot/gist:e12956293877d6c43aded1ff66b74bf5

Last active September 2, 2016 08:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yonibot/e12956293877d6c43aded1ff66b74bf5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yonibot/e12956293877d6c43aded1ff66b74bf5 to your computer and use it in GitHub Desktop.
Download ZIP
RN UI Design Talk proposal
Raw
gistfile1.txt
1. Step By Step flexbox lesson
a. Short intro (2 mins)- The benefits: Flexbox solves a lot of design issues using much less code via relative size, positioning and alignment. Useful for mobile (different device sizes and proportions).
b. Properties (8 mins) - Goal: everyone will know how to use each property by heart. Step by step approach to each Flexbox property supported on RN along with helpful tips to remember each attribute.
i. Aids: Slides showing the names of each property, simple definition, attribute options, and a diagram.
ii. Material based on my blog post - https://medium.com/@yoniweisbrod/a-mini-course-on-react-native-flexbox-2832a1ccc6
c. Real Life application (8-10 mins) -
i. 3-4 examples of Android or iOS interfaces with slides of each design and the code behind it.
1 - Functional: Sticky footer with list view (using flex)
2-4 Design: A few design examples (similar to Dotan's RN Katas library -https://github.com/jondot/ReactNativeKatas ).
Will discuss how I would tackle the design while looking at a slide of the design, and then look at the code behind it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment