title: Local Video Not Shown on first time in react-native-agora IOS but work for react native android
body: <h1>I'm facing issue in react-native-ios, can't able to see first time local video when calling through react-native-agora. In react-native android its work showing both local and remote video.</h1>
  
  <p><br/></p>
  
  <blockquote>
    <p>when I toogle video then it work fine for rendering local video screen on right side corner top side on remote video screen. but first time when video call receive it not render local video screen. </p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint-disable react-native/no-inline-styles */
  /* eslint-disable prettier/prettier */
  
  import React, { Component } from 'react';
  import { View, StyleSheet, NativeModules, ScrollView, Text, Dimensions, TouchableOpacity } from 'react-native';
  import { RtcEngine, AgoraView } from 'react-native-agora';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import { Actions } from 'react-native-router-flux';
  
  const { Agora } = NativeModules;                  //Define Agora object as a native module
  
  const {
    FPS30,
    AudioProfileDefault,
    AudioScenarioDefault,
    Adaptative,
  } = Agora;                                        //Set defaults for Stream
  
  class Video extends Component {
    constructor(props) {
      super(props);
      this.state = {
        peerIds: [],                                //Array for storing connected peers
        uid: Math.floor(Math.random() * 100),       //Generate a UID for local user
        appid: this.props.AppID,                    //Enter the App ID generated from the Agora Website
        channelName: this.props.ChannelName,        //Channel Name for the current session
        vidMute: false,                             //State variable for Video Mute
        audMute: false,                             //State variable for Audio Mute
        joinSucceed: false,                         //State variable for storing success
      };
      const config = {                            //Setting config of the app
        appid: this.state.appid,                  //App ID
        channelProfile: 0,                        //Set channel profile as 0 for RTC
        videoEncoderConfig: {                     //Set Video feed encoder settings
          width: 720,
          height: 1080,
          bitrate: 1,
          frameRate: FPS30,
          orientationMode: Adaptative,
        },
        audioProfile: AudioProfileDefault,
        audioScenario: AudioScenarioDefault,
      };
      RtcEngine.init(config);                     //Initialize the RTC engine
    }
    componentDidMount() {
      RtcEngine.on('userJoined', (data) =&gt; {
        const { peerIds } = this.state;             //Get currrent peer IDs
        if (peerIds.indexOf(data.uid) === -1) {     //If new user has joined
          this.setState({
            peerIds: [...peerIds, data.uid],        //add peer ID to state array
          });
        }
      });
      RtcEngine.on('userOffline', (data) =&gt; {       //If user leaves
        this.setState({
          peerIds: this.state.peerIds.filter(uid =&gt; uid !== data.uid), //remove peer ID from state array
        });
      });
      RtcEngine.on('joinChannelSuccess', (data) =&gt; {                   //If Local user joins RTC channel
        RtcEngine.startPreview();                                      //Start RTC preview
        this.setState({
          joinSucceed: true,                                           //Set state variable to true
        });
      });
      RtcEngine.joinChannel(this.state.channelName, this.state.uid);  //Join Channel
      RtcEngine.enableAudio();                                        //Enable the audio
    }
    /**
    * @name toggleAudio
    * @description Function to toggle local user's audio
    */
    toggleAudio() {
      let mute = this.state.audMute;
      console.log('Audio toggle', mute);
      RtcEngine.muteLocalAudioStream(!mute);
      this.setState({
        audMute: !mute,
      });
    }
    /**
    * @name toggleVideo
    * @description Function to toggle local user's video
    */
    toggleVideo() {
      let mute = this.state.vidMute;
      console.log('Video toggle', mute);
      this.setState({
        vidMute: !mute,
      });
      RtcEngine.muteLocalVideoStream(!this.state.vidMute);
    }
    /**
    * @name endCall
    * @description Function to end the call
    */
    endCall() {
      RtcEngine.destroy();
      Actions.home();
    }
    /**
    * @name peerClick
    * @description Function to swap the main peer videostream with a different peer videostream
    */
    peerClick(data) {
      let peerIdToSwap = this.state.peerIds.indexOf(data);
      this.setState(prevState =&gt; {
        let currentPeers = [...prevState.peerIds];
        let temp = currentPeers[peerIdToSwap];
        currentPeers[peerIdToSwap] = currentPeers[0];
        currentPeers[0] = temp;
        return { peerIds: currentPeers };
      });
    }
    /**
    * @name videoView
    * @description Function to return the view for the app
    */
    videoView() {
      return (
        &lt;View style={{ flex: 1 }}&gt;
          {
            this.state.peerIds.length &gt; 1
              ? &lt;View style={{ flex: 1 }}&gt;
                &lt;View style={{ height: dimensions.height * 3 / 4 - 50 }}&gt;
                  &lt;AgoraView style={{ flex: 1 }}
                    remoteUid={this.state.peerIds[0]} mode={1} key={this.state.peerIds[0]} /&gt;
                &lt;/View&gt;
                &lt;View style={{ height: dimensions.height / 4 }}&gt;
                  &lt;ScrollView horizontal={true} decelerationRate={0}
                    snapToInterval={dimensions.width / 2} snapToAlignment={'center'} style={{ width: dimensions.width, height: dimensions.height / 4 }}&gt;
                    {
                      this.state.peerIds.slice(1).map((data) =&gt; (
                        &lt;TouchableOpacity style={{ width: dimensions.width / 2, height: dimensions.height / 4 }}
                          onPress={() =&gt; this.peerClick(data)} key={data}&gt;
                          &lt;AgoraView style={{ width: dimensions.width / 2, height: dimensions.height / 4 }}
                            remoteUid={data} mode={1} key={data} /&gt;
                        &lt;/TouchableOpacity&gt;
                      ))
                    }
                  &lt;/ScrollView&gt;
                &lt;/View&gt;
              &lt;/View&gt;
              : this.state.peerIds.length &gt; 0
                ? &lt;View style={{ height: dimensions.height - 50 }}&gt;
                  &lt;AgoraView style={{ flex: 1 }}
                    remoteUid={this.state.peerIds[0]} mode={1} /&gt;
                &lt;/View&gt;
                : &lt;Text&gt;No users connected&lt;/Text&gt;
          }
          {
            !this.state.vidMute                                              //view for local video
              ? &lt;AgoraView style={styles.localVideoStyle} zOrderMediaOverlay={true} showLocalVideo={true} mode={1} /&gt;
              : &lt;View /&gt;
          }
          &lt;View style={styles.buttonBar}&gt;
            &lt;Icon.Button style={styles.iconStyle}
              backgroundColor="#0093E9"
              name={this.state.audMute ? 'mic-off' : 'mic'}
              onPress={() =&gt; this.toggleAudio()}
            /&gt;
            &lt;Icon.Button style={styles.iconStyle}
              backgroundColor="#0093E9"
              name="call-end"
              onPress={() =&gt; this.endCall()}
            /&gt;
            &lt;Icon.Button style={styles.iconStyle}
              backgroundColor="#0093E9"
              name={this.state.vidMute ? 'videocam-off' : 'videocam'}
              onPress={() =&gt; this.toggleVideo()}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
    render() {
      return this.videoView();
    }
  }
  
  let dimensions = {                                            //get dimensions of the device to use in view styles
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  };
  
  const styles = StyleSheet.create({
    buttonBar: {
      height: 50,
      backgroundColor: '#0093E9',
      display: 'flex',
      width: '100%',
      position: 'absolute',
      bottom: 0,
      left: 0,
      flexDirection: 'row',
      justifyContent: 'center',
      alignContent: 'center',
    },
    localVideoStyle: {
      width: 140,
      height: 160,
      position: 'absolute',
      top: 5,
      right: 5,
      zIndex: 100,
    },
    iconStyle: {
      fontSize: 34,
      paddingTop: 15,
      paddingLeft: 40,
      paddingRight: 40,
      paddingBottom: 15,
      borderRadius: 0,
    },
  });
  
  export default Video;</code></pre>
  </div>
  </div>
  </p>