How to make a voice call using Agora.io in react native?

[xts-bit]

How to make a voice call using Agora.io in react native? i am currently using the Agora Video kit to make a video call but how can i make a voice call using that? i looked at this repo but it has legacy code :( can you give me a new code example to do that?

import React, {useState} from 'react';
import AgoraUIKit from 'agora-rn-uikit';

const App = () => {
  const [videoCall, setVideoCall] = useState(true);
  const connectionData = {
    appId: '<Agora App ID>',
    channel: 'test',
  };
  const rtcCallbacks = {
    EndCall: () => setVideoCall(false),
  };
  return videoCall ? (
    <AgoraUIKit connectionData={connectionData} rtcCallbacks={rtcCallbacks} />
  ) : (
    <Text onPress={()=>setVideoCall(true)}>Start Call</Text>
  );
};

export default App;

[LichKing-2234]

Pls refer to https://github.com/AgoraIO-Extensions/react-native-agora/blob/main/example/src/examples/basic/JoinChannelAudio/JoinChannelAudio.tsx

[xts-bit]

@LichKing-2234 Can you please give me a basic code example to do that? without legacy code... Hope to hear soon

[LichKing-2234]

Pls refer to https://github.com/AgoraIO-Extensions/react-native-agora/blob/main/example/src/examples/basic/JoinChannelAudio/JoinChannelAudio.tsx

@xts-bit this is the basic code example

[xts-bit]

@LichKing-2234 This repo has legacy code... Can you give me a code example here?

[LichKing-2234]

@LichKing-2234 This repo has legacy code... Can you give me a code example here?

what means legacy code, could you pls give me more info?

[xts-bit]

Legacy Code:

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

class LegacyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.incrementCount = this.incrementCount.bind(this);
  }

  incrementCount() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <View>
        <Text style={{ fontSize: 18 }}>Legacy Component</Text>
        <TouchableOpacity onPress={this.incrementCount}>
          <Text>Increment Count</Text>
        </TouchableOpacity>
        <Text>Count: {this.state.count}</Text>
      </View>
    );
  }
}

export default LegacyComponent;

New Code (Using Functional Components and Hooks):

import React, { useState } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

const NewComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text style={{ fontSize: 18 }}>New Component</Text>
      <TouchableOpacity onPress={incrementCount}>
        <Text>Increment Count</Text>
      </TouchableOpacity>
      <Text>Count: {count}</Text>
    </View>
  );
};

export default NewComponent;

[xts-bit]

@LichKing-2234 i given you a example above please check it

[LichKing-2234]

okay, you can refer to

https://github.com/AgoraIO-Extensions/react-native-agora/blob/main/example/src/examples/hook/JoinChannelAudio/JoinChannelAudio.tsx

[xts-bit]

@LichKing-2234 Would you mind giving me a code example here that I can copy-paste and see how things work? the repo is written like a production app which doesn't make sense for demo apps

[LichKing-2234]

sorry, we don't have it at now. you can just refer to the code which relate to react-native-agora