Phone number country code not interactive on iOS

[ayhoung]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] 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

[chrisbonifacio]

Good morning 👋 thanks for raising this issue! I was able to reproduce it consistently on the latest version of aws-amplify-react-native (4.3.2). Labeled as a bug for the team to look further into it.

[eddiekeller]

Going to take a look at this today and see if I can identify the issue.

[eddiekeller]

Not reproducing this bug using aws-amplify-react-native version 5.0.1. Going to downgrade to 4.3.2 as @chrisbonifacio mentioned above to see if the issue shows up for me.

[eddiekeller]

Still unable to reproduce this bug. Also using the provided sample code in the OP. @ayhoung can you confirm if this is still an issue?

[chrisbonifacio]

@eddiekeller Not the OP but this is my reproduction app if it helps.

https://github.com/chrisbonifacio/amplify-issues/tree/dev/8118-ui-react-native

[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.

[stasmotorny]

Hey guys. Do we have a fix for this issue? I have it on aws-amplify-react-native ^6.0.5

My dependencies are: "dependencies": { "@react-native-async-storage/async-storage": "^1.17.7", "@react-native-community/netinfo": "^9.3.0", "@react-native-picker/picker": "^2.4.2", "amazon-cognito-identity-js": "^5.2.10", "aws-amplify": "^4.3.27", "aws-amplify-react-native": "^6.0.5", "react": "18.0.0", "react-native": "0.68.2" },

To implement your ui I'm doing: export default withAuthenticator(App, false, [], null, null, signUpConfig);

Also tried but got the same result - press on country code do nothing.

[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.