Weird problem with TextInput in RN v0.75, note that I'm using expo dev build.

[Mayyarkmp]

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

RN.mp4

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

⚠️	Add or Reformat Version Info
ℹ️	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

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[react-native-bot]

⚠️	Add or Reformat Version Info
ℹ️	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

[cortinico]

Screenshots and Videos

Your video doesn't play

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.