Integration

npm install @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  StyleSheet,
} from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { UIKitProvider } from '@tencentcloud/chat-uikit-react-native';
import resources from '@tencentcloud/chat-uikit-react-native/i18n';
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from '@tencentcloud/tui-core';
import { ConversationListScreen, ChatScreen } from './Screens';

const config = {
  SDKAppID: 0, // Your SDKAppID
  userID: 'test-1', // Login UserID
  userSig: '', // Your userSig
}

const LoginScreen = () => {
  const navigation = useNavigation<any>();
  // Init localization
  TUITranslateService.provideLanguages(resources);
  TUITranslateService.useI18n('en-US');
  // Login
  const Login = () => {
    TUILogin.login({
      ...config,
      useUploadPlugin: true,
      framework: 'rn',
    }).then(() => {
      navigation.navigate('ConversationList');
    });
  };


  return (
    <View style={styles.container}>
      <Image
        style={styles.logo}
        source={{ uri: 'https://web.sdk.qcloud.com/im/assets/images/tencent_rtc_logo.png' }}
      />
      <TouchableOpacity style={styles.buttonContainer} onPress={Login}>
        <Text style={styles.buttonText}>Log in</Text>
      </TouchableOpacity>
    </View>
  );
};


const Navigation = () => {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{ headerShown: false }}
        initialRouteName="Login"
      >
        <Stack.Screen
          name="Login"
          component={LoginScreen}
        />
        <Stack.Screen
          name="ConversationList"
          component={ConversationListScreen}
        />
        <Stack.Screen
          name="Chat"
          component={ChatScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};


const App = () => {
  return (
    <UIKitProvider>
      <Navigation />
    </UIKitProvider>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  logo: {
    width: 232,
    height: 80,
  },
  buttonContainer: {
    width: '80%',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 11,
    borderRadius: 5,
    backgroundColor: '#2F80ED',
  },
  buttonText: {
    fontSize: 18,
    lineHeight: 24,
    color: '#FFFFFF',
  },
});


export default App;