How to Hang a Painting on the Wall with React Native

So you want to buy a painting, but not sure which one. Or where to place it? We have a solution. Just use your phone for this!

Augmented reality becomes more popular in recent years.

Companies like Apple or Google invest tons of money in developing AR support. Smartphones became powerful enough to deal with all these new features.

Moreover, it'll be ridiculous not to use all this power when looking for the best place to put a piece of art. In this talk, we'll be looking at ARKit from Apple and the ways how we can use it with React Native.

We'll be building a simple app to hang paintings on the wall and learning how to deal with newest AR technologies.

A talk was given on ReactNative EU 2018

[UPD] Updated slide 28 cause in debug mode bottom right corner actually displays Polygon # and not a color temperature as I originally thought. Thanks, @dru for pointing this out.

Transcript

1. How to Hang a Painting on the Wall React Native edition
2. How to Hang a Painting on the Wall How to Hang a Painting on the Wall
3. How to Hang a Painting on the Wall pavlo.babenko@gmail.com github.com/chukcha-wtf @babenkop Pavlo Babenko
4. 2 billion smartphones How to Hang a Painting on the Wall
5. How to Hang a Painting on the Wall Let me know you better How to Hang a Painting on the Wall
6. How to Hang a Painting on the Wall how many of you know what AR is? How to Hang a Painting on the Wall
7. How to Hang a Painting on the Wall Also what VR is? How to Hang a Painting on the Wall
8. How to Hang a Painting on the Wall and what’s the difference between them?
9. How to Hang a Painting on the Wall
10. How to Hang a Painting on the Wall Have you been on a “Building augmented reality game with React native” workshop?
11. How to Hang a Painting on the Wall
12. How to Hang a Painting on the Wall
13. How to Hang a Painting on the Wall AR options • Viro AR • Expo.js • react-native-arkit • react-reality • react-native-arcore
14. How to Hang a Painting on the Wall AR options • Viro AR • Expo.js • react-native-arkit • react-reality • react-native-arcore
15. How to Hang a Painting on the Wall AR options • Viro AR • Expo.js • react-native-arkit • react-reality • react-native-arcore
16. How to Hang a Painting on the Wall AR options • Viro AR • Expo.js • react-native-arkit • react-reality • react-native-arcore
17. How to Hang a Painting on the Wall AR options • Viro AR • Expo.js • react-native-arkit • react-reality • react-native-arcore
18. How to Hang a Painting on the Wall AR options • Viro AR • Expo.js • react-native-arkit • react-reality • react-native-arcore
19. How to Hang a Painting on the Wall And the winner is…
20. How to Hang a Painting on the Wall react-native-arkit
21. How to Hang a Painting on the Wall $ yarn add react-native-arkit
22. How to Hang a Painting on the Wall
23. How to Hang a Painting on the Wall
24. How to Hang a Painting on the Wall Running ARKit demo app
25. How to Hang a Painting on the Wall 3D Axis
26. How to Hang a Painting on the Wall Feature points
27. How to Hang a Painting on the Wall Polygon number
28. How to Hang a Painting on the Wall Frames per second
29. How to Hang a Painting on the Wall
30. How to Hang a Painting on the Wall A simple painting
31. How to Hang a Painting on the Wall
32. How to Hang a Painting on the Wall Add a reminder. Ship to the AppStore.
33. How to Hang a Painting on the Wall A painting pointer?
34. How to Hang a Painting on the Wall
35. How to Hang a Painting on the Wall Add some UI
36. How to Hang a Painting on the Wall
37. How to Hang a Painting on the Wall
38. How to Hang a Painting on the Wall
39. How to Hang a Painting on the Wall Dumb plane detection
40. How to Hang a Painting on the Wall
41. How to Hang a Painting on the Wall Adding a remove button
42. How to Hang a Painting on the Wall
43. How to Hang a Painting on the Wall Move painting around
44. How to Hang a Painting on the Wall
45. How to Hang a Painting on the Wall
46. How to Hang a Painting on the Wall Select different paintings
47. How to Hang a Painting on the Wall
48. How to Hang a Painting on the Wall Display title and author
49. How to Hang a Painting on the Wall
50. How to Hang a Painting on the Wall Turn off debug. Add snapshot
51. How to Hang a Painting on the Wall
52. How to Hang a Painting on the Wall Snapshot result
53. How to Hang a Painting on the Wall chukcha-wtf/ArkitPaintingPlacer
54. How to Hang a Painting on the Wall
55. How to Hang a Painting on the Wall
56. How to Hang a Painting on the Wall
57. Thank You