Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Easy Way to Improve ReactNative
Search
Sergio Utama
July 12, 2018
Programming
0
270
Easy Way to Improve ReactNative
5 easy way to improve ReactNative project
Sergio Utama
July 12, 2018
Tweet
Share
More Decks by Sergio Utama
See All by Sergio Utama
From try! Swift Tokyo 2017
sergioutama
0
64
Migrating to Swift 3
sergioutama
0
55
Taming AutoLayout
sergioutama
0
47
10 Things I learned while freelancing
sergioutama
0
59
iOS Video Player
sergioutama
0
83
Tribute to Mantle
sergioutama
0
29
Mobile Analytics
sergioutama
0
46
Other Decks in Programming
See All in Programming
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
510
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
12
4.6k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
930
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
チームの境界をブチ抜いていけ
tokai235
0
180
CSC509 Lecture 06
javiergs
PRO
0
260
One Enishi After Another
snoozer05
PRO
0
110
私はどうやって技術力を上げたのか
yusukebe
44
19k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
All About Angular's New Signal Forms
manfredsteyer
PRO
0
180
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing Experiences People Love
moore
142
24k
Faster Mobile Websites
deanohume
310
31k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
450
RailsConf 2023
tenderlove
30
1.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Transcript
Easy way to improve your ReactNative Project by @sergioutama @sergioutama
$ whoami Sergio Utama Just your friendly programmer @sergioutama
Don't Use ReactNative @sergioutama
The end @sergioutama
Just kidding ! @sergioutama
1. Fix your project structure @sergioutama
Why — Easier to navigate and maintain — Mental image
how code should be structured @sergioutama
How ~ components for reusable globaly ~ Split based on
screen OR module ~ each screen has its component @sergioutama
2. Stop using arrow function @sergioutama
Arrow function ( () => {}) is a necessary evil
of js world. It make easy to ignore this @sergioutama
However, arrow function actually assigning a new value. Calling it
within render() function will give significant impact on your app performance @sergioutama
Solution? bind early or declare it outside render() @sergioutama
3. Own your component lifecycle @sergioutama
React gave us PureComponent and shouldComponentUpdate to use. Use it!
@sergioutama
Understand how React lifecycle and avoid unecessary render by extending
PureComponent or implementing shouldComponentUpdate. Be!er: fully utilize the whole lifecycle functions. @sergioutama
@sergioutama
4. Component everything @sergioutama
Keep your component small. It's not a dick measuring contents
If more than 6 elements, move it to a component @sergioutama
5. It's either Component OR PureComponent @sergioutama
const modalClosed = ()=>{} const LoadingOverlay = (props) => {
const { loading, message, ...attributes } = props; const defaultMessage = message || ''; return ( <Modal transparent animationType={'none'} visible={loading} onRequestClose={modalClosed} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); }; @sergioutama
const modalClose = () => {}; export default class LoadingOverlay
extends React.Component<Props> { render() { const { loading, message, style } = this.props; const defaultMessage = message || ""; return ( <Modal transparent animationType={"none"} visible={loading} onRequestClose={modalClose} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); } } @sergioutama
Why Similar but not the same It makes sense on
web or React to use functional stateless component It doesn't make sense on ReactNative Component make it easier to debug view hierarchy @sergioutama
Learn Native and its tools Not so easy way @sergioutama
ReactNative is not a crossplatform. It's not meant that way.
— Sergio Utama @sergioutama
Native Concept: Navigation, Containtment, Signing, Activty vs Fragments, Permission, etc
Tools: Xcode, Gradle, Fastlane @sergioutama
Q&A @sergioutama
The end? Thank you — @sergioutama @sergioutama