Github:

1. Installation
2. Setup
3. API
4. Data

1. Installation

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

2. Setup

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

<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:

# [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:

buildscript {
    ext {
        minSdkVersion = 26
    }
}

Add on project level build.gradle:

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

3. API

1. Configure

[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

Start Assessment

• Start Assessment

• Start Workout

• Build Your Own Assessment

##Data

AssessmentTypes

Having issues? Contact us 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:

npm install -g yarn

Install React Native CLI:

npm install -g @react-native-community/cli

2. Clone and Setup Project

# 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

# 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:

{
  "dependencies": {
    "@sency/react-native-smkit-ui": "file:../sency-react-native-smkit-ui-1.3.2.tgz",
    // ... other dependencies
  }
}

# Install example dependencies
yarn install

Running on iOS

1. Install iOS Dependencies

cd example/ios
pod install
cd ..

2. Start Metro Bundler

yarn start

3. Run iOS App

In a new terminal:

cd example
yarn ios

Or to run on a specific simulator:

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:

npx react-native doctor

2. Configure Gradle Memory

The example/android/gradle.properties file should include:

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

cd example
yarn start

4. Run Android App

In a new terminal:

cd example
yarn android

Troubleshooting

Metro Port Already in Use

If you get "EADDRINUSE: address already in use :::8081":

# 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:

# 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

# 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

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:

   yarn build

3. Create new package:

   npm pack

4. Update example app dependency and reinstall:

   cd example
   yarn install

5. Test your changes:

   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:

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:

dependencies {
    implementation 'com.sency.smkitui:smkitui:1.3.7'  // Updated version
    // ...other dependencies
}

2. Rebuild Plugin Package

# From plugin root directory
npm pack

3. Update Example App

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

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:

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:

# 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:

buildscript {
    ext {
        compileSdkVersion = 35  // Android 15
        targetSdkVersion = 35   // Android 15
        kotlinVersion = "1.9.10"  // Updated for Android 15
    }
}

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

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:

# 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

# 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:

# 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 - Complete API documentation with examples
• Changelog - Version history and release notes
• Example App - Working example implementation

📦 Package Information

Visit our NPM page 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 for detailed function documentation

License

MIT