![@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](https://image.slidesharecdn.com/reactnative-170216194002/85/When-to-use-not-use-React-Native-17-320.jpg)
![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>](https://image.slidesharecdn.com/reactnative-170216194002/85/When-to-use-not-use-React-Native-49-320.jpg)
When to (use / not use) React Native.
- 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?
- 20. JAVASCRIPT
- 21. JAVASCRIPT
- 22. JAVASCRIPT
- 23. JAVASCRIPT
- 24. JAVASCRIPT
- 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
- 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: [email protected] cart: [ {name: ‘item1’, cost: 100}, {name: ‘item2’, cost: 999} ]}) = <h1> Check out </h1> <h2 class=”user”> [email protected] </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