Introduction to React Native
- 1. Damian Zbrożek Introduction to React Native
- 2. Requirements ● JavaScript ○ React ○ ES6 ● CSS ● git ● npm ● phone with Android
- 3. React Native React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.
- 4. Is anybody using it?
- 5. Why should I use it? ● It’s still React ● Easy migration path for web developers ● Faster speed of development ○ high code reuse between platforms ○ independent updates (OTA) ○ hot reloading
- 6. Why shouldn’t I use it? ● It’s still JS ● Worse performance ● Smaller community ● Lack of libraries for games, VR, AR
- 7. How does it work? JS thread UI threadBridge
- 8. Components ● Text ● TextInput ● Button ● Image ● View ● *List ● Slider/Switch/Picker ● DatePickerIOS* ● TouchableNativeFeedback*
- 9. API ● AsyncStorage ● Animated ● Dimensions ● Geolocation ● CameraRoll ● StyleSheet ● Vibration ● NetInfo ● Keyboard ● PanResponder
- 10. React Native vs Web
- 11. Similarities ● It’s still React ● Similar primitive components ○ View == div ○ Text == span ○ TextInput == input ○ Image == img ● Styling ○ CSS like ● React Native for Web
- 12. Creating a new project
- 13. expo-cli ● easy setup ● simple updates ● rich API (Camera, Contacts, Facebook, Maps, Video, SMS, SQLite) ● OTA updates ● push notifications ● build servers (iOS and Android) ● no native code
- 14. react-native-cli ● more complicated setup (Android Studio/Xcode) ● native modules ● full control of the project ● may require additional configuration (react-native link)
- 15. Setup
- 16. Project
- 18. Expo ● open Expo app on Android ● scan QR code
- 19. Expo ● shake the app ● open notification menu
- 20. Layout
- 21. Flex ● flex ● flexDirection ● justifyContent ● alignItems
- 22. flex
- 23. flexDirection
- 24. justifyContent
- 25. alignItems
- 26. Styles ● inline ● StyleSheet ● Styled Components* ● React Native Extended StyleSheet*
- 27. Styles ● dp ● Dimensions API
- 28. Inline
- 29. StyleSheet
- 30. Basic components
- 31. (Scroll)View
- 32. Text
- 33. Image
- 34. Challenge
- 35. Challenge Add styles to you app. Pay attention to the following components: ● AlarmActions ● AlarmActionTile ● AlarmHeader Nice to have: ● ScrollView
- 36. Interaction
- 37. TextInput
- 38. Touchable* ● TouchableHighlight ● TouchableOpacity ● TouchableNativeFeedback ● Button
- 39. Challenge
- 40. Challenge Create two components: ● FormInput ● Button and turn AddAlarm into functional form. Nice to have: ● display stars instead of your password ● display number keyboard when typing phone number ● “add” button should be disabled until you provide all values ● KeyboardAvoidingView
- 41. Lists
- 42. Lists ● Optional horizontal mode ● Configurable viewability callbacks ● Header support ● Footer support ● Separator support ● Empty list support ● Pull to Refresh ● ScrollToIndex support ● Multiple columns support
- 43. FlatList
- 44. SectionList
- 45. Challenge
- 46. Challenge You should create a new FlatList inside AlarmList and use AlarmListItem component to render items. Nice to have: ● support empty lists ● ScrollView
- 47. Routing
- 48. Routing ● React Navigation ● React Native Navigation
- 49. React Navigation
- 50. React Navigation
- 51. Challenge
- 52. Challenge Implement navigation in the app: ● create a stack navigation inside navigation.js ● implement required routing ○ “Create new” button should redirect to AddAlarm view ○ Single alarm from the list should redirect to AlarmDetails view and pass alarm as property ○ “Add” button from AddAlarm view should redirect to AddAlarm view Nice to have: ● header title inside AlarmDetails view should be based on the current alarm name
- 53. Storage
- 54. Storage ● AsyncStorage ● SQLite* ● Realm*
- 55. AsyncStorage
- 56. Challenge
- 57. Challenge Make data persist again. Modify AlarmsStore in a way that enables user to: ● add a new alar to the storage ● remove existing alarm from the storage ● load existing alarms when opening the app
- 58. SMS
- 59. SMS Two ways to send SMS: ● using messaging app ○ no extra permission ○ easy to implement ○ extra action to take for user ● sending message in background ○ permission must be granted by user ○ harder to implement (require native code) ○ streamline the process (one action instead of two)
- 60. SMS
- 61. Challenge
- 62. Challenge When a user touches AlarmActionTile we should open SMS app with premade message (use # to combine password and code) to send. Nice to have: ● disable buttons if SMS is not available
- 63. Deploy
- 64. Deploy ● update assets ○ assets/icon.png ○ assets/splash.png ● deploy ○ build app ■ Create a new account ■ Let Expo handle the process ○ publish changes ● install APK
- 65. Homework
- 66. Homework Sending SMS in the background ● eject project ● install native module (e.g. react-native-sms-x) ● build APK (use Android Studio)
- 67. Questions?
- 68. Thank you