�ݺ�ߣ

Building Apps with React Native -
Lessons Learned
Alexandra Anghel
CTO & Co-founder at Appticles, Co-founder Codette

What is React Native?
<With React Native, you don't build a "mobile web app", an
"HTML5 app", or a "hybrid app". You build a real mobile app that's
indistinguishable from an app built using Objective-C or Java.>*
* https://facebook.github.io/react-native/

React Native Architecture
* https://wetalkit.xyz/react-native-what-it-is-and-how-it-works-e2182d008f5e

Who uses React Native?
* https://facebook.github.io/react-native/showcase.html

* Camera, Filesystem Storage, Geolocation, Sensors, etc.
!
Native APIs*
(iOS)
Push Noti?cations
"
(iOS)
O?ine mode
#
Same iOS & Android
Code Base
?%
Web vs. Native

React vs. React Native
React
React Native
vs.

&
Di?erent
UI components
Similar CSS
rules
'
Same Data
Layer (ex. Redux)
?
React vs. React Native

1) Create React Native App
- no custom native modules beyond RN APIs and
the Expo client app
- runs using the Expo app
Getting Started with RN

2) Native Build Environment
Simulator or device?
% (Recommend) device
Getting Started with RN

1) react-navigation (by the community, RN recommended)
2) react-native-navigation (by Wix)
3) react-native-router-?ux (based on react-navigation)
Dependencies: Navigation
)

Dependencies: React Navigation
- JavaScript based
- nested navigators are di?cult to con?gure (ex. drawer vs. stack)
- used a lot of modals for getting around the screens structure
- visible performance issues on Android
- handled Android back button by writing the navigation stack
in the Redux state
)

Dependencies: React Native Navigation
- Native based (project must be ejected from CRNA)
- Single screen app vs. Tab app
- A lot of duplicate code for handling navigation events
(push, pop, resetTo)
- Can��t reset to a particular screen in the stack
- Double tap bug on Android
)

Dependencies: Ui
- Styling options are limited (?exbox)
- Smaller packages are not updated often (forks)
- Some speci?c iOS vs. Android styling (Platform.OS)
- Don��t make Android styling speci?c to the screen size
*

Ui/UX Dependencies: Native Base

Dependencies: Native APIs
- React-native-camera (photos, videos, face recognition,
scanner)
- React-native-camera-roll-picker (gallery)
- React-native-video & react-native-video-player?
- React-native-fetch-blob
!
+
,

Dependencies: React Native Camera
- Single component instance
- Sometimes buggy (ex. ?ash)
- Check user permissions before rendering it (iOS)
!

Building Apps with React Native - Lessons Learned

- Redux & Redux Persist (same as PWAs)
- Redux Persist v4 and v5 are not backwards compatible
- Blacklist setup is not intuitive
- Async storage for iOS
- Filesystem storage for Android (slower) - 2MB / key
- Careful with how much data you load
Of?ine Mode
#

Push Noti?cations - OneSignal#

- It SUCKS!
- Do changes manually, ruined Info.plist
- Create a new app and added all dependencies
Upgrading React Native
-

App Stores: iTunes
- Create certi?cates from the Apple developer account
- Create an app on iTunes
- Sign & upload app from xCode
- Use TestFlight for testing
- Beta review is required for sending invites to
other email accounts besides those in iTunes
- Permissions messages must be explicit
- 2-3 days for approval
?

- Generate a private key
- Sign the apk and upload from the developer account
- Invite email addresses to beta testing (install from URL)
- Check (extra) permissions
- 1-2 days for approval
App Stores: Google Play
%

Thank you!
Alexandra Anghel
alexandra@appticles.com

�ݺ�ߣ

Building Apps with React Native - Lessons Learned

More Related Content

Building Apps with React Native - Lessons Learned