mind-link-ai-widget/REACT_NATIVE_INTEGRATION.md

A react widget for React Web and React-Native Mobile integrations.

# React Native Integration Guide

## Quick Setup (2 minutes)

### 1. Install
```bash
npm install mind-link-ai-widget
```

### 2. Import & Use
```jsx
import React from 'react';
import { View } from 'react-native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <BehiveApp />
    </View>
  );
}
```

### 3. With User Data (Recommended)
```jsx
import BehiveApp from 'mind-link-ai-widget/behive';

const user = {
  fname: 'John',
  lname: 'Doe', 
  email: 'john@example.com',
  dob: '1990-01-01',
  gender: 'male'
};

<BehiveApp user={user} />
```

## Common Integration Patterns

### Full Screen Chat
```jsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function ChatScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <BehiveApp />
    </SafeAreaView>
  );
}
```

### Modal Chat
```jsx
import React, { useState } from 'react';
import { Modal, TouchableOpacity, Text } from 'react-native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function App() {
  const [showChat, setShowChat] = useState(false);

  return (
    <>
      <TouchableOpacity onPress={() => setShowChat(true)}>
        <Text>Open Chat</Text>
      </TouchableOpacity>
      
      <Modal visible={showChat} animationType="slide">
        <BehiveApp onBack={() => setShowChat(false)} />
      </Modal>
    </>
  );
}
```

### With Navigation
```jsx
import { useNavigation } from '@react-navigation/native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function ChatScreen() {
  const navigation = useNavigation();
  
  return (
    <BehiveApp onBack={() => navigation.goBack()} />
  );
}
```

## Props Reference

| Prop | Type | Description |
|------|------|-------------|
| `user.fname` | `string` | First name for personalization |
| `user.email` | `string` | User email |
| `product` | `string` | Your product identifier |
| `client` | `string` | Your app identifier |
| `channel` | `string` | Use "mobile" for React Native |
| `isLoggedIn` | `boolean` | User auth status |
| `onBack` | `function` | Navigation callback |

## Requirements

- React Native >= 0.70.0
- React >= 18.0.0

## Troubleshooting

### Metro Config Issue?
Add to `metro.config.js`:
```javascript
config.resolver.resolverMainFields = ['react-native', 'browser', 'main'];
```

### Import Error?
Use exact import path:
```jsx
import BehiveApp from 'mind-link-ai-widget/behive';
```

### Styling Issues?
Ensure parent container has `flex: 1`:
```jsx
<View style={{ flex: 1 }}>
  <BehiveApp />
</View>
```

## Features

✅ Pure React Native - no web dependencies  
✅ Mental health conversation starters  
✅ Personalized greetings  
✅ Full chat interface  
✅ TypeScript support  
✅ Accessibility ready  

## Support

Need help? Check the full documentation in `README-RN.md` or create an issue on GitHub.