How to use the pusher-js/react-native function in pusher-js

import PlayerList from '../components/PlayerList';
import ResultList from '../components/ResultList';
import Button from '../components/Button';
import IconButton from '../components/IconButton';
import SafeImage from '../components/SafeImage';
import ListPicker from '../components/ListPicker';
import CalculatorInput from '../components/CalculatorInput';
import TutorialModal from '../components/TutorialModal';
import StatusBar from '../components/StatusBar';

import Pusher from 'pusher-js/react-native';

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

var pusher = new Pusher(PUSHER_API_KEY, {
  cluster: PUSHER_CLUSTER,
  encrypted: true
});

export default class GameView extends Component {

	constructor(props){
		super(props);
		const {navigation} = props;
		const {user,game,token,showTutorial} = navigation.state.params;
		const is_host = (game.host === user.id);

		var channel = pusher.subscribe(game.identifier);
		channel.bind('game-update', function(data) {
		  this.setState({game:data.game});
		}.bind(this));

total_hp: hp,
        moves: moves,
        is_selected: false
      };
    });

    setTeam(team);
    setPokemon(team[0]);

    this.setState({
      is_loading: true
    });

    const username = navigation.getParam("username");

    this.pusher = new Pusher("YOUR_PUSHER_APP_KEY", {
      authEndpoint: "YOUR_NGROK_URL/pusher/auth",
      cluster: "YOUR_PUSHER_APP_CLUSTER",
      encrypted: true,
      auth: {
        params: {
          username: username,
          pokemon_ids: pokemon_ids,
          team_member_ids: team_member_ids
        }
      }
    });

    this.my_channel = this.pusher.subscribe(`private-user-${username}`);
    this.my_channel.bind("pusher:subscription_error", status => {
      Alert.alert(
        "Error",

componentWillMount() {

    this.pusher = new Pusher('YOUR PUSHER APP ID', {
      authEndpoint: 'YOUR AUTH SERVER ENDPOINT',
      cluster: 'YOUR PUSHER CLUSTER',
      encrypted: true
    });

    this.available_drivers_channel = this.pusher.subscribe('private-available-drivers');

    this.available_drivers_channel.bind('client-driver-request', (passenger_data) => {
      
      if(!this.state.has_passenger){

        Alert.alert(
          "You got a passenger!",
          "Pickup: " + passenger_data.pickup.name + "\nDrop off: " + passenger_data.dropoff.name,
          [
            {

componentDidMount() {

    const { navigation } = this.props;
    const username = navigation.getParam('username');

    this.pusher = new Pusher(pusher_app_key, {
      authEndpoint: `${base_url}/pusher-auth.php`,
      cluster: pusher_app_cluster,
      encrypted: true
    });

    this.users_channel = this.pusher.subscribe(`private-user-${username}`);
    this.users_channel.bind('client-rider-request', (hiker) => {
      
      Alert.alert(
        `${hiker.username} wants to ride with you`,
        `Pickup: ${hiker.origin} \nDrop off: ${hiker.dest}`,
        [
          {
            text: "Decline",
            onPress: () => {