We Keep Coding

Issue with creating text field as combo of both text field for typing and showing dropdown menu of buttons similiar to gmail search box

I want to build an UI for search functonality which looks bit similiar to what we have in gmail search.
Currently I have the UI for search which is done using material UI .
But now I have extra requirement where I should be able to open the drop down onfocusing the search input field and the dropdown should consist of 2 button.
Something like :
My Requirement:
I tried adding MenuItem inside TextField but the issue I face is I cannot write anything in search box.
Here is the code what I tried
<TextField
select
// for passing props in select component
SelectProps={{ IconComponent: () => null }}
value={text}
onChange={event => onSearch(evt.target.value)}
InputProps={{
placeholder: "Search...",
}}>
<MenuItem>
<div><button>Text 1</button></div>
<div><button>Text 2</button></div>
</MenuItem>
</TextField>
I also tried to build UI using material UI Autocomplete https://mui.com/material-ui/react-autocomplete/#combo-box but somehow it did not work as well, not sure if I did it in wrong way. My code is written in React.
Currently I have the search box as shown below, which need dropdown on focusing the search bar. It would be good if it can be done using material UI but not mandatory.
What I have now:
After I added the menuItem inside textfield, I get the desired dropdown on focusing the textfield but issue is now I am not able to type anything in the search box and I still want the search box to have both the dropdown and textfield functionality

Getting the text content of a parent View in React Native?

I have something like this in React Native
<View>
<Text>Hello</Text>
<Text>World</Text>
</View>
which is created by mapping through text and wrapping each sentence or chunk of text in a View, and each word in a Text component.
Is there any way I can get all of the text content of the View component by pressing on any of the children? Like tapping "Hello" and getting "Hello World" loaded into state.

How to prevent a screen reader from reading/focusing on content inside a component in React Native?

From what I've read in React Native's accessibility documentation, adding accessible={true} to the parent component would make it a group and the screen reader wouldn't be able to navigate to its children. I tried the following:
<PickerButton
accessibilityRole="button"
accessibilityLabel={dateTimePickerLabel}
accessibilityHint={tTemplates('rating_date.title')}
accessible={true}
>
<Row>
<LabelText>{dateTimePickerLabel}</LabelText>
<StyledDownArrow />
</Row>
</PickerButton>
But when I start swiping, the screen reader goes through PickerButton first, reads its accessibilityLabel, and then moves to the LabelText and reads the text inside dateTimePickerLabel, so the same text gets read twice. Also accessible={true} doesn't make the PickerButton a group

delayPressIn, delayPressOut, and delayLongPress disable touchableopacity onPress in react-native 0.62.2?

I just updated a react native project from rn 0.61.5 to rn 0.62.2. Things are mostly fine except that the onPress on my <TouchableOpacity> doesn't respond if I have delayPressIn, delayPressOut, or delayLongPress in that same touchable opacity.
Getting rid of them is not ideal because I was using them to avoid triggering onPress for touchable opacities in a flatlist on scroll.
Looking in the most recent documentation for react native delayPressIn, delayPressOut, and delayLongPress are no longer listed on the documentation for touchable opacity or touchable hightlight. They are listed in the documentation for TouchableWithoutFeedback, but this doesn't fit my needs.
This is an issue regardless of whether I'm using just one, or more than one in combination.
For example:
<TouchableOpacity
// delayPressIn={5}
// delayPressOut={5}
// delayLongPress={5}
accessible={!this.state.menuOpen}
onPress={() => {
this.props.navigation.navigate('OneAlertScreen', {userId: userId})
}}
title="Alert Details"
key={item.alertNumber}
style={styles.myCardStyle}
>
..........stuff inside my touchable opacity
</TouchableOpacity>
works, but if I uncomment any of those it won't. It doesn't throw an error - just fails silently.
Has anyone found a way around this? Thanks

React Native TouchableHighlight Font Color Text Change

how do TouchableHighlight handles the color of the text when tap. I already did it on the backgroundColor using underLayColor. Here's my code:
<TouchableHighlight
style={{ borderRadius: 5}}
underlayColor="#ffffff"
onPress={this.onLoadPress}>
<View style={[styles.buttonBox, styles.btnEditProfile]}>
<Text style={styles.btnEditProfileText}>
Edit Profile
</Text>
</View>
</TouchableHighlight>

I've been struggling with this myself. And using onPressIn and onPressOut props of TouchableWithoutFeedback causes a little delay that becomes glitchy if you use that on a component that receives frequent taps. However, that delay doesn't occur when you use onShowUnderlay and onHideUnderlay props of TouchableHighlight itself.
P.S. your TouchableHighlight component should have an onPress property for this to work.

The TouchableHighlight has all the props of TouchableWithoutFeedback. TouchableWithoutFeedback has the onPressIn and onPressOut props which can receive a function (basically like onMouseDown and onMouseUp). You can use those methods to change a state which will change the style of the text. Here is a working example.