React Native in Nature - Speaker Deck

React Native in Nature

by soh335

Slide 1

Slide 1 text

Oct 2. 2021  Soh Kitahara React Native in Nature

Slide 2

Slide 2 text

About Me ࣗݾ঺հ

Slide 3

Slide 3 text

About Me https://github.com/soh33 5 Nature גࣜձࣾιϑτ΢ΣΞΤϯδχΞ 3

Slide 4

Slide 4 text

Agenda • Nature ʹ͍ͭͯ • React Native ΁ͷҠߦ • Ҡߦޙ • ࠷ۙ • ͜Ε͔Β 4

Slide 5

Slide 5 text

About Nature Nature ʹ͍ͭͯ

Slide 6

Slide 6 text

Product

Slide 7

Slide 7 text

Nature Remo

Slide 8

Slide 8 text

How It Works 8 εϚʔτσόΠε Nature Remo Ոి ੺֎ઢ Πϯλʔωοτ

Slide 9

Slide 9 text

Nature Remo E 9

Slide 10

Slide 10 text

Nature Remo E 10 ՈͷΤωϧΪʔΛϚωδϝϯτ ஝ి஑Λίϯτϩʔϧ

Slide 11

Slide 11 text

NatureεϚʔτిؾ 11

Slide 12

Slide 12 text

Nature Smart Eco Mode 12 ΞϓϦ͔ΒON ిؾ୅͕ߴ͘ͳΔ࣌ؒʹ൓Ԡ ΤΞίϯͷԹ౓Λௐઅ 28.0n

Slide 13

Slide 13 text

Migrate to React Native React Native ΁ͷҠߦ

Slide 14

Slide 14 text

Ҡߦཧ༝ • 2ਓͰ iOS, Android, firmware, backend ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕೉ ͔ͬͨ͠ • ౰࣌ • React Native 0.52. 0 • TypeScript 2.6. 2 • https://employment.en-japan.com/engineerhub/entry/2018/08/17/110000 • 3೥લʹΠϯλϏϡʔͯ͠΋Β͍·ͨ͠ 14

Slide 15

Slide 15 text

͜ͷλΠϛϯάͰσβΠϯ΋࡮৽ • ೝূ෦෼͸ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍໿͸͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐ੔ͯ͠٧ΊΔ΍ͭͱ͔ Android ʹͳ͔ͬ ͨΓɺٯ΋͋ΔͷͰ • View पΓ͸΄΅ίʔυ͸ڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 15

Slide 16

Slide 16 text

ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • Wi-Fi Λ༻͍ͨηοτΞοϓ • Bluetooth Λ༻͍ͨηοτΞοϓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 16

Slide 17

Slide 17 text

౰࣌ࠔͬͨϙΠϯτ • σόΠεͷηοτΞοϓ࣌ʹσόΠεࣗ਎ͷωοτϫʔΫʹεϚʔτϑΥ ϯ͕ܨ͙ඞཁ͕͋Δ • Ϛγϯʹىಈ͍ͯ͠ΔσόοΨͱͷ઀ଓ͕੾ΕΔ … • Today widge t • https://reactnative.dev/docs/app-extensions 17

Slide 18

Slide 18 text

౰࣌ݟक͍ͬͯͨIssue • ςΩετपΓ͕ଟ͍ҹ৅ • CJKಛ༗ͳ΋ͷ΋ • ωΠςΟϒଆͷϏϧυγεςϜ͕࡮৽͞ΕΔͱେม

Slide 19

Slide 19 text

After Migrated Ҡߦޙ

Slide 20

Slide 20 text

openssl 20 • react native -> swift, kotlin ͷ bridge -> openssl ಡΜͰΔ c ͷίʔυ

Slide 21

Slide 21 text

D3 + react-native-svg 21 • άϥϑपΓͷܭࢉ͸ D 3 • ඳը͸ react-native-svg

Slide 22

Slide 22 text

