Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/mobile/Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ gem 'bigdecimal'
gem 'logger'
gem 'benchmark'
gem 'mutex_m'
gem 'nkf'
106 changes: 76 additions & 30 deletions apps/mobile/README.md
Original file line number Diff line number Diff line change
@@ -1,51 +1,97 @@
# DevCard Mobile
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

The mobile application for DevCard, built with bare **React Native** and **React Navigation**.
# Getting Started

This app provides:
- Profile and context card management
- Per-Platform OAuth Connections for silent API follows
- Advanced analytics for tracking profile views
- The Hybrid Follow Engine (API, WebView, Link)
> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.

## Getting Started
## Step 1: Start Metro

> **Note**: Make sure you have completed the [React Native Environment Setup](https://reactnative.dev/docs/environment-setup) guide before proceeding.
First, you will need to run **Metro**, the JavaScript build tool for React Native.

### Install Dependencies
To start the Metro dev server, run the following command from the root of your React Native project:

```bash
pnpm install
```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

### Start Metro Bundler
## Step 2: Build and run your app

With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:

### Android

First, start Metro, the JavaScript bundler:
```sh
# Using npm
npm run android

```bash
pnpm start
# OR using Yarn
yarn android
```

### Run on Android
### iOS

In a new terminal:
For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).

```bash
pnpm android
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:

```sh
bundle install
```

### Run on iOS
Then, and every time you update your native dependencies, run:

```sh
bundle exec pod install
```

For iOS, you must install CocoaPods dependencies first (Mac only):
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

```bash
cd ios && pod install && cd ..
pnpm ios
```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

## Architecture
If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

## Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- **Screens**: Located in `src/screens`
- **Navigation**: Managed via `src/navigation/MainTabs.tsx`
- **Context API**: Handles global authentication and token management
- **Theme**: Tokens are strictly defined in `src/theme/tokens.ts`
- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
111 changes: 111 additions & 0 deletions apps/mobile/android/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
# DevCard Android

Native Android project for the DevCard React Native app.

Use this folder for Android-specific Gradle builds, native configuration, emulator installs, and troubleshooting. For normal development, run commands from `apps/mobile` unless a command below says otherwise.

## Quick Start

Start Metro from `apps/mobile`:

```cmd
npx react-native start --reset-cache
```

Open a second terminal and run the Android app:

```cmd
cd /d D:\DC\apps\mobile
npx react-native run-android -- --active-arch-only
```

`--active-arch-only` builds only the connected emulator/device architecture, which is much faster during local development.

## Requirements

- Node.js `>= 22.11.0`
- Android Studio with Android SDK and emulator support
- Java version compatible with the Android Gradle Plugin used by this project
- npm dependencies installed from `apps/mobile`
- An Android emulator running, or a physical device connected with USB debugging enabled

Install mobile dependencies from `apps/mobile`:

```cmd
npm install --legacy-peer-deps
```

## Useful Gradle Commands

Run these from `apps/mobile/android`.

Build a debug APK:

```cmd
gradlew.bat app:packageDebug -PreactNativeArchitectures=x86_64
```

Install the debug build on a connected emulator/device:

```cmd
gradlew.bat app:installDebug -PreactNativeArchitectures=x86_64
```

Get detailed output for a failing build:

```cmd
gradlew.bat app:packageDebug --stacktrace -PreactNativeArchitectures=x86_64
```

## Architecture Builds

`gradle.properties` currently sets:

```properties
reactNativeArchitectures=x86_64
```

This keeps Windows emulator builds smaller and faster. Override it when targeting another device architecture:

```cmd
gradlew.bat app:packageDebug -PreactNativeArchitectures=arm64-v8a
```

Use all common Android ABIs only when needed:

```cmd
gradlew.bat app:packageDebug -PreactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
```

## Troubleshooting

### Metro Watches `D:\packages`

If Metro reports `ENOENT` for `D:\packages`, check `apps/mobile/metro.config.js`. The monorepo root should resolve to `D:\DC`, not `D:\`.

### Gradle Fails At `:app:packageDebug`

Rerun the package task with `--stacktrace` so the real error appears:

```cmd
gradlew.bat app:packageDebug --stacktrace -PreactNativeArchitectures=x86_64
```

### Builds Are Slow

Use one of these faster local options:

- `npx react-native run-android -- --active-arch-only`
- `gradlew.bat app:packageDebug -PreactNativeArchitectures=x86_64`

Avoid building every ABI unless you are preparing a broader test or release build.

### Windows Long Path Errors

If Windows reports paths longer than 260 characters, enable long paths from an Administrator PowerShell:

```powershell
New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" -Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force
```

Restart the terminal after changing this setting.
27 changes: 27 additions & 0 deletions apps/mobile/android/app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

<uses-permission android:name="android.permission.INTERNET" />

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme"
android:usesCleartextTraffic="${usesCleartextTraffic}"
android:supportsRtl="true">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
4 changes: 2 additions & 2 deletions apps/mobile/android/gradle.properties
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ android.useAndroidX=true
# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
reactNativeArchitectures=x86_64

# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
newArchEnabled=false
newArchEnabled=true

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
Expand Down
Binary file modified apps/mobile/android/gradle/wrapper/gradle-wrapper.jar
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-9.3.1-bin.zip
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
Expand Down
3 changes: 0 additions & 3 deletions apps/mobile/android/gradlew

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions apps/mobile/android/gradlew.bat

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion apps/mobile/android/settings.gradle
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
rootProject.name = 'com.devcard.app'
rootProject.name = 'DevCard'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')
2 changes: 1 addition & 1 deletion apps/mobile/ios/DevCard/LaunchScreen.storyboard
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="DevCard" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="RNTest" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
<rect key="frame" x="0.0" y="202" width="375" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<nil key="highlightedColor"/>
Expand Down
Loading
Loading