Phone number country code not interactive on iOS

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line
  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 493.94 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v10.16.0/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v10.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 89.1.22.72
    Chrome: 89.0.4389.128
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    @aws-amplify/ui-react: ^1.0.6 => 1.0.6 
    @babel/core: ~7.9.0 => 7.9.0 
    @react-native-community/eslint-config:  1.1.0 
    @react-native-community/eslint-plugin:  1.0.0 
    @react-native-community/masked-view: ^0.1.10 => 0.1.10 
    @react-native-community/netinfo: ^5.9.10 => 5.9.10 
    @react-navigation/native: ^5.9.2 => 5.9.2 
    @react-navigation/stack: ^5.14.2 => 5.14.2 
    HelloWorld:  0.0.1 
    aws-amplify: ^3.3.26 => 3.3.26 
    aws-amplify-react-native: ^4.3.2 => 4.3.2 
    babel-plugin-inline-view-configs:  0.0.5 
    bluebird: ^3.7.2 => 3.7.2 
    eslint: ^4.19.1 => 4.19.1 
    eslint-config-airbnb-base: ^12.1.0 => 12.1.0 
    eslint-plugin-import: ^2.11.0 => 2.22.1 
    eslint-plugin-react: ^7.8.1 => 7.22.0 
    eslint-plugin-react-hooks: ^4.2.0 => 4.2.0 
    expo: ~40.0.0 => 40.0.1 
    expo-constants: ~9.3.3 => 9.3.5 (9.2.0, 9.3.1)
    expo-location: ^11.0.0 => 11.0.0 (10.0.0)
    expo-notifications: ~0.8.2 => 0.8.2 
    expo-permissions: ^11.0.0 => 11.0.0 (10.0.0)
    expo-screen-orientation: ~2.1.0 => 2.1.0 
    expo-status-bar: ~1.0.3 => 1.0.3 
    expo-store-review: ~2.3.0 => 2.3.0 
    hermes-inspector-msggen:  1.0.0 
    memo-parser:  0.2.1 
    react: 16.13.1 => 16.13.1 (17.0.1)
    react-animated:  0.1.0 
    react-dom: 16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 (0.64.0)
    react-native-codegen:  0.0.2 
    react-native-flatlist-slider: ^1.0.5 => 1.0.5 
    react-native-gesture-handler: ~1.8.0  => 1.8.0 
    react-native-screens: ^2.17.1 => 2.17.1 
    react-native-vector-icons: ^8.0.0 => 8.0.0 
    react-native-web: ~0.13.12 => 0.13.18 
    react-redux: ^7.2.2 => 7.2.2 
    redux: ^4.0.5 => 4.0.5 
    redux-promise-middleware: ^6.1.2 => 6.1.2 
    redux-thunk: ^2.3.0 => 2.3.0 
    type-to-reducer: ^1.2.0 => 1.2.0 
    underscore: ^1.12.0 => 1.12.0 
    xlsx: ^0.16.9 => 0.16.9 
  npmGlobalPackages:
    @aws-amplify/cli: 4.47.1
    eas-cli: 0.5.0
    eslint: 6.0.1
    expo-cli: 4.4.1
    expo: 40.0.0
    knex-migrate: 1.7.2
    knex: 0.19.0
    nodemon: 2.0.7
    npm-run-all: 4.1.5
    npm: 7.6.3
    react-native: 0.63.4
    serve: 11.1.0
    sharp-cli: 1.14.1
    yarn: 1.22.10

Describe the bug

Phone number country code not interactable for default UI components

Expected behavior

The phone number country code should be interact-able when pressed on

Reproduction steps

1. Follow flow for https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#configure-your-application

Code Snippet

// Put your code below this line.

import 'react-native-gesture-handler';

import React from 'react';
import Amplify, { Auth } from 'aws-amplify';
import { Provider } from 'react-redux';
import { StyleSheet, Text, View, Dimensions, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { withAuthenticator } from 'aws-amplify-react-native';
import * as ScreenOrientation from 'expo-screen-orientation';

import configureStore from './src/configureStore';
import config from './src/aws-exports';

...

const Stack = createStackNavigator();
const store = configureStore();
Amplify.configure(config);

const styles = StyleSheet.create({
    container: {
        width: width,
        alignSelf: 'stretch',
        textAlign: 'center',
        flex: 1,
    },
});

const App = function () {
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);

    return (
        <Provider store={store}>
            <View style={styles.container}>
                <NavigationContainer>
                    <Stack.Navigator>
                        <Stack.Screen
                            name="Home"
                            component={Home}
                            options={{
                                title: text.APP_NAME,
                                headerStyle: {
                                    backgroundColor: '#a86531',
                                },
                                headerTintColor: '#fff',
                                headerTitleStyle: {
                                    fontWeight: 'bold',
                                },
                            }}
                        />
                        <Stack.Screen
                            name="PlaceList"
                            component={PlaceList}
                            options={({ route }) => ({
                                title: text[route.params.type.toUpperCase()],
                                headerStyle: {
                                    backgroundColor: '#a86531',
                                },
                                headerTintColor: '#fff',
                                headerTitleStyle: {
                                    fontWeight: 'bold',
                                },
                            })}
                        />
                        <Stack.Screen
                            name="Place"
                            component={Place}
                            options={({ route }) => ({
                                title: '',
                                headerStyle: {
                                    backgroundColor: '#a86531',
                                },
                                headerTintColor: '#fff',
                                headerTitleStyle: {
                                    fontWeight: 'bold',
                                },
                            })}
                        />
                    </Stack.Navigator>
                </NavigationContainer>
            </View>
        </Provider>
    );
};

export default withAuthenticator(App);

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

iPhone12

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[eddiekeller]

Thanks @chrisbonifacio . I know we spoke offline regarding issue https://github.com/aws-amplify/amplify-js/issues/8493 and I thought these two issues weren’t related… but now I think they might be. We need to switch our Picker component that we use. But after speaking with Alex, this is a bit more involved than a simple swap out of components. The team will have to discuss how to do this.

[calebpollman]

Hi @ayhoung and @stasmotorny! aws-amplify-react-native is no longer actively maintained beyond critical updates, and is in the process of deprecation. There is a new React Native UI package in the works in the Amplify UI repo, the discussion can be tracked here.