22 Days

Double your max consecutive pullups in only three weeks with this mobile app.

Acknowledgements

Inspired by and built to accompany the Double Your Max Pullups in 22 Days! video by Jeff Cavaliere of ATHLEAN-X.

Usage/Examples

Component Hierarchy

index.js -> App.js -> Home.js -> StatusBar Report.js Today.js -> KeyboardAvoidingView -> ScrollView -> Workout.js -> Text.js, Input.js, CompleteButton DevMenu.js -> Incrementer.js, Pressable

Run Locally

See the React Native documentation for help with Setting up the development environment to work on a React Native app.

Clone the project

  git clone git@github.com:aenyeart/22days.git

Go to the project directory

  cd 22days

Install dependencies

  npm install

Start the server *

  npx expo start
  # If you prefer a different command, this is configured via scripts in package.json to run by using the following command:
  npm start

Note: Mobile device and local machine must be on same network, and unsecured networks (e.g. coffee shop) seem to cause problems for this. A workaround from Expo docs:

First, make sure you are on the same Wi-Fi network on your computer and your device.

If it still doesn't work, it may be due to the router configuration — this is common for public networks. You can work around this by choosing the "Tunnel" connection type when starting the development server, then scanning the QR code again.

npx expo start --tunnel

If you get the following response:

✔ The package @expo/ngrok@^4.1.0 is required to use tunnels, would you like to install it globally? … yes
Installing @expo/ngrok@^4.1.0...
Installed @expo/ngrok@^4.1.0
CommandError: Please install @expo/ngrok@^4.1.0 and try again

...then try running this:

npm i @expo/ngrok@^4.1.0

Run on iOS device via side-loading

Requirements:

iPhone, connected via USB to...
a Mac computer with XCode installed

Source: No bundle URL present fixed. Make sure you’re running a packager… | by Onexlab | Medium

Setup: ”build:ios”: "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'", added to package.json.

In Terminal, go to the project directory and enter: $ npm run build:ios
XCode -> Build Phases -> Copy Bundle Resources: click on the plus button, then select the file main.jsbundleand click on the Add button
Try to re-run your app: npx react-native run-ios
Trust developer on device: Invalid code signature due to inadequate entitlements - Stack Overflow

You will see an Untrusted Developer message. To solve this issue on the device, go to Settings > General > VPN and Device Management in newer iOS versions and Settings > General > Profiles or Settings > General > Device Management in older iOS versions (depending on the device type and the iOS version). There, trust the developer and allow the apps to run.

Using React Native Debugger

Shortened from Debugging tools - Expo Documentation and jhen0409/react-native-debugger: The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools:

Install React Native Debugger (RND) on your machine. If you're on macOS you can run: brew install react-native-debugger
Open RND, then press [Command] + [T] to open a new tab.
In the new RND tab, specify the port that Expo is running on. After launching 22days (via npx expo start), you can find this information in the Terminal. For example, the following line in the Terminal indicates that the port number is 19000:

    Metro waiting on exp://192.168.68.66:19000"

After setting the port number in RND, ensure that 22days is running in Simulator.
In Terminal / Expo's CLI, press 'm' to toggle the Developer Menu in the Simulator. From that menu, select 'Debug Remote JS'.

Building for Web

npx expo export:web

After running the above, the generated HTML, CSS, and JS files will be in the web-build directory.

To deploy to 22days.netlify.app, while in the web-build directory, run:

netlify deploy --prod

aenyeart/22days