react / react/react-native

iOS "Hide my email" does not set the email in TextInput

Open
#38,161 14 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: TextInput Issue: Author Provided Repro Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

I have a TextField that accepts an email address.
<TextInput style={styles.input} value={email} onChangeText={setEmail} textContentType='emailAddress keyboardType='email-address placeholder="Enter email address" />
If I now use the "Hide my email" workflow on iOS instead of entering an email address, the TextInput field remains empty and is not set to the generated email address.

React Native Version

0.72.1

Output of npx react-native info

System:
OS: Windows 10 10.0.19044
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
Memory: 21.01 GB / 31.75 GB
Binaries:
Node:
version: 18.16.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.19
path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm:
version: 9.5.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Not Found
Visual Studio: Not Found
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.1
wanted: ^0.72.1
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce
  • Create a new app
  • `import { TextInput, View, StyleSheet } from "react-native";
    import React, { useState } from "react";

export default function App() {
const [email, setEmail] = useState("");

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
input: {
width: "80%",
height: 40,
borderColor: "gray",
borderWidth: 1,
padding: 10,
},
});

return (



);
}
`

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@febis001/hide-my-email

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the behavior using the linked Snack and the controlled TextInput with textContentType="emailAddress" on iOS. Start at the React Native TextInput iOS path and trace the Hide my email flow; done means the generated address appears in the field value and the behavior is covered by a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.