React Native ͷ Version Λ͋͛ΔλΠϛϯά • ࣍ͷϝδϟʔΞοϓσʔτ͕ग़ͨΒͦͷલͷ࠷ޙ͋ͨΓΛݕ౼ • ຖճͦ͏͍͏Θ͚Ͱ΋ͳ͍͚Ͳ • Expo SDK ΋ࢀߟʹ 22

Slide 23

Slide 23 text

ϥΠϒϥϦपΓ • react-navigatio n • redux & redux-thunk && redux-persist & imme r • react-native-map s • react-native-ble-manage r • react-native-sv g • react-native-vector-icon s • react-native-linear-gradien t • lottie-react-nativ e • react-native-i18 n • sentr y • etc… 23

Slide 24

Slide 24 text

͋͑ͯ࢖ͬͯͳ͍΋ͷ • Exp o • OT A • Keychain पΓ • GeofenceपΓ 24

Slide 25

Slide 25 text

Expo • Native ͷίʔυΛॻ͔ͳ͍ͱ͍͏બ୒ࢶ͕ͳ͍ • Geofence, Siri ͱ͔ΞϓϦͷϩδοΫΛͦͷ··ॻ͘ඞཁ͕͋Δ 25

Slide 26

Slide 26 text

Nativeʹ਺ߦॻ͚͹ྑ͍ॲཧ • universalLinksOnly option ͕ඞཁͳ Linking.openUR L • Siri Shortcut s • NEHotspotConfiguratio n • Firebase Messaging, Analytics, etc… 26

Slide 27

Slide 27 text

OTA • react-native ͷ version ʹґଘ͍ͯ͠ΔͷͰɺΞοϓσʔτͷ଍ᐫʹͨ͘͠ ͳ͍ • ࣗ෼ͨͪͰίϯτʔϧͰ͖ͳ͍΋ͷΛ૿΍ͨ͘͠ͳ͍ • ࠷ۙ͸৹ࠪૣ͍ 27

Slide 28

Slide 28 text

Keychain पΓ • Keychain ͸ͪΌΜͱॻ͘ͷ͕೉͍͠ • ৴པ͍ͯ͠ΔϥΠϒϥϦΛ࢖͍͍ͨ • https://github.com/kishikawakatsumi/KeychainAccess • ϥοϓͯ͠࢖ͬͯΔ 28

Slide 29

Slide 29 text

Geofence • ΞϓϦͷϩδοΫʹີ઀ • iOS ͸headless JS ͱ͍͏֓೦ͳ͍ͷͰωΠςΟϒͰී௨ʹॻ͘ • https://reactnative.dev/docs/headless-js-android 29

Slide 30

Slide 30 text

React Native ʹύονૹͬͨΓ • Fix typescript constructor parameter propertie s • https://github.com/facebook/metro/pull/262 • Fix some languages wrapped texts are cut off on androi d • https://github.com/facebook/react-native/pull/25306 30

Slide 31

Slide 31 text

ύονΛ౰ͯͨReact Native Λ࢖͏ • https://github.com/facebook/react-native/wiki/Building-from-source • 0.60 ͰऔΓࠐ·ΕͨͷͰɺͦΕ·Ͱ͸ Patched React Native Λ࢖ͬͨ 31

Slide 32

Slide 32 text

Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/15114 • One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτΛ࢖͏ ͱจࣈྻͷඳը͕͓͔͍͠ • Roboto Λಉࠝ 32

Slide 33

Slide 33 text

Recently ࠷ۙ

Slide 34

Slide 34 text

Hermes 34 • 64bit ରԠޙ Android ؀ڥͰ libjsc.so ͕ϥϯμϜʹΫϥογϡͯ͠͠· ͏ͱ͍͏ͷ͍ʹ౰࣌೰·͞Ε͍ͯ ͨ • @kudo-ci/jsc-android ʹஔ͖׵͑ͯΈ ͨΓ

Slide 35

Slide 35 text

Hermes 35 https://github.com/facebook/hermes/issues/33

Slide 36

Slide 36 text

Hermes 36

Slide 37

Slide 37 text

Hermes 37

Slide 38

Slide 38 text

Renovate 38

Slide 39

Slide 39 text

