react-native
react-native copied to clipboard
facebook
Weird problem with TextInput in RN v0.75, note that I'm using expo dev build.
Description
I'm using a custom input field which is just based on the basic TextInput component in react-native.(I'm using Android device btw) The screen essentially consists of two input fields in the same row for first&last name, followed by email, password etc. when I click on the empty field of the first or last name, I get a suggestion of my first and last name, When I click it, the field seems to get a lighter opacity with the border radius being removed. Code and Video of the incident attached
Steps to reproduce
The custom input field I'm using
import { StyleSheet, TextInput } from 'react-native'
import React from 'react'
const InputField = ({ title, style }) => {
return (
<TextInput style={[styles.input, style]} placeholder={title}>
{/* <Text style={{ color: '#541391', textAlign: 'center' }}> What a loser </Text> */}
</TextInput>
)
}
export default InputField;
const styles = StyleSheet.create({
input: {
flexDirection: 'row',
backgroundColor: '#F9A429',
opacity: 0.7,
marginHorizontal: 20,
borderRadius: 20,
height: 60,
padding: 15,
borderWidth: 1,
borderColor: '#f1f1f1'
}
})
The actual usage in my main component
import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Image } from 'expo-image';
import React, { useState } from 'react'
import { useColorScheme } from 'react-native'
import {
Menu,
MenuOptions,
MenuOption,
MenuTrigger,
MenuProvider,
} from 'react-native-popup-menu';
import InputField from '../../components/CustomInputField'
import CustomButton from '../../components/CustomButton'
const SignIn = () => {
const [selectedAddress, setSelectedAddress] = useState('Select Address')
const themeStyle = useColorScheme() === 'dark' ? Colors.dark.background : Colors.light.background;
return (
<MenuProvider style={{ flex: 1 }} backHandler={true}>
<KeyboardAwareScrollView style={{ backgroundColor: themeStyle, flex: 1 }} keyboardShouldPersistTaps='always' >
<TouchableWithoutFeedback onPress={Keyboard.dismiss} style={{ flex: 1 }}>
<View style={[styles.inner, { backgroundColor: themeStyle }]}>
<Image source={require('../../../assets/images/MoveOnCenter.png')} contentFit='contain' style={{ width: 400, height: 120, marginVertical: 100 }} transition={0}></Image>
<View style={styles.names}>{/* Bug: when selecting F&L name from clipboard, something fucks up on the ui */}
<InputField title="First name" style={styles.topField}></InputField>
<InputField title="Last name" style={styles.topField}></InputField>
</View>
<InputField title="Email Address" style={styles.midField}></InputField>
<InputField title="Password" style={styles.midField}></InputField>
<Menu onSelect={selection => setSelectedAddress(selection)} style={{ flex: 1, width: '85%', margin: 7 }} >
<MenuTrigger style={styles.popupContainer}>{/* Specifying the text inside the Menu Trigger resulted in a faster rendering */}
<Text style={[selectedAddress === 'Select Address' ? styles.unselected : styles.selected]}>
{selectedAddress}
</Text>
</MenuTrigger>
<MenuOptions customStyles={
{
optionsContainer: {
width: '85%',
borderRadius: 20,
backgroundColor: '#B1A429',
opacity: 0.7,
},
}
}>
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Latakia'} text='Latakia' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Tartous'} text='Tartous' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Homs'} text='Homs' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Hama'} text='Hama' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Aleppo'} text='Aleppo' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Damascus'} text='Damascus' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Deir ez-Zor'} text='Deir ez-Zor' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Al-Hasakah'} text='Al-Hasakah' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'As Suwayda'} text='As Suwayda' />
<MenuOption customStyles={{ optionText: { margin: 5 } }} value={'Ar Raqqah'} text='Ar Raqqah' />
</MenuOptions>
</Menu>
{/* <InputField title="Address" style={styles.bottomField}></InputField> */}
<CustomButton title={"Sign Up"} handlePress={undefined} containerStyle={styles.btnContainer} textStyle={styles.btnText} isLoading={undefined}></CustomButton>
</View>
</TouchableWithoutFeedback>
</KeyboardAwareScrollView>
</MenuProvider>
)
}
const styles = StyleSheet.create({
inner: {
flex: 1,
alignItems: 'center'
},
names: {
flexDirection: 'row',
marginBottom: 5,
marginHorizontal: 17,
width: '87%',
},
topField: {
flex: 1,
paddingHorizontal: 10,
marginHorizontal: 4
},
midField: {
marginVertical: 7,
width: '85%',
},
bottomField: {
marginTop: 7,
marginBottom: 20,
width: '85%',
},
btnContainer: {
backgroundColor: '#F9A429',
marginHorizontal: 20,
marginTop: 50,
width: 190,
},
btnText: {
textAlign: 'center',
fontWeight: '600',
fontSize: 19,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
popupContainer: {
backgroundColor: '#F9A429',
opacity: 0.7,
borderRadius: 20,
height: 60,
padding: 17,
borderWidth: 1,
borderColor: '#f1f1f1',
width: '100%',
},
unselected: {
color: 'black',
opacity: 0.6
},
selected: {
opacity: 1
},
});
export default SignIn
React Native Version
0.75
Affected Platforms
Runtime - Android
Output of npx react-native info
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Memory: 1.89 GB / 11.88 GB
Binaries:
Node:
version: 20.15.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 3.6.4
path: ~\AppData\Roaming\npm\yarn.CMD
npm:
version: 10.7.0
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels:
- "29"
- "33"
- "34"
- "35"
Build Tools:
- 34.0.0
- 35.0.0
System Images:
- android-35 | Google Play Intel x86_64 Atom
Android NDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
Versions:
- 10.0.22621.0
IDEs:
Android Studio: AI-241.18034.62.2411.12169540
Visual Studio:
- 17.11.35312.102 (Visual Studio Professional 2022)
Languages:
Java: 17.0.10
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.5
wanted: 0.74.5
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
Blank
Reproducer
https://github.com/Mojo963/MoveOnExpo
Screenshots and Videos
https://github.com/user-attachments/assets/c8483454-bcf0-4fba-a69e-bed77c9f35d6
| :warning: | Missing Reproducible Example |
|---|---|
| :information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
| :warning: | Add or Reformat Version Info |
|---|---|
| :information_source: | We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2 |
| :warning: | Missing Reproducible Example |
|---|---|
| :information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
| :warning: | Add or Reformat Version Info |
|---|---|
| :information_source: | We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2 |
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
This issue was closed because it has been stalled for 7 days with no activity.