### Start Development Server

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Start the Expo development server to run the app in development mode.

```bash
npm start
```

--------------------------------

### Configure Backend URL

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Copy the example environment file and edit it to set your deployed backend server URL. For local development, use platform-specific addresses.

```bash
cp .env.example .env
```

```env
EXPO_PUBLIC_BACKEND_URL=https://your-backend-server.com
```

--------------------------------

### Install Dependencies

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Install project dependencies using npm.

```bash
npm install
```

--------------------------------

### Configure Backend URL in Android

Source: https://github.com/transactionlink/examples/blob/main/client/android/README.md

Copy the example configuration file and edit it to set your deployed backend server URL. For local development, use platform-specific addresses for emulators or physical devices.

```bash
cp app/src/main/java/com/example/transactionlink/Config.kt.example \
   app/src/main/java/com/example/transactionlink/Config.kt
```

```kotlin
object Config {
    const val BACKEND_URL = "https://your-backend-server.com"
    const val WIDGET_BASE_URL = "https://widget.transactionlink.io"
}
```

--------------------------------

### Install iOS Dependencies

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Run this command to install CocoaPods dependencies for your iOS project. This is often necessary after cloning a project or updating dependencies.

```bash
npx pod-install
```

--------------------------------

### Configure Android SDK Environment Variables

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Set up the ANDROID_HOME environment variable and add emulator and platform-tools to your PATH for local development builds. Remember to source your profile file after making changes.

```bash
# Add to your ~/.zshrc or ~/.bash_profile
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

```

```bash
source ~/.zshrc  # or source ~/.bash_profile
```

--------------------------------

### Build for Android Production

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Build a release APK for Android. This command is used for production E2E testing and requires Android Studio and a connected device or emulator.

```bash
npm run build:android
```

--------------------------------

### Launch Embedded Transactionlink Widget

Source: https://github.com/transactionlink/examples/blob/main/client/vanilla/embedded.html

This JavaScript code demonstrates how to create a workflow execution, dynamically load the Transactionlink widget script, and open the widget. It includes logic to wait for the workflow to complete before closing the widget.

```javascript
let transactionLinkReady = false;

function createWorkflowExecution() {
  // Create workflow execution to obtain ID and token
  // Note that a call to Transactionlink API needs to happen server-side
  // so that you don't expose your credentials in public
  return fetch('http://localhost:8101/workflow-execution', {
    method: 'POST'
  })
  .then((response) => response.json())
  .catch((err) => {
    console.error(err);
  });
}

function isWorkflowFinished(workflowId) {
  return fetch(`http://localhost:8101/workflow-status?workflowId=${workflowId}`)
    .then((response) => response.json())
    .then((data) => data.status === 'COMPLETED')
    .catch((err) => {
      console.error(err);
      return false;
    });
}

async function launchWidget() {
  const { workflowId, token } = await createWorkflowExecution();
  if (!transactionLinkReady) {
    window.transactionlink_ready = async () => {
      transactionLinkReady = true;
      await openWidget(workflowId, token);
    };
    const script = document.createElement('script');
    script.src = 'https://widget.transactionlink.io/transactionlink-widget.umd.js';
    document.head.appendChild(script);
  } else {
    await openWidget(workflowId, token);
  }
}

async function openWidget(workflowId, token) {
  window.transactionlink.setOptions({ token });
  window.transactionlink.open();

  let finished = false;
  // Wait until workflow is finished - ask the server for status periodically
  while (!finished) {
    // Wait 2s between calls
    await new Promise((resolve) => setTimeout(resolve, 2000));
    finished = await isWorkflowFinished(workflowId);
  }

  // Close widget when workflow is finished
  window.transactionlink.close();
}

// Get the button element
const addButton = document.getElementById('launch-widget');

// Add a click event listener to the button
addButton.addEventListener('click', launchWidget);
```

--------------------------------

### Build for iOS Production

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Build a release version for iOS. This command is used for production E2E testing and requires Xcode, CocoaPods, and a connected device or simulator. This command requires macOS.

```bash
npm run build:ios
```

--------------------------------

### Verify Android SDK Location

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Check if the ANDROID_HOME environment variable is set correctly. This is crucial for Android builds.

```bash
echo $ANDROID_HOME
```

--------------------------------

### Configuration Variables

Source: https://github.com/transactionlink/examples/blob/main/server/python/README.md

Place your Transactionlink API key, secret key, and workflow definition ID in these variables within the server configuration file. Ensure the secret key is not exposed in frontend code.

```python
WIDGET_API_KEY = "[your widget API key]" # TODO put your data
WIDGET_SECRET_KEY = "[your widget secret key]" # TODO put your data
WORKFLOW_DEFINITION_ID = "[your workflow definition id]" # TODO put your data
```

--------------------------------

### Run on Android Emulator/Device

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Run the React Native Expo app on an Android device or emulator. Expo automatically generates the android/ folder.

```bash
npm run android
```

--------------------------------

### Trigger Transactionlink Widget with JavaScript

Source: https://github.com/transactionlink/examples/blob/main/client/vanilla/hosted.html

Use this JavaScript function to initiate a Transactionlink workflow and redirect the user to the widget. Ensure the API call to obtain the redirection link is handled server-side to protect credentials.

```javascript
function redirectToWidget() {
  // Create workflow execution to obtain redirection link
  // Note that a call to Transactionlink API needs to happen server-side
  // so that you don't expose your credentials in public
  fetch('http://localhost:8101/workflow-execution', {
    method: 'POST'
  })
  .then((response) => response.json())
  .then((data) => {
    window.location = data.link;
  })
  .catch((err) => {
    console.error(err);
  });
}

// Get the button element
const addButton = document.getElementById('open-widget');

// Add a click event listener to the button
addButton.addEventListener('click', redirectToWidget);
```

--------------------------------

### Run on iOS Simulator/Device

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Run the React Native Expo app on an iOS simulator or device. Expo automatically generates the ios/ folder. This command requires macOS.

```bash
npm run ios
```

--------------------------------

### Allow Cleartext Traffic for Local Development

Source: https://github.com/transactionlink/examples/blob/main/client/android/README.md

Modify the network security configuration to allow unencrypted HTTP traffic to local development addresses. This is necessary for Android 9+ when using HTTP locally. Remember to remove or restrict this for production.

```xml
<domain includeSubdomains="true">YOUR_LOCAL_IP</domain>
```

--------------------------------

### Node.js Transactionlink API Credentials Configuration

Source: https://github.com/transactionlink/examples/blob/main/server/node/README.md

Configure your Transactionlink API key, secret key, and workflow definition ID in your Node.js server file. Never expose the secret key in frontend code.

```javascript
const WIDGET_API_KEY = '[your widget API key]'; //  put your credentials
const WIDGET_SECRET_KEY = '[your widget secret key]'; // put your credentials
const WORKFLOW_DEFINITION_ID = '[your workflow definition id]'; // put your workflow definition ID
```

--------------------------------

### Clear Expo Caches

Source: https://github.com/transactionlink/examples/blob/main/client/react-native-expo/README.md

Use this command to clear Expo caches, which can resolve various build and runtime issues on both Android and iOS.

```bash
npx expo start -c
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.