You must download the Expo application on your mobile device and register first
npm install -g expo-cli
expo-cli init <project_name> --template blank
cd <project_name>
mkdir src src/components src/screens src/api src/context
code .
npm start -c
open website and switch to tunnel.
Scan Qr Code to launch the app on your device
Copier le dossier.
Supprimer .expo-shared
Supprimer .git
Adapter app.json
its a standard node project.
we need "network_mode: host" to run multiple expo on the same server without hacks.
we need an entrypoint to login with expo (optional)
docker-compose.yml
yuddaoreact:
build: ./yuddaoreact
restart: always
container_name: yuddaoreact
volumes:
- ./yuddaoreact:/usr/app/
environment:
- "TZ=Europe/paris"
- "REACT_NATIVE_PACKAGER_HOSTNAME=raphaelpiccolo.com"
- "EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0"
- "EXPO_USERNAME=martin.wb.2015@gmail.com"
- "EXPO_PASSWORD=xxxxxxxxxxx"
working_dir: /usr/app
command: npm start
network_mode: host
Dockerfile
FROM node
RUN apt-get update
RUN npm install -g expo-cli
WORKDIR /usr/app
COPY package*.json ./
RUN npm install
COPY . .
# expo login --non-interactive --username $EXPO_USERNAME --password $EXPO_PASSWORD &&
# CMD ["npm", "start"]
ENTRYPOINT ["/bin/sh", "entrypoint.sh"]
CMD ["npm", "start"]
entrypoint.sh
#!/bin/sh
expo login --non-interactive --username $EXPO_USERNAME --password $EXPO_PASSWORD
exec "$@"
# environment:
# - "EXPO_MANIFEST_PROXY_URL=https://expo.yuddao.com"
# - "EXPO_PACKAGER_PROXY_URL=https://packager.yuddao.com"
# labels:
# - traefik.enable=true
# - traefik.http.routers.yuddaoexpo.rule=Host(`expo.yuddao.com`)
# - traefik.http.routers.yuddaoexpo.tls.certresolver=le
# - traefik.http.routers.yuddaoexpo.entrypoints=websecure
# - traefik.http.routers.yuddaoexpo.middlewares=securityheaders
# - traefik.http.routers.yuddaoexpo.tls.options=notsafe@file
# - traefik.http.routers.yuddaoexpo.service=yuddaoexpo
# - traefik.http.services.yuddaoexpo.loadbalancer.server.port=19000
# - traefik.http.routers.yuddaopackager.rule=Host(`packager.yuddao.com`)
# - traefik.http.routers.yuddaopackager.tls.certresolver=le
# - traefik.http.routers.yuddaopackager.entrypoints=websecure
# - traefik.http.routers.yuddaopackager.middlewares=securityheaders
# - traefik.http.routers.yuddaopackager.tls.options=notsafe@file
# - traefik.http.routers.yuddaopackager.service=yuddaopackager
# - traefik.http.services.yuddaopackager.loadbalancer.server.port=19001
expo server : 19000
this port appears in exp://xxxx:19000
it can be forced with :
echo '{ "manifestPort": 19005 }' > .exprc
packagerPort : 19001
it can be forced with :
cat app.json | jq --arg port 19004 '.expo.packagerOpts += {port: $port}' > tmp && mv tmp app.json
devToolsPort : 19002
cant be changed ?
React Navigation has recently released a major update to v5 with breaking changes.
We will not be using this version and will instead continue to use the current stable v4 release (As of now at v4.1.1)
Install React Navigation
npm install react-navigation
Install Dependencies
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
Install React Navigation Stack
npm install react-navigation-stack @react-native-community/masked-view
Start the app and clear cache with
npm start -c
If you are still seeing errors and complaints about packages, do the following:
1. rm -r node_modules
2. rm package-lock.json
3. expo upgrade
4. npm install
5. npm start -c
add this in app.json
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.example.app",
"buildNumber": "1.0.0"
},
"android": {
"package": "com.example.app",
"versionCode": 1
}
expo build:android
apk
let expo create keystore
get keystore from expo server
save console output + files + backup it somewhere
expo fetch:android:keystore
activate push notifications :
Login to https://developer.apple.com/
Go to the “Certificates, Identifiers and Profiles” section
Select “App IDs” in the Identifiers section on the left column
Choose your app ID, edit it and check “Push Notifications”. Save changes
No need to generate the certificate
expo build:ios
archive
give your apple id and password
let expo handle everything
get ios certificates from expo server
save console output + files + backup it somewhere
expo fetch:ios:certs
to publish to the store you need to use one of theses soft : https://help.apple.com/app-store-connect/#/devb1c185036
http_proxy=http://2i.raphaelpiccolo.com:3128 expo build:ios
not tested
expo fetch:android:hashes
expo fetch:android:upload-cert
expo opt-in-google-play-signing
tuto ici : https://docs.expo.io/push-notifications/using-fcm/
aller ici pour créer un projet : https://console.firebase.google.com/
In your new project console
click Add Firebase to your Android app
set android package name like in app.json.
Download the google-services.json file and place it in your Expo app's root directory.
update app.json
{
...
"android": {
"googleServicesFile": "./google-services.json",
...
}
}
At the top of the sidebar, click the gear icon to the right of Project Overview to go to your project settings.
Click on the Cloud Messaging tab in the Settings pane.
copy the Server key and save it here google-services-serverkey.txt
run
expo push:android:upload --api-key $(cat google-services-serverkey.txt)
expo build:ios -t simulator
Download the tarball from expo.io
Unpack the tar.gz by running
tar -xvzf your-app.tar.gz
Rename your file in "project.app" if needded
Then you can run it by starting 3 different iOS Simulator
Then run
xcrun simctl install booted <app path>
It will install your app on one random simulator, so you can screen shot your different views with cmd+s
and
xcrun simctl launch booted <app identifier>.
describe camera usage
if you need to define something in the plist file like so :
<key>NSCameraUsageDescription</key>
<string>Allow Expo experiences to use your camera</string>
<key>NSContactsUsageDescription</key>
<string>Allow Expo experiences to access your contacts</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Allow Expo experiences to use your location</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow Expo experiences to access your microphone</string>
<key>NSMotionUsageDescription</key>
<string>Allow Expo experiences to access your device's accelerometer</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Give Expo experiences permission to save photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Give Expo experiences permission to access your photos</string>
you can add this in app.json
{
"expo": {
...
"ios": {
...
"infoPlist": {
"NSCameraUsageDescription": "This app uses the camera to scan barcodes on event tickets."
},
},
},