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, ChatSettingScreen } from './Screens';

const LoginScreen = () => {
  const navigation = useNavigation<any>();
  // Init localization
  TUITranslateService.provideLanguages(resources);
  TUITranslateService.useI18n('en-US');
  // Login
  const Login = () => {
    TUILogin.login({
      SDKAppID: 0, // Your SDKAppID
      userID: 'test_1', // Login UserID
      userSig: '', // Login userSig
      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.Screen
          name="ChatSetting"
          component={ChatSettingScreen}/>
      </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;