Contents
IntroTakeawaysRecommended ArticleLinksProgrammingSlider Componentreact-tinder-card (good demo, worse api)Setting up React Native Android EmulatorRun AppExpo Setup darwin Platform ErrorsFix Greg’s Environment VariablesReinstall NVM from Download PageFix npm-cliBack to…Part 2 - After npm is workingMiraculous!Part 3 - react-native-tinder-swipe-cardsPart 4 Set JAVA_HOME Environment VariableREBOOTING PC
Intro
- Chau’s cool
- Swearings cool when its due to being in the heat of the moment.
- Chat’s cool
Takeaways
- WSL file performance still sucks. 12 MB/s on a 3 Gb drive… so 88 / 3000 Mbps roughly.
npm update
before trying to run install on old demo packages, like the beautiful, but slightly stale, demo from3DJakob
- Excellent documentation from
Expo
(??? who are they?)
Recommended Article
Expo is used in https://github.com/chaucodes/toodaloo/tree/main/client
Links
https://www.twitch.tv/chau_codes
www.twitch.tv/ddoinc
Programming
- React Native
- Standard React Native Animations
- what is the UI framework?
- 2xl, not 3xl like Tailwind.
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F4d2a5f33-7f89-4d5b-bc7b-db33b2f67608%2FUntitled.png%3Fid%3D3c88af9c-dca8-44c8-8700-e21197859259%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3D8MPYSZc9YDZDtrBeL3eL53_3Vo3BM_tg1-uwVq99Qv4?table=block&id=3c88af9c-dca8-44c8-8700-e21197859259&cache=v2)
Slider Component
react-native-tinder-swipe-cards
meteor-factory • Updated May 21, 2024
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F8686058b-206c-43f2-aedb-6cb5e03a8656%2FUntitled.png%3Fid%3D4478545e-e2b1-4230-870a-9b7545b640bf%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DISFFKRPlLUzepkmwjFMkwr_DV14spvtk06U_WJHQfWg?table=block&id=4478545e-e2b1-4230-870a-9b7545b640bf&cache=v2)
react-tinder-card (good demo, worse api)
Setting up React Native Android Emulator
‣
- Download
Android Studio
from https://developer.android.com/studio#downloads
- Create Emulated Device.
- Enable
USB Debugging
- https://developer.android.com/studio/debug/dev-options
- Enable Developer Options (tap about 5-7 times in Settings)
- Go to Developer Options under
Settings > System > Advanced > Developer Option
Run App
npm run start
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2Fb8b64d7f-977a-4bc5-b4cc-1a428979a6bc%2FUntitled.png%3Fid%3Db883f658-e4cb-4230-ad76-f53a9fc91225%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DnzWBZI-UhLkgZaM5-vhccVU-yh1MxDavNRXr8hT5rhI?table=block&id=b883f658-e4cb-4230-ad76-f53a9fc91225&cache=v2)
expo client:install:android
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2Fb6acafad-358f-4d01-9a45-53d47b4325de%2FUntitled.png%3Fid%3Da3834bff-07fb-423c-91ed-f8031d80de1b%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3D6NT-wP_zVZDxmHcqK4-uH4m9xqvn6a_Sq3Jo539d8p0?table=block&id=a3834bff-07fb-423c-91ed-f8031d80de1b&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2Fd192dd6c-1410-420e-b453-41efa7392b1c%2FUntitled.png%3Fid%3D5f49e7db-3a39-489b-a0e6-b16757a60927%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3D7nVHi8sIXGeso5lFaabbNEHpe6RzPAFPSQlZvGwJxD0?table=block&id=5f49e7db-3a39-489b-a0e6-b16757a60927&cache=v2)
Enabled `Intel x86 Emulator Accelerator (HAXM installer)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F55e38edd-760c-4c7b-a932-304e625bddf8%2FUntitled.png%3Fid%3Dd1df7e89-a62b-4b27-aef1-86eed98eb109%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DDfDB8NEHrGzhmLmuzvPcfq7nnoVdWP-m-o58XJopwHA?table=block&id=d1df7e89-a62b-4b27-aef1-86eed98eb109&cache=v2)
Is this error because I am on a 64 bit system?
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F5bd8774e-6ce0-41fe-bd57-183feb17891f%2FUntitled.png%3Fid%3Dcd756785-34c4-47ee-a4ce-820786f0fc02%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DyBinfLEVAV6JXtm0jrAIu3_t20t5AJCB_DMeIXXtKXw?table=block&id=cd756785-34c4-47ee-a4ce-820786f0fc02&cache=v2)
Abandoned, don’t need accelerator. What is it though?
Expo Setup ‣
![Whoops, expo is not the package. #GotAheadOfMyself](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2Fbf7d1870-b00f-4317-aff0-adcf1fbdf6dc%2FUntitled.png%3Fid%3D84911df6-e4e9-4a02-b96b-608cb62a6cc2%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DO1uwUDSFBqgH7VeWw2gkF-Nfr8Bm_YV5pekwsk61Io0?table=block&id=84911df6-e4e9-4a02-b96b-608cb62a6cc2&cache=v2)
expo
is not the package. #GotAheadOfMyselfnpm i -g expo-cli
darwin
Platform Errors
Since I am running Windows, not Mac or Ubuntu.
Was silly though, didn’t run in an ADMIN promnpt.
npm cache clean
Fix Greg’s Environment Variables
‘
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F914a4721-293d-49cf-a330-02169ee6de98%2FUntitled.png%3Fid%3D19ba70b5-6426-43b2-bbba-cc7f9149255a%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DhLxUcL_79IR-YR5cOEW_iD67ISNRk73Gz3gnBDoKaK4?table=block&id=19ba70b5-6426-43b2-bbba-cc7f9149255a&cache=v2)
refreshenv
nvm root
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F63b8ccd7-ca1e-4d10-a4ff-7032721430df%2FUntitled.png%3Fid%3Ddb53acfc-0ad3-4461-a9f1-034f5ce58955%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3D8uPpirIdU3cgMsV7obR79rp4DTO7yWtwUqDeJFU7HwM?table=block&id=db53acfc-0ad3-4461-a9f1-034f5ce58955&cache=v2)
Reinstall NVM from Download Page
Fix npm-cli
npm install -g npm-cli
ALL this was my fault for messing up my Windows Environment Variables the other day. 😵
Back to…
npm install -g expo-cli
Part 2 - After npm is working
‣
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F9c0a4ad6-517d-423b-9cca-a03ab882b0e7%2FUntitled.png%3Fid%3D902f08b9-bc1c-4c75-ba06-205a6fd1746a%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DUCTSaU17Lozrq7YUqgkwLDgscg3W3oIXglbp7c4Zpxg?table=block&id=902f08b9-bc1c-4c75-ba06-205a6fd1746a&cache=v2)
Miraculous!
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2Fc54e59f8-5095-4aae-9396-0cc2814465a1%2FUntitled.png%3Fid%3Db64bbac4-0783-4e7f-b0de-a692410574df%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DylvXSFWYUwe9Q7c_Dl9w4jQnldViTcfNVmJE1bID3oo?table=block&id=b64bbac4-0783-4e7f-b0de-a692410574df&cache=v2)
Part 3 - react-native-tinder-swipe-cards
Now that we have the first demo working, let us try the better package with methods like
onYup
/react-native-tinder-swipe-cards/examples/simple/node_modules/metro-bundler/src/blacklist.js:15
var sharedBlacklist = [ // /node_modules[\\/\\\\]react[/\\\\]dist[/\\\\].*/, /node_modules\\[\\/\\]react\\[\\/\\]dist\\[\\\\].*/, /website\\/node_modules\\/.*/, /heapCapture\\/bundle\\.js/, /.*\\/__tests__\\/.*/ ];
Part 4 ‣
npx create-expo-app --template bare-minimum && npm i -g expo-cli
expo install expo-web-browser expo run:android
Set JAVA_HOME
Environment Variable
- Not everyone or anybody may need to do this but me.
- I messed up my env variables.
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F3ceed08a-2a1e-4fc1-8ee4-c37e234a5734%2FUntitled.png%3Fid%3Dd1513fe5-9dd6-49b7-8214-c51796fac1d1%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DWc5L71FYyyHCI2SqW24R0kwFEj21ZbV8E8BfsWs5wzc?table=block&id=d1513fe5-9dd6-49b7-8214-c51796fac1d1&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2F1b9e2d8c-8a22-4a2e-9335-e1d5ac7910d2%2FUntitled.png%3Fid%3D57e97508-6c44-4f3a-9f80-ffb8b5828015%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3Dot8pGVosK2oE2BQg1wQZNUgt7e5fwk2iIGeoVKg6EE8?table=block&id=57e97508-6c44-4f3a-9f80-ffb8b5828015&cache=v2)
C:\Program Files\Java\jre1.8.0_321\bin C:\Progra~1\Java\jre1.8.0_321\bin refreshenv
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%2Fba91f543-f387-4990-9b87-4ea40b7885ba%2FUntitled.png%3Fid%3Da7a7ac0d-eb66-451f-b0b2-3eceed82e7aa%26table%3Dblock%26spaceId%3Dba9436ed-5ad1-4e4e-bb16-eac2d805e2e4%26expirationTimestamp%3D1721901600000%26signature%3DkPdH1GHblhI49XUXPXm0sprufr_AzOUuuUw2SScF5Xs?table=block&id=a7a7ac0d-eb66-451f-b0b2-3eceed82e7aa&cache=v2)
echo %JAVA_HOME% PS W:\www\chau-2022-09-02\chompchau> cmd Microsoft Windows [Version 10.0.19044.1889] (c) Microsoft Corporation. All rights reserved. W:\www\chau-2022-09-02\chompchau>echo %JAVA_HOME% C:\Program Files\Java\jre1.8.0_321\bin W:\www\chau-2022-09-02\chompchau>refreshenv Refreshing environment variables from registry for cmd.exe. Please wait...Finished.. W:\www\chau-2022-09-02\chompchau>echo %JAVA_HOME% C:\Progra~1\Java\jre1.8.0_321\bin W:\www\chau-2022-09-02\chompchau>
expo run:android
```
W:\www\chau-2022-09-02\chompchau>expo run:android WARNING: expo-cli has not yet been tested against Node.js v17.5.0. If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues expo-cli supports following Node.js versions: * >=12.13.0 <15.0.0 (Maintenance LTS) * >=16.0.0 <17.0.0 (Active LTS) This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421 To use the local CLI instead (recommended in SDK 46 and higher), run: › npx expo run:android › Building app... ERROR: JAVA_HOME is set to an invalid directory: C:\Progra~1\Java\jre1.8.0_321\bin Please set the JAVA_HOME variable in your environment to match the location of your Java installation. W:\www\chau-2022-09-02\chompchau\android\gradlew.bat exited with non-zero code: 1 Error: W:\www\chau-2022-09-02\chompchau\android\gradlew.bat exited with non-zero code: 1 at ChildProcess.completionListener (C:\Users\gsteve\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\spawn-async\src\spawnAsync.ts:65:13) at Object.onceWrapper (node:events:646:26) at ChildProcess.emit (node:events:526:28) at ChildProcess.cp.emit (C:\Users\gsteve\AppData\Roaming\npm\node_modules\expo-cli\node_modules\cross-spawn\lib\enoent.js:34:29) at maybeClose (node:internal/child_process:1090:16) at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) ... at spawnAsync (C:\Users\gsteve\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\spawn-async\src\spawnAsync.ts:26:19) at spawnGradleAsync (C:\Users\gsteve\AppData\Roaming\npm\node_modules\expo-cli\src\commands\run\android\spawnGradleAsync.ts:83:18) at assembleAsync (C:\Users\gsteve\AppData\Roaming\npm\node_modules\expo-cli\src\commands\run\android\spawnGradleAsync.ts:57:16) at actionAsync (C:\Users\gsteve\AppData\Roaming\npm\node_modules\expo-cli\src\commands\run\android\runAndroid.ts:145:9) W:\www\chau-2022-09-02\chompchau>