Getting started on React Native

The Viafoura React Native SDK is published to npm as @viafoura/sdk-react-native. It is a standard React Native module that ships the native iOS and Android SDKs inside the package, so there are no native files to copy into your app. It autolinks in bare React Native apps and in Expo apps that run prebuild: one package, one integration path for both.

Because the SDK contains native code, every integration needs a native build. It cannot run in Expo Go or in a JavaScript-only setup.

Requirements

Install

npm install @viafoura/sdk-react-native

Then finish the native setup for your kind of app.

Expo

npx expo prebuild

The module autolinks, so nothing goes in app.json and no config plugin is needed. Prebuild runs the pod install for you on iOS. Run the app on a simulator, a device or a development build; Expo Go cannot load it.

Bare React Native

Android needs nothing beyond npm install. Gradle autolinking registers the native package for you.

On iOS, install pods with React Native's prebuilt dependency artifacts:

cd ios && RCT_USE_RN_DEP=1 pod install

Without RCT_USE_RN_DEP=1, CocoaPods compiles fmt 11.0.2 (pinned by RCT-Folly) from source, which fails under Xcode 26. To make it permanent, add this near the top of your Podfile:

ENV['RCT_USE_RN_DEP'] ||= '1'

Upgrading from an older integration

If your app was built from the old bare sample and carries hand-written bridges (RNPreviewComments*, RNChat*, RCTAuthService, the com.sdk view managers on Android, or the wrappers under src/native/), delete them. Everything they provided now comes from the package.

If your Podfile has pod 'ViafouraCore', delete that line too. The package vendors the same ViafouraSDK.xcframework, and CocoaPods refuses to install both:

[!] The '<YourApp>' target has frameworks with conflicting names: viafourasdk.xcframework.

Initialize

Initialize the SDK once at app startup, for example in App.tsx or a bootstrap module, then render the views you need:

import Viafoura from '@viafoura/sdk-react-native';

await Viafoura.initialize('SITE_UUID', 'your.domain.com', true);

import { PreviewCommentsView } from '@viafoura/sdk-react-native';

<PreviewCommentsView
  containerId="YOUR_CONTAINER_ID"
  articleUrl="https://example.com/article"
  articleTitle="Title"
  articleThumbnailUrl="https://example.com/thumb.jpg"
/>

initialize is idempotent for the same site. Calling it again with a different siteUUID or siteDomain rejects.

Sample Applications

Both sample apps live in the SDK repository, sdk-react-native-core, under examples/. They consume the package from the repository source, so they always match the code they sit next to.

The former standalone repositories sdk-react-native-expo and sdk-react-native are superseded by these folders.

Running a sample

Clone the repository and install at the root first. This builds the package and downloads the iOS framework the samples link against:

git clone https://github.com/viafoura/sdk-react-native-core
cd sdk-react-native-core
npm install

Expo sample

cd examples/expo
npm install
npx expo prebuild --clean
npm run ios
npm run android

Set your own values in viafouraConfig.ts first: siteUUID, siteDomain, containerId, articleUrl, articleTitle and articleThumbnailUrl. The ios/ and android/ folders are generated by prebuild and are not committed.

Bare sample

cd examples/bare
npm install
cd ios && RCT_USE_RN_DEP=1 pod install && cd ..
npm run ios
npm run android

The site and container values are in App.tsx.

What the Package Exposes

On iOS, PreviewCommentsView and ConversationStarterView present the SDK's own composer and profile screens natively when the reader taps reply or an author, which is why the standalone ProfileView and NewCommentView are not needed there.