Unable to open RazorpayCheckout when called from Modal in iOS - works in android

[meetyourdev]

RazorpayCheckout does not open when tried to call inside a Modal. This works in android and not in iOS.

I checked by creating a new project with the following code

<View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <TouchableHighlight style={{justifyContent : 'center', alignContent : 'center', paddingTop : 100}} onPress={() => {
            var options = {
              description: 'Credits towards consultation',
              image: 'https://i.imgur.com/3g7nmJC.png',
              currency: 'INR',
              key: 'rzp_test_1DP5mmOlF5G5ag',
              amount: '5000',
              name: 'foo',
              prefill: {
                email: '[email protected]',
                contact: '9191919191',
                name: 'Razorpay Software'
              },
              theme: {color: '#F37254'}
            }
            RazorpayCheckout.open(options).then((data) => {
              // handle success
              alert(`Success: ${data.razorpay_payment_id}`);
            }).catch((error) => {
              // handle failure
              alert("ERROR, error",error)
              alert(`Error: ${error.code} | ${error.description}`);
            });
          }}>
          <Text>ClickMe</Text>
          </TouchableHighlight> 

      </Modal>
       
      <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>

      </View>

[iThink32]

@meetyourdev the way we usually integrate it is by using a new component.The fact that we internally use another component to render our content might be the reason why it might not be opening in a modal context.But ideally I suggest you to follow the former approach.

[meetyourdev]

@iThink32 I have limited understanding in iOS development, can you kindly elaborate your explanation in why its not supported in iOS and works fine in Android . Thanks.

[iThink32]

@meetyourdev I actually tried to explain in terms of react-native anyway please use a new component and try opening react-native-razorpay on it.
Moreover both the iOS / android implementations follow the same logic but the implementation is platform specific , so I suggest you to use the above approach as it will work for both android and iOS

[meetyourdev]

@iThink32 ok thank you

[iThink32]

@meetyourdev updated the comment , pls check