This document provides an introduction and overview of React Native, including requirements, components, APIs, similarities and differences to web development with React, and how to set up and deploy a React Native project. Some key points covered include: - React Native allows building mobile apps using JavaScript and React components and enables high code reuse between platforms. - It has similar components to web like View, Text, Image, and uses CSS-like styles, but runs natively on mobile rather than in a browser. - Common APIs covered include AsyncStorage, Animated, and device-specific APIs like CameraRoll and Geolocation. - It discusses setting up a new project with expo-cli or 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

17. Expo
https://play.google.com/store/apps/details?id=host.exp.exponent

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