Upgrade to Pro — share decks privately, control downloads, hide ads and more …

(Try to) Avoid React Native development being a...

(Try to) Avoid React Native development being a nightmare

Presentation at CEJS, Fortaleza, CE - October 6
(Try to) Avoid React Native development being a nightmare

Write a React Native code and run it perfectly on both iOS and Android sometimes can be a hard task. Various problems, including weird ones, can happen. On this talk, I will show you some of the crazy problems I faced when building React Native apps. I will also show some techniques I use to minimize my headaches and increase my sleeping.

Franzé Jr.

October 06, 2018
Tweet

More Decks by Franzé Jr.

Other Decks in Programming

Transcript

  1. 5 “We do not always get what we want. Sometimes

    life presents us with surprises.” Michael Scott
  2. 6 “Sometimes React Native doesn't do what we expect. Sometimes

    it presents us with surprises.” Franzé Jr.
  3. 11 <Tabs initialPage={Platform.OS === "ios" ? 0 : currentPage} tabBarUnderlineStyle={{

    backgroundColor: Colors.red }} onChangeTab={tab => this.props.setTab(tab.i)} > {this.renderBroadcastTab()} <Tab heading="Live Scoring" textStyle={{ fontSize: 12, color: Colors.black }} activeTextStyle={{ color: Colors.black, fontSize: 12 }} activeTabStyle={{ backgroundColor: Colors.white }} tabStyle={{ backgroundColor: Colors.white }} style={{ backgroundColor: Colors.black }} > Initial page is different for Android and iOS The error was happening only on Android
  4. 18

  5. 19 > Josh: “How’s it going?” > Me: “Fatigued.” >

    Josh: “Family?” > Me: “No, React Native.”
  6. 21

  7. 22

  8. 23

  9. 24

  10. 25

  11. 31 Platform ♥ const iPhoneX = height === 812 ||

    width === 812 if (Platform.OS === 'ios') { statusBarHeight = iPhoneX ? 35 : 20 }
  12. 32 Platform ♥ if (Platform.OS == "ios") { if (aspectRatio

    >= 0.65) { ... } } if (isABadSamsungDevice()) { ... }
  13. 34

  14. 35

  15. 36

  16. 37

  17. 40

  18. 41

  19. 45

  20. 47

  21. 48

  22. 50

  23. 51

  24. 53

  25. 59 function decodeSection( section: ApiSection, questions: List<QuestionType> ): SectionType {

    return new SectionType({ id: section.id, name: section.name, content: section.content, order: section.order, questions: List( questions.filter(question => { return question.get("sectionId") === section.id; }) ), persisted: true }); }
  26. 60 function decodeQuestion(apiQuestion: ApiQuestion): QuestionType { const questionDependency = decodeQuestionDependency(

    apiQuestion.question_dependency ); let question = new QuestionType({ id: apiQuestion.id, key: apiQuestion.key, label: apiQuestion.label, content: apiQuestion.content, type: apiQuestion.question_type, validateAs: apiQuestion.validate_as, order: apiQuestion.order, required: apiQuestion.required, placeholder: apiQuestion.placeholder, sectionId: apiQuestion.section_id, choices: decodeChoices(apiQuestion.choices), questionDependency: questionDependency, persisted: true }); return question.set("metadataFields", metadataFields); }
  27. 68

  28. 71