(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.

Transcript

1. 1 (Try to) Avoid React Native @franzejr development being a nightmare
2. 2 WHO AM I ? @franzejr
3. 3 “Write it once, run it perfectly on any device” Beginner React Native developer
4. 4 “Learn once, build it anywhere” Smart React Native developer
5. 5 “We do not always get what we want. Sometimes life presents us with surprises.” Michael Scott
6. 6 “Sometimes React Native doesn't do what we expect. Sometimes it presents us with surprises.” Franzé Jr.
7. 7 What we will talk about REAL PROBLEMS POTENTIAL SOLUTIONS
8. 8 REAL PROBLEMS
9. 9 Shitty Libraries Native third party libraries JavaScript fatigue
10. 10 Rendering Problems Not something React native specific
11. 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
12. 12 yarn add shitty-library
13. 13 React Native iOS Android JavaScript
14. 14 Adding new Libraries iOS project Android project + = yarn add shitty-library
15. 15 \
16. 16 Imagine…
17. 17 JavaScript developers implementing iOS + Android
19. 19 > Josh: “How’s it going?” > Me: “Fatigued.” > Josh: “Family?” > Me: “No, React Native.”
20. 20 Various Rendering problems iPhone X, iPhone 7, Samsung
26. 26 Production only problems
27. 27 Native features problems.
28. 28 SOLUTIONS
29. 29 FAIL FIRST
30. 30 Platform ♥ statusBar: { backgroundColor: Colors.widdee_orange, display: Platform.OS === 'ios' ? 'flex' : 'none', height: statusBarHeight }
31. 31 Platform ♥ const iPhoneX = height === 812 || width === 812 if (Platform.OS === 'ios') { statusBarHeight = iPhoneX ? 35 : 20 }
32. 32 Platform ♥ if (Platform.OS == "ios") { if (aspectRatio >= 0.65) { ... } } if (isABadSamsungDevice()) { ... }
33. 33 CHECK YOUR LIBRARIES
38. 38 KEEP YOUR LIBRARIES UPDATED
39. 39 LIBRARIES COMPONENTS
42. 42 TEAM MULTIDISCIPLINAR
43. 43 Test TEST YOUR CODE Test Test
44. 44 Tablets DIVERSE DEVICES iPhones Samsung Lenovo LG . . .
46. 46 Ignite
49. 49 Continuous Deployment
52. 52 Crash Reports
54. 54 CodePush
55. 55 Debug release locally Automated Production release
56. 56 OPINIONATED IDEAS
57. 57 YOUR API DATA
58. 58 Shitty API
59. 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 }); }
60. 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); }
61. 61 GraphQL
62. 62 GraphQL Types Documentation
63. 63 Check what is coming from your API
64. 64 Attention to your Sagas!
65. 65 Attention to your Redux!
66. 66 Attention to your Pure Components!
67. 67 REMEMBER
69. 69 ONE CODE BASE
70. 70 SHORT DEVELOPMENT TIME
72. 72 Thanks!