Login with phone works on Android but not on ios

[aohua]

Issue Description

We are using react-native-facebook-account-kit 1.0.0, it works perfectly on Android, however the same code on ios does not trigger the account kit UI.

Steps to Reproduce / Code Snippets

The code are very straightforward and it works on Android

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text } from 'react-native';
import RNAccountKit from 'react-native-facebook-account-kit';
import { trackEvent } from '../Lib/Tracker';

import styles from './Styles/AccountKitLoginStyle';

import I18n from '../I18n';

export default class AccountKitLogin extends Component {
  // Prop type warnings
  static propTypes = {
    onLoginFinished: PropTypes.func.isRequired,
    style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  };

  componentDidMount() {
    RNAccountKit.configure({
      responseType: 'code',
      countryWhitelist: ['SG'],
      initialPhoneCountryPrefix: '+65',
    });
  }

  _handleAccountKitLogin = () => {
    trackEvent('mobile_no_login');
    const { onLoginFinished } = this.props;
    RNAccountKit.loginWithPhone().then(token => {
      if (!token) {
        console.log('Login cancelled');
      } else {
        onLoginFinished(null, token);
      }
    });
  };

  render() {
    const { style } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={0.8}
        style={[styles.accountKitLogin, style]}
        onPress={this._handleAccountKitLogin}
      >
        <Text style={styles.accountKitText}>
          {I18n.t('Proceed with mobile number')}
        </Text>
      </TouchableOpacity>
    );
  }
}

however it doesn't work in ios unless we do something like this:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text } from 'react-native';
import RNAccountKit from 'react-native-facebook-account-kit';
import { trackEvent } from '../Lib/Tracker';

import styles from './Styles/AccountKitLoginStyle';

import I18n from '../I18n';

export default class AccountKitLogin extends Component {
  // Prop type warnings
  static propTypes = {
    onLoginFinished: PropTypes.func.isRequired,
    style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  };

  componentDidMount() {
    RNAccountKit.configure({
      responseType: 'code',
      countryWhitelist: ['SG'],
      initialPhoneCountryPrefix: '+65',
    });
  }

  _handleAccountKitLogin = () => {
    trackEvent('mobile_no_login');
  };

  render() {
    // move this part into render method triggers the account kit UI
    const { onLoginFinished } = this.props;
    RNAccountKit.loginWithPhone().then(token => {
      if (!token) {
        console.log('Login cancelled');
      } else {
        onLoginFinished(null, token);
      }
    });
    const { style } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={0.8}
        style={[styles.accountKitLogin, style]}
        onPress={this._handleAccountKitLogin}
      >
        <Text style={styles.accountKitText}>
          {I18n.t('Proceed with mobile number')}
        </Text>
      </TouchableOpacity>
    );
  }
}

Expected Results

Same code should work on iOS.

Additional Information

• React Native Account Kit version: 1.0.0
• React Native version: 0.57.6
• Platform(s) (iOS, Android, or both?): iOS
• Platform Version(s): latest

[jpgarcia]

This is very strange thing. Is the _handleAccountKitLogin handler called when you click the button on ios if you just console.log?

If you want I can help you if you put together the sample in a public repo so I can troubleshoot it?

[aohua]

I think we found the problem, because our login page is a modal and account kit is trying to show another modal. Thank you for the fast reply. I will close this issue.