React Native allows building mobile apps using JavaScript and React by using native platform APIs instead of webviews. It does not replace writing code for each platform but allows sharing business logic code across iOS and Android. React Native uses JavaScript to handle views and state while native platform code handles rendering, animations, and other native tasks. This provides native performance with cross-platform code reuse. Challenges include different data types between JavaScript and native platforms and some debugging requiring Xcode.

1. REACT NATIVE INTRO

2. - PhoneGap
- No DOM or WebViews or Safari
- It doesn’t replace writing Swift/Objective-C
- Not 100% cross-platform code
- Does not replace the iOS/Android UI libraries
WHAT IT’S NOT

3. - JSCore with a transparent bridge to native code
- JS processes the business logic and view transitions
- “Feels Native” Native code handles rendering and
animations
- Cross-platform business logic code
- Adapters make some UI code cross-platform
WHAT IS IT?

4. - Highest rewards is from pure functions as app state
- Most debugging is in JS but some happens in XCode
- Uses same native API but in JavaScript
- Transition from OOP to FP
- Mandatory frameworks and tooling from Facebook
- JS has issues with data types like integers
- Large React Native OSS community
CHALLENGES

5. INSTALL

6. INSTALL

7. INSTALL

8. INSTALL

9. INSTALL

10. CODE

11. CODE BASICS

12. CODE BASICS

13. CODE NATIVE API

14. CODE NATIVE API

15. CODE FLEX BOX

16. CODE COMMUNITY

17. @implementation RCTText
- (void)drawRect:(CGRect)rect
{
NSLayoutManager *layoutManager = [_textStorage.layoutManagers firstObject];
NSTextContainer *textContainer = [layoutManager.textContainers firstObject];
NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
CGRect textFrame = self.textFrame;
[layoutManager drawBackgroundForGlyphRange:glyphRange atPoint:textFrame.origin];
[layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:textFrame.origin];
__block UIBezierPath *highlightPath = nil;
NSRange characterRange = [layoutManager characterRangeForGlyphRange:glyphRange actualGlyphRange:NULL];
[layoutManager.textStorage enumerateAttribute:RCTIsHighlightedAttributeName inRange:characterRange options:0
usingBlock:^(NSNumber *value, NSRange range, BOOL *_) {
if (!value.boolValue) {
return;
CODE CUSTOM VIEWS

18. WHY?

19. JAVASCRIPT
FP (FUNCTION PROGRAMING)

20. JAVASCRIPT

21. JAVASCRIPT

22. JAVASCRIPT

23. JAVASCRIPT

24. JAVASCRIPT

25. FP (FUNCTIONAL PROGRAMMING)

26. PURE FUNCTIONS

27. PURE FUNCTIONS

28. PURE FUNCTIONS

29. PURE FUNCTIONS

30. PURE FUNCTIONS

31. PURE FUNCTIONS

32. PURE FUNCTIONS

33. PURE FUNCTIONS

34. PURE FUNCTIONS

35. PURE FUNCTIONS

36. PURE FUNCTIONS

37. PURE FUNCTIONS

38. PURE FUNCTIONS

39. PURE FUNCTIONS

40. PURE FUNCTIONS

41. ƒ(d)=V

42. PURE VIEWS

43. vs
PURE VIEWS

44. Permutation
vs
Combination
PURE VIEWS

45. mandates an order of operations
vs
simple A→B transition
PURE VIEWS

46. PURE VIEWS
MVC applications are large complex permutations.

47. PURE VIEWS
How we think our apps work.

48. PURE VIEWS
How applications really work.

49. PURE VIEWS
ƒ({oauthToken: ‘abc123’,
path: ‘/checkout’
email: bobby@rga.com
cart: [
{name: ‘item1’, cost: 100},
{name: ‘item2’, cost: 999}
]}) = <h1> Check out </h1>
<h2 class=”user”> bobby@rga.com </h2>
<ol class=”cart”>
<li> item1 - $100 </li>
<li> item2 - $999 </li>
</ol>

50. PURE VIEWS

51. PURE VIEWS

52. PURE VIEWS

53. PURE VIEWS

54. PURE VIEWS

55. CLOSING THOUGHT

56. CLOSING THOUGHT