amplify-ui
amplify-ui copied to clipboard
aws-amplify
Phone number country code not interactive on iOS
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
- 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
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.
Going to take a look at this today and see if I can identify the issue.
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.
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?
@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
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.
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 <Authenticator /> but got the same result - press on country code do nothing.
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.
