react-native-smkit-ui/README.md

React Native library for SMKit UI - Advanced fitness assessments and workout programs with AI-powered motion detection and real-time performance tracking

# [Github:](https://github.com/sency-ai/smkit-sdk)

1. [ Installation ](#inst)
2. [ Setup ](#setup)
3. [ API ](#api)
4. [ Data ](#data)

<a name="inst"></a>

## 1. Installation

run `npm install @sency/react-native-smkit-ui`

## 2. Setup <a name="setup"></a>

# iOS Setup

1. Update _Podfile_ in `iOS` folder:

```
[1] add the source to the top of your Podfile.
source 'https://bitbucket.org/sencyai/ios_sdks_release.git'
source 'https://github.com/CocoaPods/Specs.git'

[2] add use_frameworks! commend to your target
target 'YOUR_TARGET' do
  use_frameworks!

[3] At the end of your code please add

  post_install do |installer|
   react_native_post_install(
     installer,
     :mac_catalyst_enabled => false
   )
   installer.pods_project.targets.each do |target|
     target.build_configurations.each do |config|
       config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
       config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
     end
   end
   __apply_Xcode_12_5_M1_post_install_workaround(installer)
 end
end

```

2. Run `NO_FLIPPER=1 pod install` to install the necessary pods.
3. Add camera permission request to `Info.plist`

```Xml
<key>NSCameraUsageDescription</key>
<string>Camera access is needed</string>
```

---

## Known issues

1. Dynamic/Static linking issues due to `use_frameworks`:
   If you're unable to use use_frameworks you should add the following code to your Podfile:

```ruby
# [1] Add the dynamic_frameworks array that will hold all of the dynamic frameworks names
dynamic_frameworks = ['SMKitUI', 'SMKit', 'SMBase', 'SwiftyJSON', 'SMBaseUI']

# [2] Add this pre_install function
pre_install do |installer|
  installer.pod_targets.each do |pod|
    if dynamic_frameworks.include?(pod.name)
      def pod.build_type
        Pod::BuildType.dynamic_framework
      end
    end
  end
end

# [3] Add this post_install function
post_install do |installer|
react_native_post_install(installer, config[:reactNativePath], :mac_catalyst_enabled => false)
   installer.pods_project.targets.each do |target|
    if dynamic_frameworks.include?(target.name)
        target.build_configurations.each do |config|
          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
          config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
        end
      end
    end
  end
end
```

Now you can run pod install.

# Android Setup

In order to integrate SMKitUI you need your app to target minSdk 26
Add on project level `build.gradle`:

```groovy
buildscript {
    ext {
        minSdkVersion = 26
    }
}
```

Add on project level build.gradle:

```groovy
allprojects {
    maven {
        url "https://artifacts.sency.ai/artifactory/release/"
    }
}
```

## 3. API<a name="api"></a>

### 1. Configure <a name="conf"></a>

```js
[1] First import configure
import { configure } from '@sency/react-native-smkit-ui/src/index.tsx';

[2] then call the configure function with your auth key
try{
  var res = await configure("YOUR_AUTH_KEY");
 }catch (e) {
  console.error(e);
}
```

To reduce wait time we recommend to call `configure` on app launch.

**⚠️ smkit_ui_library will not work if you don't first call configure.**

## 2. Start <a name="start"></a>

#### [Start Assessment](#data)

- [Start Assessment](https://github.com/sency-ai/smkit-ui-react-native-demo/blob/main/Assessment.md)

- [Start Workout](https://github.com/sency-ai/smkit-ui-react-native-demo/blob/main/Workout.md)

- [Build Your Own Assessment](https://github.com/sency-ai/smkit-ui-react-native-demo/blob/main/CustomizedAssessment.md)

##Data <a name="data"></a>

### AssessmentTypes

| Name (enum) | Description                                                                                                                                                                    | More info                                                                                    |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| Fitness     | For individuals of any activity level who seek to enhance their physical abilities, strength, and endurance through a tailored plan.                                           | [Link](https://github.com/sency-ai/smkit-sdk/blob/main/Assessments/AI-Fitness-Assessment.md) |
| Body360     | Designed for individuals of any age and activity level, this assessment determines the need for a preventative plan or medical support.                                        | [Link](https://github.com/sency-ai/smkit-sdk/blob/main/Assessments/360-Body-Assessment.md)   |
| Strength    | For individuals of any activity level who seek to assess their strength capabilities (core and endurance) \* This assessment will be available soon. Contact us for more info. | [Link](https://github.com/sency-ai/smkit-sdk/blob/main/Assessments/Strength.md)              |
| Cardio      | For individuals of any activity level who seek to assess their cardiovascular capabilities \* This assessment will be available soon. Contact us for more info.                | [Link](https://github.com/sency-ai/smkit-sdk/blob/main/Assessments/Cardio.md)                |
| Custom      | If Sency created a tailored assessment for you, you probably know it, and you should use this enum.                                                                            |                                                                                              |

Having issues? [Contact us](mailto:support@sency.ai) and let us know what the problem is.

# React Native SMKit UI Library

This is a React Native plugin that implements the SMKit UI native library for both iOS and Android platforms. The library provides fitness assessments, custom workouts, and workout programs with motion detection capabilities.

## Prerequisites

Before running the example app, ensure you have the following installed:

### General Requirements
- **Node.js** (version 18 or higher)
- **Yarn** package manager
- **React Native CLI**

### iOS Development
- **Xcode** (latest version)
- **CocoaPods**
- **iOS Simulator** or physical iOS device

### Android Development
- **Android Studio** with Android SDK
- **Java Development Kit (JDK)** 11 or higher
- **Android Virtual Device (AVD)** or physical Android device

## Quick Setup Guide

### 1. Install Dependencies

First, install Yarn globally if you haven't already:
```bash
npm install -g yarn
```

Install React Native CLI:
```bash
npm install -g @react-native-community/cli
```

### 2. Clone and Setup Project

```bash
# Navigate to the project root
cd /path/to/react-native-smkit-ui

# Install root dependencies
yarn install

# Build the library
yarn build
```

### 3. Setup Example App

```bash
# Create the library package
npm pack

# Navigate to example directory
cd example

# Update package.json to use the generated tarball
# The tarball will be named something like: sency-react-native-smkit-ui-1.3.2.tgz
```

Update `example/package.json` dependencies:
```json
{
  "dependencies": {
    "@sency/react-native-smkit-ui": "file:../sency-react-native-smkit-ui-1.3.2.tgz",
    // ... other dependencies
  }
}
```

```bash
# Install example dependencies
yarn install
```

## Running on iOS

### 1. Install iOS Dependencies
```bash
cd example/ios
pod install
cd ..
```

### 2. Start Metro Bundler
```bash
yarn start
```

### 3. Run iOS App
In a new terminal:
```bash
cd example
yarn ios
```

Or to run on a specific simulator:
```bash
yarn ios --simulator="iPhone 15"
```

## Running on Android

### 1. Setup Android Environment

Make sure you have:
- Android Studio installed with Android SDK
- Android Virtual Device (AVD) created and running, OR
- Physical Android device connected with USB debugging enabled

Check your setup:
```bash
npx react-native doctor
```

### 2. Configure Gradle Memory

The `example/android/gradle.properties` file should include:
```properties
org.gradle.jvmargs=-Xmx4096m -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
org.gradle.parallel=true
android.useAndroidX=true
android.enableJetifier=true
hermesEnabled=true
```

### 3. Start Metro Bundler
```bash
cd example
yarn start
```

### 4. Run Android App
In a new terminal:
```bash
cd example
yarn android
```

## Troubleshooting

### Metro Port Already in Use
If you get "EADDRINUSE: address already in use :::8081":
```bash
# Kill existing Metro process
lsof -ti:8081 | xargs kill -9

# Then restart
yarn start --reset-cache
```

### Android Build Issues

#### Java Heap Space Error
If you get "Java heap space" error:
```bash
# Clean build cache
cd example/android
./gradlew clean
cd ..

# Clear Gradle cache
rm -rf ~/.gradle/caches/

# Try building with specific architecture
yarn android --variant=debug --architectures=arm64-v8a
```

#### Dependency Resolution Issues
```bash
# Clear all caches and reinstall
cd example
rm -rf node_modules
yarn install

# Reset Metro cache
yarn start --reset-cache
```

### iOS Build Issues

#### Pod Installation Problems
```bash
cd example/ios
rm -rf Pods
rm Podfile.lock
pod cache clean --all
pod install
cd ..
```

#### Xcode Build Errors
- Open `example/ios/SmkitUiLibraryExample.xcworkspace` in Xcode
- Clean Build Folder (⌘ + Shift + K)
- Build the project (⌘ + B)

## Example App Features

The example app demonstrates the following SMKit UI library features:

### Fitness Assessments
- **Basic Assessment**: Standard fitness evaluation
- **Body360 Assessment**: Comprehensive body analysis
- **Custom Assessments**: Configurable assessment types

### Workouts
- **Custom Workouts**: Create personalized exercise routines
- **Workout Programs**: Multi-week fitness programs
- **Exercise Types**: Squats, push-ups, lunges, planks, and more

### Configuration Options
- Body zones (Full Body, Upper Body, Lower Body, Core)
- Difficulty levels (Low, Medium, High)
- Duration settings (Short, Medium, Long)
- Motion detection capabilities

## Development Workflow

### Making Changes to the Library

1. Make your changes in the `src/` directory
2. Build the library:
   ```bash
   yarn build
   ```
3. Create new package:
   ```bash
   npm pack
   ```
4. Update example app dependency and reinstall:
   ```bash
   cd example
   yarn install
   ```
5. Test your changes:
   ```bash
   yarn ios  # or yarn android
   ```

### Testing on Physical Devices

#### iOS
- Connect your iOS device
- Ensure it's registered in your Apple Developer account
- Run: `yarn ios --device`

#### Android
- Enable Developer Options and USB Debugging on your device
- Connect via USB
- Verify connection: `adb devices`
- Run: `yarn android`

## API Usage

The example app in `example/src/App.tsx` shows how to use the main library functions:

```typescript
import { configure, startAssessment, startCustomAssessment, startWorkoutProgram } from '@sency/react-native-smkit-ui';

// Configure the library
await configure(apiKey, userId);

// Start an assessment
await startAssessment(assessmentType, showSummary, customId);

// Start a workout program
const config = new WorkoutConfig(week, bodyZone, difficulty, duration, programId);
await startWorkoutProgram(config);
```

## Updating Native Dependencies

If you update the native SMKit UI library version (e.g., from `smkitui:1.3.6` to `smkitui:1.3.7`):

### 1. Update Plugin Dependencies

Update the version in the plugin's `android/build.gradle`:
```gradle
dependencies {
    implementation 'com.sency.smkitui:smkitui:1.3.7'  // Updated version
    // ...other dependencies
}
```

### 2. Rebuild Plugin Package

```bash
# From plugin root directory
npm pack
```

### 3. Update Example App

```bash
cd example

# Clean and reinstall dependencies
rm -rf node_modules
yarn install

# Clean Android build cache
cd android
./gradlew clean --refresh-dependencies
cd ..

# Clear React Native cache and rebuild
yarn start --reset-cache &
yarn android
```

### 4. Verify Native Dependency Update

```bash
cd example/android
./gradlew app:dependencies | grep smkitui
# Should show: com.sency.smkitui:smkitui:1.3.7
```

### 5. Troubleshoot Missing Dependencies

If you get "Could not read script" errors:

#### For react-native-config Issues:
```bash
cd example

# Reinstall react-native-config
yarn remove react-native-config
yarn add react-native-config

# If still missing, temporarily comment out in app/build.gradle:
# // apply from: "../../node_modules/react-native-config/android/dotenv.gradle"

# Use hardcoded API key temporarily in App.tsx for testing
```

#### Force Clean All Caches:
```bash
# Clean gradle caches
rm -rf ~/.gradle/caches/modules-2/files-2.1/com.sency.smkitui/

# Clean project
cd example/android
./gradlew clean --refresh-dependencies
cd ..

# Clean React Native
yarn start --reset-cache
```

## Android 15 Support

The example app supports Android 15 (API level 35) with the following configuration:

### Requirements
- compileSdkVersion = 35
- targetSdkVersion = 35
- Android Studio with Android 15 SDK
- Gradle 8.4+

### Configuration
The project is already configured for Android 15 in `example/android/build.gradle`:
```gradle
buildscript {
    ext {
        compileSdkVersion = 35 
        targetSdkVersion = 35   
        kotlinVersion = "1.9.10"  
    }
}
```

### Testing on Android 15
1. Create an Android 15 emulator in Android Studio
2. Ensure camera permissions are granted
3. Monitor for privacy-related warnings in logcat

## Environment Variables

The example app uses environment variables to manage the SMKit API key securely:

### Setup
1. Copy `.env.example` to `.env` in the `example` directory
2. Add your API key: `SMKIT_API_KEY=your_actual_key`
3. The `.env` file is automatically ignored by git

### Usage
```typescript
import Config from 'react-native-config';

const apiKey = Config.SMKIT_API_KEY;
await configure(apiKey);
```

### Troubleshooting Environment Variables
If you get "Missing API Key" errors:
1. Verify `.env` file exists in `example/` directory
2. Check `SMKIT_API_KEY` is set correctly
3. Clean and rebuild: `yarn start --reset-cache`
4. For testing, you can temporarily use a hardcoded key

## Publishing the Package

### Automated Publishing with Script

The project includes an automated publish script that handles the entire release process:

```bash
# Run the interactive publish script
npm run publish-package

# Or run directly
./scripts/publish.sh
```

#### Publish Script Features

The publish script (`scripts/publish.sh`) provides:

- ✅ **Git Status Check** - Warns about uncommitted changes
- ✅ **Version Management** - Interactive version selection (patch/minor/major/custom)
- ✅ **Build Verification** - Cleans and builds with Bob
- ✅ **Testing Support** - Creates test package for example app validation
- ✅ **NPM Authentication** - Checks login status and prompts if needed
- ✅ **Dry Run** - Shows package contents before publishing
- ✅ **Safety Confirmations** - Multiple confirmation steps
- ✅ **Automated Publishing** - Publishes to NPM with proper access
- ✅ **Changelog Reminder** - Prompts to update CHANGELOG.md with release notes
- ✅ **Git Tagging** - Creates and pushes release tags automatically
- ✅ **Verification** - Confirms package availability on NPM

#### Quick Commands

```bash
# Check current versions across all files
npm run version-check

# Create a test package for local testing
npm run test-package

# Full publish process
npm run publish-package
```

#### Manual Publishing Steps

If you prefer manual control:

```bash
# 1. Update version
npm version patch  # or minor/major

# 2. Build the library
npm run clean
npx bob build

# 3. Test with example app
npm pack
# Update example/package.json to use the .tgz file
# Test the example app

# 4. Publish to NPM
npm login
npm publish --access public

# 5. Create git tag
git tag v1.3.2
git push origin v1.3.2
```

#### Pre-Publishing Checklist

Before publishing, ensure:

- ✅ Native dependencies are updated (e.g., `smkitui:1.3.7`)
- ✅ Version numbers are consistent across all files
- ✅ CHANGELOG.md is updated with release notes
- ✅ Library builds successfully with `npx bob build`
- ✅ Example app works with the new build
- ✅ All changes are committed to git
- ✅ You have NPM publish permissions for `@sency/react-native-smkit-ui`

## 📚 Documentation

- **[API Reference](API.md)** - Complete API documentation with examples
- **[Changelog](CHANGELOG.md)** - Version history and release notes
- **[Example App](example/)** - Working example implementation

## 📦 Package Information

Visit our [NPM page](https://www.npmjs.com/package/@sency/react-native-smkit-ui) for:
- Latest version information
- Download statistics  
- Dependency information
- Version history

## Support

For issues and questions:
1. Check the troubleshooting sections above
2. Run `npx react-native doctor` to verify your environment
3. Check the example app implementation in `example/src/App.tsx`
4. Review the native iOS and Android implementations in the respective platform folders
5. Consult the [API Reference](API.md) for detailed function documentation

## License

MIT