Local control icons not loading on iOS

[agoraio-community]

Local control icons not loading on iOS

[maxxfrazer]

@EkaanshArora I don't remember seeing this when I ran it on iOS, have you seen this ever?

[EkaanshArora]

I haven't seen this before, @umairlive490 are you using custom images for the icons? Can you share your config that you're passing to the UIKit?

[umairlive490]

@EkaanshArora No i am not using my own icons.I just used UIKit provided icons and here is my styleProps
const videoStyleProp = {
videoMode: {
max: VideoRenderMode.Hidden,
min: VideoRenderMode.Hidden,
},
localBtnContainer: {
marginVertical: 20,
},
remoteBtnContainer: {
display: 'none'
},
minViewContainer: {
padding: 5,
width: 200
},
minViewStyles: {
height: 200,
width: 200,
}
};

[EkaanshArora]

Hey @umairlive490 I tested out that styling, can you also share your rtcProps as I can't seem to reproduce the error. Can you check if just using the example app causes the same issues for you? We can look into device/os version specific things then as I can't reproduce the issue on my iPhone 12 mini running iOS 14.6.
Using the following code:

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

const App = () => {
  const [videoCall, setVideoCall] = useState(true);
  const videoStyleProp = {
    videoMode: {
      max: VideoRenderMode.Hidden,
      min: VideoRenderMode.Hidden,
    },
    localBtnContainer: {
      marginVertical: 20,
    },
    remoteBtnContainer: {
      display: 'none',
    },
    minViewContainer: {
      padding: 5,
      width: 200,
    },
    minViewStyles: {
      height: 200,
      width: 200,
    },
  };
  const rtcProps = {
    appId: '<myAppId>',
    channel: 'test',
  };
  const callbacks = {
    EndCall: () => setVideoCall(false),
  };
  return videoCall ? (
    <AgoraUIKit
      rtcProps={rtcProps}
      callbacks={callbacks}
      styleProps={videoStyleProp}
    />
  ) : (
    <></>
  );
};

export default App;

Works perfectly well for me.

[umairlive490]

@EkaanshArora It doesn't happen every time but some time this issue is occurring.
One more thing i wanted to make minView as square but on iOS it is not becoming square for equal height and width 200*200

[EkaanshArora]

It's hard to help without being able to reproduce the issue. Can you confirm if you see this problem in the production build?

I used your styling (minViewStyles: {height: 200, width: 200}) in the above screenshot, it's running on an iPhone and appears to be square. I'm not sure I follow.