RN Cross Platform Presentation

Slides from ReactJS PDX Meetup about React Native being cross platform, as well as some general iOS => Android details.

Transcript

1. React  Native Finally  Cross  Platform by Jason  Brown
2. General  Cross  Platform • PhoneGap/Cordova • Ionic • Titanium • Xamarin • NativeScript • React  Native • Objective-­‐C  /  Java • Many  Others  !
3. What  about  Windows  Phones • Does  anyone  actually  care? • Project  Islandwood • https://dev.windows.com/en-­‐us/bridges • https://github.com/Microsoft/WinObjC • https://dev.windows.com/en-­‐us/bridges/android
4. iOS  vs  Android https://medium.com/swlh/rookie-­‐guide-­‐how-­‐to-­‐convert-­‐ios-­‐ui-­‐to-­‐android-­‐3cc1421d1e1f
11. iOS  vs  Android  – React  Native • Don’t  just  convert  it • Make  Android  layouts  more  vertical  and  iOS  a  mix • Design  your  images  and  supply  a  the  appropriate  sizes  for  the   different  density  screens. • Material  Design  :/
12. Images  for  different  density (<yourapp>/android/app/src/main/res) • drawable-­‐mdpi (1x) • drawable-­‐hdpi (1.5x) • drawable-­‐xhdpi (2x) • drawable-­‐xxhdpi (3x)
13. Different  components Use  the  platform  utility  from  React  Native Add  .android  or  .ios for  specific  files
14. Material  Design • Eh?  https://github.com/xinthink/react-­‐native-­‐material-­‐kit
15. React  Native  – How  and  Why • Main  Thread,  JavaScript  thread,  another  thread  for  layout,  and  1  for   each  bridged  module! • (Almost)  Everything  is  Async.   • Flexbox Layout!  Only  Ionic  also  supports  flexbox. • Community • “Learn  Once.  Write  Anywhere”
16. React  Native  -­‐ Community • https://rnplay.org/ • http://exponentjs.com/ • http://react.parts/native • http://react.rocks/
17. Production  Ready? • Yes-­‐ish! • https://facebook.github.io/react-­‐native/showcase.html
18. Demo  App https://gist.github.com/brentvatne/2cd6d5d5f92e907e9630
19. Meetup Questions/State  of  React  Native • .13-­‐rc  Just  released  today • Different  UI  elements • Debugging • Differences  between  iOS  vs  Android  code • Organizing  RN  Projects • Integration  with  Rails • Custom  Native  Modules
20. The  End  -­‐ Questions? Jason  Brown Twitter:  @browniefed Github:  @browniefed Reactiflux Slack:  @browniefed Email:  browniefed@gmail.com Website:  www.browniefed.com