Renovate • ؅ཧ͍ͯ͠Δ npm packag e • Podfil e • Gemfile (fastlane, cocoapods ͱ͔ʣ • Gradle 39

Slide 40

Slide 40 text

Renovate 40 "packageRules": [ { "groupName": "react native", "groupSlug": "react-native-deps", "matchPackageNames": [ "react", "react-native", "@babel/core", "@babel/runtime", "@react-native-community/eslint-config", "babel-jest", "eslint", "jest", "metro-react-native-babel-preset", "react-test-renderer", "gradle", … • React Native ຊମʹґଘ͍ͯ͠Δͷ͸ ݸʑ্Βͳ͍Α͏ʹ͢Δͱ͔ • Ұ౓ʹ͋͛Δͱͱʹ͔͘େมͳͷͰ౎ ౓্͍͛ͯ͘

Slide 41

Slide 41 text

Next ͜Ε͔Β

Slide 42

Slide 42 text

Migrating New Design System 42

Slide 43

Slide 43 text

Migrating New Design System 43

Slide 44

Slide 44 text

Migrating New Design System 44

Slide 45

Slide 45 text

Migrating New Design System • Ұ౓ʹશ෦ม͑Δʹ͸ը໘͕ଟ͍ͷͰɺӨڹ͕େ͖͍ίϯτϩʔϧը໘ͷUI͔Βணख • ϕʔεͱͳΔ৭·ΘΓ΋ࠓޙணख͍͖͍ͯͨ͠ • SPAͱͲ͏σβΠϯγεςϜΛڞ༗͢Δ͔Έ͍ͨͳͷ΋͋Δ͔΋͠Εͳ͍ • ໛ࡧதͳͷͰ׬ྃͨ͠Β৭ʑ஌ݟ͕ஷ·Δ͔΋͠Εͳ͍ 45

Slide 46

Slide 46 text

Update react-navigation • ·ͩ v4 ͳͷͰͦΖͦΖ্͍͛ͨ • λϒͷग़͠Θ͚ΛྗٕͰղܾ͍ͯ͠ΔͷΛ΍Ί͍ͨ • ޾ӡͳ͜ͱʹλϒͷύλʔϯ͸͔̏ͭ̐ͭͷೋछྨ • ྆ύλʔϯΛ Component ͱͯ͠࡞ΓɺSwitch Navigator Ͱ੾Γସ͑… 46

Slide 47

Slide 47 text

Update react-navigation 47 { showEnergy && } ...

Slide 48

Slide 48 text

࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ͹ iOS, Android, ͲͷαΠζͰ΋ಈ͘ͷͰྑ͍ • ਖ਼௚ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜن໛Ͱ1,2िؒʹҰ౓ͷΞοϓσʔτΈ͍ͨͳͷ͸ωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 48

Slide 49

Slide 49 text

࣮ࡍ React Native Ͳ͏? • SPA ͷϨϏϡʔ΋Ͱ͖ΔΑ͏ʹͳ͍ͬͯͨ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍ • σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 49

Slide 50

Slide 50 text

ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ • ࠷ۙηΩϡϦςΟपΓͰݖݶपΓ͕ຖճมΘΔ • Local Network ·ΘΓͷڍಈ΋౓ʑมΘ͍ͬͯΔ • ඳը่͕ΕΔΈ͍ͨͳͷ͸΄΅ͳ͍ 50

Slide 51

Slide 51 text

React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹ৅͸ͳ͍ • पลϥΠϒϥϦͷํ͕ ? • iOS, Android ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕΍ͬͺΓؾʹͳΔ 51

Slide 52

Slide 52 text

ωΠςΟϒͰॻ͖͍ͨʁ • ϝϯόʔ૿͑ͨΒͦΕ΋ྑ͍͔΋ • ݁ہνʔϜͷߏ੒ʹΑΓͦ͏ • Ұ୴Ϗϧυͪ͠Ό͑͹ͬ͘͞ͱॻ͍ͯ֬ೝग़དྷΔମݧ͸ؾʹೖͬͯΔ 52