React Native in Nature

Transcript

1. Oct 2. 2021
 Soh Kitahara React Native in Nature

2. About Me ࣗݾ঺հ

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

4. Agenda • Nature ʹ͍ͭͯ • React Native ΁ͷҠߦ • Ҡߦޙ

   • ࠷ۙ • ͜Ε͔Β 4

5. About Nature Nature ʹ͍ͭͯ

6. Product

7. Nature Remo

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

9. Nature Remo E 9

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

11. NatureεϚʔτిؾ 11

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

13. Migrate to React Native React Native ΁ͷҠߦ

14. Ҡߦཧ༝ • 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

15. ͜ͷλΠϛϯάͰσβΠϯ΋࡮৽ • ೝূ෦෼͸ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍໿͸͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐ੔ͯ͠٧ΊΔ΍ͭͱ͔ Android ʹͳ͔ͬ

    ͨΓɺٯ΋͋ΔͷͰ • View पΓ͸΄΅ίʔυ͸ڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 15

16. ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • Wi-Fi

    Λ༻͍ͨηοτΞοϓ • Bluetooth Λ༻͍ͨηοτΞοϓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 16

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

    t • https://reactnative.dev/docs/app-extensions 17

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

19. After Migrated Ҡߦޙ

20. openssl 20 • react native -> swift, kotlin ͷ bridge

    -> openssl ಡΜͰΔ c ͷίʔυ

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

    react-native-svg

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

    Expo SDK ΋ࢀߟʹ 22

23. ϥΠϒϥϦपΓ • 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

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

    • GeofenceपΓ 24

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

26. Nativeʹ਺ߦॻ͚͹ྑ͍ॲཧ • universalLinksOnly option ͕ඞཁͳ Linking.openUR L • Siri Shortcut

    s • NEHotspotConfiguratio n • Firebase Messaging, Analytics, etc… 26

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

    ࠷ۙ͸৹ࠪૣ͍ 27

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

    ϥοϓͯ͠࢖ͬͯΔ 28

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

    29

30. 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

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

    Native Λ࢖ͬͨ 31

32. Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/15114 •

    One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτΛ࢖͏ ͱจࣈྻͷඳը͕͓͔͍͠ • Roboto Λಉࠝ 32

33. Recently ࠷ۙ

34. Hermes 34 • 64bit ରԠޙ Android ؀ڥͰ libjsc.so ͕ϥϯμϜʹΫϥογϡͯ͠͠· ͏ͱ͍͏ͷ͍ʹ౰࣌೰·͞Ε͍ͯ

    ͨ • @kudo-ci/jsc-android ʹஔ͖׵͑ͯΈ ͨΓ

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

36. Hermes 36

37. Hermes 37

38. Renovate 38

39. Renovate • ؅ཧ͍ͯ͠Δ npm packag e • Podfil e •

    Gemfile (fastlane, cocoapods ͱ͔ʣ • Gradle 39

40. 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 ຊମʹґଘ͍ͯ͠Δͷ͸ ݸʑ্Βͳ͍Α͏ʹ͢Δͱ͔ • Ұ౓ʹ͋͛Δͱͱʹ͔͘େมͳͷͰ౎ ౓্͍͛ͯ͘

41. Next ͜Ε͔Β

42. Migrating New Design System 42

43. Migrating New Design System 43

44. Migrating New Design System 44

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

    • ໛ࡧதͳͷͰ׬ྃͨ͠Β৭ʑ஌ݟ͕ஷ·Δ͔΋͠Εͳ͍ 45

46. Update react-navigation • ·ͩ v4 ͳͷͰͦΖͦΖ্͍͛ͨ • λϒͷग़͠Θ͚ΛྗٕͰղܾ͍ͯ͠ΔͷΛ΍Ί͍ͨ • ޾ӡͳ͜ͱʹλϒͷύλʔϯ͸͔̏ͭ̐ͭͷೋछྨ

    • ྆ύλʔϯΛ Component ͱͯ͠࡞ΓɺSwitch Navigator Ͱ੾Γସ͑… 46

47. Update react-navigation 47 <Tab.Navigator> <Tab.Screen name={screens.Control} component={Controls} /> { showEnergy

    && <Tab.Screen name={screens.Energy} component={Energy} /> } ... </Tab.Navigator>

48. ࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ͹ iOS, Android, ͲͷαΠζͰ΋ಈ͘ͷͰྑ͍ •

    ਖ਼௚ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜن໛Ͱ1,2िؒʹҰ౓ͷΞοϓσʔτΈ͍ͨͳͷ͸ωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 48

49. ࣮ࡍ React Native Ͳ͏? • SPA ͷϨϏϡʔ΋Ͱ͖ΔΑ͏ʹͳ͍ͬͯͨ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍ •

    σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 49

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

51. React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹ৅͸ͳ͍ • पลϥΠϒϥϦͷํ͕ ? • iOS,

    Android ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕΍ͬͺΓؾʹͳΔ 51

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

53. ࠾༻΍ͬͯ·͢ 53 https://nature.global/jp/careers

54. None