Skip to content
Permalink
Browse files

Upgrade Expo (v25->v33) and the relevant instructions

  • Loading branch information...
kadikraman committed Jun 19, 2019
1 parent 88afe41 commit 456c0ac60eb4be16045f885b3ec19a6e5b06e4a6
Showing with 4,290 additions and 4,674 deletions.
  1. +0 −8 .babelrc
  2. +0 −63 .flowconfig
  3. +9 −2 .gitignore
  4. +0 −3 .prettierrc
  5. +0 −9 App.test.js
  6. +25 −17 README.md
  7. +27 −2 app.json
  8. BIN assets/icon.png
  9. BIN assets/splash.png
  10. +6 −0 babel.config.js
  11. +15 −19 package.json
  12. +4,208 −4,551 yarn.lock

This file was deleted.

This file was deleted.

@@ -1,3 +1,10 @@
node_modules/
.expo/
node_modules/**/*
.expo/*
npm-debug.*
*.jks
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
web-report/

This file was deleted.

This file was deleted.

@@ -10,7 +10,7 @@ _A step-by-step tutorial to create your own Chat app with React Native_
- [Code walkthrough](#code-walkthrough) - Start here if you have created a new Create React Native app but aren't yet familiar with React, ES6 and JSX
- [Let's code!](#lets-code) - Start here if you understand the basics of React and want to get hacking.
- [Publish your app!](#publish-your-app) - When you're happy with your app, publish it to Expo.

<img src="http://i.imgur.com/KTWAlg4.png" width="300" />

# Introduction
@@ -21,24 +21,32 @@ Work the tutorial at your own pace. The instructions below assume that you are c

## Set up development environment

We'll build the app from scratch. That means you don't need to clone this repository. Instead install [Create React Native App (CRNA)](https://github.com/react-community/create-react-native-app) from NPM and generate a new project:
We'll build the app from scratch. That means you don't need to clone this repository. Instead install the [Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/) from NPM and generate a new project:
```sh
npm install -g expo-cli
expo init MyChatApp
```
The cli will ask you to choose between a blank template, and one with react-navigation already set up. For this tutorial, choose a blank template.

This will create a new React Native project in a directory `./MyChatApp`.

In order to run the Expo app on your phone, you'll need to create an Expo account and log in. For this, simply go to https://expo.io/signup and sign up for an account.

Then, log in on the cli:
```sh
npm install -g create-react-native-app
create-react-native-app MyChatApp
expo login
```

This will create a new CRNA project in a directory `./MyChatApp`. Feel free to name your app something else, if you'd like, and run the app with `npm start`:
Now lets go back to the project we generated an start it with `npm start`:
```sh
cd MyChatApp
npm start
```

After a while, you should see a message _"To view your app with live reloading, point the Expo app to this QR code"_, and a QR code.
This will open Expo Developer Tools in your browser. You are now all set to run the app on your phone. Grab your iOS or Android phone and install **Expo**
([iOS App Store](https://itunes.apple.com/app/apple-store/id982107779?mt=8) | [Android Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www)), and log in with your newly created Expo account. It will appear in the Projects tab, under "Recently in development".

Let's do as the instructions suggest. Grab your iOS or Android phone and install the **Expo**
([iOS App Store](https://itunes.apple.com/app/apple-store/id982107779?mt=8) | [Android Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www)) app on it, launch the app and scan the QR code.

**Note**: For the phone to find the local server, **both devices need to be on the same local network.** This means either connected to the same WiFi, or the laptop's internet tethered via the phone's internet sharing functionality.
**Note**: For your phone to find the local server, **both devices need to be on the same local network.** This means either connected to the same WiFi, or the laptop's internet tethered via the phone's internet sharing functionality.

After dismissing the first use greeting from Expo, you should now see your app on your phone.

@@ -48,11 +56,11 @@ After dismissing the first use greeting from Expo, you should now see your app o

[Expo](https://expo.io/) lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript. It's open source, free and uses React Native.

Expo is embedded into [Create React Native App](https://github.com/react-community/create-react-native-app), the tool we used to generate and launch our project. It's possible to create React Native apps without CRNA (in fact, you'll need to do that if you want to write any custom Java or Swift code to enhance your app - Expo only supports JavaScript), but for learning the basics CRNA is the best choice. For the more manual alternative, see [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) in React Native docs.
It's possible to create React Native apps without Expo (in fact, you'll need to do that if you want to write any custom Java or Swift code to enhance your app - Expo only supports JavaScript), but for learning the basics Expo is the best choice. For the more manual alternative, see [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) in React Native docs.

# Code walkthrough

Okay, let's get started by familiarising ourselves with the anatomy of a React module. (If you are already familiar with React, feel free to move on to [next section](#lets-code).
Okay, let's get started by familiarising ourselves with the anatomy of a React module. (If you are already familiar with React, feel free to move on to [next section](#lets-code).

Open the directory in your favorite IDE or text editor: [Atom](https://atom.io/), [VS Code](https://code.visualstudio.com/), [Sublime Text](https://www.sublimetext.com/), Vim, Emacs, WebStorm... anything will do.

@@ -225,9 +233,9 @@ Then, we can replace the placeholder text in our `render` method with a FlatList
- <Text>Open up App.js to start working on your app!</Text>
- <Text>Changes you make will automatically reload.</Text>
- <Text>Shake your phone to open the developer menu.</Text>
+ <FlatList
+ data={this.state.messages}
+ renderItem={this.renderItem}
+ <FlatList
+ data={this.state.messages}
+ renderItem={this.renderItem}
+ inverted
+ />
</View>
@@ -478,7 +486,7 @@ And of course, we'll style the button by adding a "send" style key to the StyleS

We now have a fully functioning chat app! In fact, you could go ahead and [publish it to the Expo store](#publish-your-app) right now.

But it doesn't look very nice yet. Let's add a header component and a bit of color.
But it doesn't look very nice yet. Let's add a header component and a bit of color.

We could just keep editing `App.js`, but the file is already getting quite big, and a header feels like a good, isolated component to split out to it's own file.

@@ -524,7 +532,7 @@ import Header from './Header';
```

Then you can just drop in the Header component above the list and pass the channel name as the `title` prop. You should now see a Header on the screen!
```diff
```diff
render() {
return (
<View style={styles.container}>
@@ -1,5 +1,30 @@
{
"expo": {
"sdkVersion": "25.0.0"
"name": "ReactNativeChatDemo",
"slug": "ReactNativeChatDemo",
"privacy": "public",
"sdkVersion": "33.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
}
BIN +1.07 KB assets/icon.png
Binary file not shown.
BIN +7.01 KB assets/splash.png
Binary file not shown.
@@ -0,0 +1,6 @@
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
@@ -2,27 +2,23 @@
"name": "ReactNativeChatDemo",
"version": "0.2.0",
"private": true,
"devDependencies": {
"jest-expo": "~1.0.1",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "^25.0.0",
"firebase": "^4.1.2",
"react": "16.2.0",
"react-native": "^0.52.0",
"react-native-training-chat-server": "^2.0.0"
"expo": "^33.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-training-chat-server": "^2.0.0",
"react-native-web": "^0.11.4"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1"
}
}

0 comments on commit 456c0ac

Please sign in to comment.
You can’t perform that action at this time.