Introduction to building a universal app with React Native and Expo

Transcript

1. https://www.google.com/url? sa=i&source=images&cd=&ved=2ahUKEwiMlJOavpLjAhXDJzQIHTeBCrcQjRx6BAgBEAU&url=http%3A%2F%2Fgooglechromelog o.blogspot.com%2F2015%2F08%2Fgoogle-chrome-black-color- logo.html&psig=AOvVaw1IGbc5iGNJ2QnS8MixZQUq&ust=1562028071710838
2. Getting a development environment set up https://docs.expo.io/ Installation Create a new app
3. Install the latest Node LTS release from nodejs.org. $ npm i -g expo-cli Install “Expo client” on your phone from Apple App Store or Google Play Store. 1 2 3 Local development environment
4. Optional: install “Expo client” on your phone from App or Play Store. You can use in- browser simulator instead if you prefer. 1 2 Go to https://snack.expo.io on a desktop web browser. Web-based development environment
5. $ expo init hello-world $ cd hello-world $ yarn start --tunnel
6. Let’s build an app for iOS, Android, and web in React from the same codebase
11. $ expo init image-share $ cd image-share $ yarn start --tunnel The tunnel option is sometimes necessary to access your computer from your phone on public wifi networks, but full app reloads are slower than a direct LAN connection. You could alternatively use a simulator or switch networks (eg: tether).
12. Any text you want to present in your app needs to be inside of a Text component. <View>Some text</View> is not valid, for example.
13. Changes will be highlighted in yellow. If it’s not highlighted, assume it didn’t change - even if it’s not on the slide.
14. Styling text
16. Adding images
17. http://bit.ly/share-logo Download this to the assets directory in your project An "asset" is any file that your project uses that is not code. Images, videos, sounds, and fonts are all considered to be assets.
18. What units are width and height in? A useful simplification is to treat the units for numbers in styles as pixels, so you can think of 305 as equivalent to 305px. In fact, that is exactly what it compiles to for web. The same goes for font sizes, but there are no ems or rems here.
19. What's a URI? Is that like a URL? Yes, you can use the terms interchangeably. Technically there are some subtle differences in meaning, but this won't matter for your usage with React Native and Expo. Documentation will tell you whether to use uri or url.
21. Creating a button
25. Picking an image
26. $ expo install expo-image-picker expo install will run npm install or yarn add for you to install a version of the given library that is compatible with your project
29. You might expect that because we gave our image an equal width and height it would be a square, but it’s possible to be rectangular. resizeMode lets us control how the image is resized to fit the given dimensions.
30. Sharing an image
31. $ expo install expo-sharing
33. Handing platform differences
36. * It’s actually technically possible to share files in the latest versions of Chrome for Android to share files, but it's very new and not yet supported by expo-sharing, so we will ignore that here for now. 1. Not supported by every browser 2. Can’t share files* Sharing limitations on web
37. $ expo install anonymous-sharing expo install will pass through to npm or yarn without specifying a version if we don’t know which version is supported. In this case, anonymous-sharing is just some random npm package that is not part of Expo SDK, so no version is added.
39. Configuring a splash screen and app icon
40. http://bit.ly/share-splash Download this to the assets directory in your project and name it splash.png. Overwrite the existing file.
42. http://bit.ly/share-appicon Download this to the assets directory in your project and name it icon.png. Overwrite the existing file. We will use a single app icon for all platforms here for convenience. You will likely want to use a different icon for iOS and Android in practice.
43. Creating a release build
44. $ expo build:web
45. $ expo build:android app.json
46. $ expo build:ios app.json
47. Updating over-the-air
48. $ expo publish You can use the release-channel flag if you don’t want to push directly to production
51. Learning more http://bit.ly/share-learn-more
52. @appjsconf https://appjs.co App.js Conf 23-24 APRIL 2020, KRAKOW, POLAND