This project has been forked from https://github.com/SportySpots/cruijff. Some of the changes introduced in comparison to the original project are listed below:

• This project uses expo to build in 3 platforms: web, android and ios
• It utilizes a graphql node backend
• We rely on Cloudinary for image hosting and manipulation

Clone the repo:

>> mkdir bb (you can call your project's folder whatever you want; bb stands for ballboy)
>> cd bb
>> git clone [email protected]:fede-rodes/ballboy_rn.git rn (this will create a 'rn' folder inside 'bb')
>> cd client
>> yarn run install (install dependencies, please use yarn not npm!)

>> npm install -g expo-cli

https://docs.expo.io/versions/latest/introduction/installation/

At the root of the project you'll find a app.json.sample file. Duplicate said file and re-name it to app.json. That's where expo keeps all the environment variables. Set your env vars under extra making sure expo.extra.isStorybook is set to false (more on this later).

• Visit https://developers.google.com/maps/documentation/javascript/get-api-key and follow the steps to create a new project and an API key.
• Go to APIs & Services > Dashboard and click on ENABLE APIS & SERVICES button at the top. Look for Maps Static API. Enable it.
• Copy the API key and set ios.config.googleMapsApiKey, android.config.googleMaps.apiKey and extra.webGoogleMapsApiKey in app.json.
• Follow these steps to enable google maps in production: https://docs.expo.io/versions/latest/sdk/map-view/?redirected

• Visit https://sentry.io and create an account and a new 'Organization'.
• Set extra.webSentryDsn by creating a new 'React' project and getting the DSN key.
• Set extra.rnSentryDsn by creating a new 'React Native' project and getting the DSN key. In addition, enable the hooks.postPublish[0].config.authToken by following the expo-sentry docs: https://docs.expo.io/versions/latest/guides/using-sentry/

• Visit https://cloudinary.com/ and create a new account.
• From the Dashboard tab, grab the Cloud name, API key and API secret keys and set extra.cloudinaryCloudname, extra.cloudinaryApiKey and extra.cloudinaryApiSecret respectively.
• Finally, go to settings (https://cloudinary.com/console/settings), move to the Upload tab and scroll down to Upload presets section. Click on Enable unsigned uploading and then on edit. Set Upload preset name to default and Signing Mode to unsigned. Save.

Find out more about expo env vars:

• https://expo.canny.io/feature-requests/p/dotenv-support
• https://stackoverflow.com/questions/52546254/react-native-with-expo-how-to-use-a-env-local-config-file
• https://docs.expo.io/versions/latest/workflow/configuration/
• https://docs.expo.io/versions/latest/sdk/constants/

• First, visit https://vast-beach-90080.herokuapp.com/graphql in order to 'wake up' the server. I don't want to pay a single pennie for now, so the server is hosted on a Heroku-free-tire, which goes to sleep when inactive. Booting the server up takes a few minutes.
• Start the emulator (genymotion is the emulator I use on Linux)
• Open a new terminal and start expo:

>> cd /bb/client
>> expo start

• Once expo is open, set Local as the type of CONNECTION on the expo dashboard and finally hit the Run on Android (iOS) emulator button. After a little while (could take several minutes) the app should start on the emulator.

• First, visit https://vast-beach-90080.herokuapp.com/graphql in order to 'wake up' the server. I don't want to pay a single pennie for now, so the server is hosted on a Heroku-free-tire, which goes to sleep when inactive. Booting the server up takes a few minutes.

• Open a new terminal and start expo with the --web flag:

>> cd /bb/client
>> expo start --web

• This should open a new window in your default browser with the web version of the app.

In case you launch the app running any of the expo commands above and you either get the app to load really slowly or get an [Network error]: TypeError: NetworkError when attempting to fetch resource. error in your console, then the problem is most probably caused by the server url not being reachable/configured correctly. In order to fix this, make sure that the base url of the extra.serverUrl variable at app.json matches the ip address of the expo app. You can find the expo ip address by looking at the expo console just above the QR code.

https://github.com/expo/web-examples/blob/master/docs/DEPLOYMENT.md https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/

Install the Netlify CLI with npm install netlify-cli -g.

Then run yarn run deploy:web.

Before building for release remember to bump the app version at app.json

then run yarn run build:android

expo build:android -t app-bundle

https://docs.expo.io/versions/latest/distribution/building-standalone-apps/

At some point if you need to clear you keystore credentials, use: expo build:android --clear-credentials

Notice: with every new release, you need to bump the version number, ios.buildNumber and android.versionCode (integer) at app.json before building.

When one of our building machines will be free, it'll start building your app. You can check how long you'll wait on Turtle status site. We'll print a url you can visit (such as expo.io/builds/some-unique-id) to watch your build logs. Alternatively, you can check up on it by running expo build:status. When it's done, you'll see the url of a .apk (Android) or .ipa (iOS) file -- this is your app. Copy and paste the link into your browser to download the file.

https://storybook.js.org/

To run storybook:

• Stop expo in case it's running, open the emulator in case it's closed and close the app from the emulator in case it's running;
• Go to app.json and set expo.extra.isStorybook to true. This tells expo to run storybook instead of the real app.
• Load/update stories: yarn run storybook. Wait until /storybook/storyloader.ts gets created/updated. Then stop storybook ctrl + C on Linux.
• Run expo as usual: expo start. Storybook should open automatically on the emulator.

https://pusher.com/tutorials/storybook-react-native

Thanks to https://thenounproject.com

https://medium.com/@ch1ll0ut1/how-to-setup-react-native-with-typescript-the-new-way-6c1f1cce6ed3

• https://github.com/expo/web-examples/blob/29d2eeed96d936d7feb1f29e35bee684b6519dfb/docs/FEATURES.md
• https://blog.bitsrc.io/how-to-react-native-web-app-a-happy-struggle-aea7906f4903
• https://github.com/expo/expo/tree/master/apps
• https://reactnavigation.org/docs/en/auth-flow.html (see also v5)
• https://github.com/react-native-elements/react-native-elements-app/blob/master/src/views/profile/screen1.js
• https://react-native-elements.github.io/react-native-elements-app/
• https://blog.bitsrc.io/how-to-react-native-web-app-a-happy-struggle-aea7906f4903
• https://github.com/inspmoore/rnw_boilerplate?source=post_page-----aea7906f4903----------------------
• https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0