A complete, ready-to-use chat interface with support for text, images, and voice messages.
Everything is handled for you automatically: WebSocket connection, message history, media uploads, and UI.
Installation npm install @upliftai/syngenta-assistant-rn
Required Peer Dependencies Install the following dependencies in your Expo project:
npx expo install \ react-native-reanimated \ react-native-gesture-handler \ react-native-safe-area-context \ react-native-keyboard-controller \ react-native-worklets \ expo-audio \ expo-file-system \ expo-haptics \ expo-image \ expo-image-picker \ @expo/vector-icons
Compatibility Requirement Version Expo SDK 54+ React Native 0.81+ React 19+ iOS 13.4+ Android API 23+
This SDK requires the New Architecture to be enabled.
Quick Start The SDK exports two components: a Provider and a Screen . Wrap your app with the provider, then render the chat screen wherever you need it.
import { SyngentaAssistantProvider , SyngentaChatScreen } from '@upliftai/syngenta-assistant-rn' ; export default function App () { return ( < SyngentaAssistantProvider token = "your-auth-token" > < SyngentaChatScreen /> </ SyngentaAssistantProvider > ); }
That’s it. The chat screen handles everything: WebSocket connection, message history, media uploads, and UI.
API Reference SyngentaAssistantProvider Context provider that configures the SDK. Must wrap any screen that renders SyngentaChatScreen.
< SyngentaAssistantProvider token = "your-auth-token" apiBaseUrl = "https://api.example.com" > { children } </ SyngentaAssistantProvider >
Authentication token for API access
Custom API server URL. Defaults to the staging server.
SyngentaChatScreen A complete chat interface component. Renders a full-screen chat experience with no configuration required.
Message List Automatic scrolling and history loading
Text Input Text input with send button
Image Picker Camera and gallery support
Voice Recording Gesture-controlled audio recording
Connection Status Real-time connection indicators
Theming Dark and light mode support
Integration Examples Expo Router
React Navigation
Conditional
app/_layout.tsx
app/chat.tsx
import { Stack } from 'expo-router' ; import { SyngentaAssistantProvider } from '@upliftai/syngenta-assistant-rn' ; export default function RootLayout () { const authToken = useAuthToken (); // your auth logic return ( < SyngentaAssistantProvider token = { authToken } > < Stack > < Stack.Screen name = "index" /> < Stack.Screen name = "chat" options = { { presentation: 'modal' , headerShown: false , } } /> </ Stack > </ SyngentaAssistantProvider > ); }
import { View , Text } from 'react-native' ; import { NavigationContainer } from '@react-navigation/native' ; import { createNativeStackNavigator } from '@react-navigation/native-stack' ; import { SyngentaAssistantProvider , SyngentaChatScreen } from '@upliftai/syngenta-assistant-rn' ; const Stack = createNativeStackNavigator (); export default function App () { return ( < SyngentaAssistantProvider token = "your-auth-token" > < NavigationContainer > < Stack.Navigator > < Stack.Screen name = "Home" component = { HomeScreen } /> < Stack.Screen name = "Chat" component = { SyngentaChatScreen } options = { { headerShown: false } } /> </ Stack.Navigator > </ NavigationContainer > </ SyngentaAssistantProvider > ); } function HomeScreen () { return < View >< Text > Hello World </ Text ></ View > ; }
import { useState } from 'react' ; import { Button , View } from 'react-native' ; import { SyngentaAssistantProvider , SyngentaChatScreen } from '@upliftai/syngenta-assistant-rn' ; export default function App () { const [ showChat , setShowChat ] = useState ( false ); return ( < SyngentaAssistantProvider token = "your-auth-token" > < View style = { { flex: 1 } } > { showChat ? ( < SyngentaChatScreen /> ) : ( < Button title = "Open Chat" onPress = { () => setShowChat ( true ) } /> ) } </ View > </ SyngentaAssistantProvider > ); }
Features
Type messages using the text input at the bottom of the screen. Press the send button or use the keyboard return key to send.
Tap the image button to:
Take a photo with the camera
Select an image from the gallery
Images can include an optional caption before sending.
Press and hold the microphone button to record a voice message:
Hold to start recordingRelease to send the recordingSlide left while holding to cancel The minimum recording duration is 750ms. Shorter recordings are automatically cancelled.
A banner appears at the top of the chat when: Status Meaning Connecting Establishing connection to server Disconnected Connection lost, will retry automatically Loading Previous Messages Fetching message history Error Connection failed
The chat interface automatically adapts to the system appearance:
Light mode : Beige background with green sent messagesDark mode : Dark background with teal sent messages Permissions Configure the following permissions in your app.json for full functionality:
{ "expo" : { "plugins" : [ [ "expo-image-picker" , { "photosPermission" : "Allow $(PRODUCT_NAME) to access your photos." , "cameraPermission" : "Allow $(PRODUCT_NAME) to access your camera." } ], [ "expo-audio" , { "microphonePermission" : "Allow $(PRODUCT_NAME) to access your microphone." } ] ] } }
Troubleshooting
useSyngentaAssistant must be used within SyngentaAssistantProvider
The SyngentaChatScreen must be rendered inside a SyngentaAssistantProvider: Correct - Wrap with provider:< SyngentaAssistantProvider token = "..." > < SyngentaChatScreen /> </ SyngentaAssistantProvider >
Wrong - Missing provider:
Verify token
Check that your authentication token is valid and not expired
Check network
Verify network connectivity on the device
Custom URL
If using a custom apiBaseUrl, ensure the server is reachable
Voice recording not working
Configure permissions
Ensure microphone permissions are configured in app.json
Grant access
The user must grant microphone access when prompted
Verify installation
Check that expo-audio is properly installed
Configure permissions
Ensure image picker permissions are configured in app.json
Grant access
The user must grant photo library/camera access when prompted
Verify installation
Check that expo-image-picker is properly installed
Reanimated/Gesture Handler errors
These libraries require additional setup:
Add Babel plugin
Add the Reanimated babel plugin to babel.config.js: module . exports = { presets: [ 'babel-preset-expo' ], plugins: [ ... 'react-native-reanimated/plugin' // last item in list ], };
Clear cache
Clear the bundler cache after changes:
Ensure your TypeScript version is compatible and that you have the latest type definitions: npm install -D @types/react @types/react-native
