I'm facing an issue on TextInput's contextMenuHidden on Android, IOS works well not showing the context menu though.
<TextInput style={styles.input} contextMenuHidden={true} />
I did tried the view component solution:
removeClippedSubviews={true}
However, the behaviour came back, after I delete the whole text input -> retype the text -> double tap (shows back context menu)
Not sure if anyone experienced this before, but need some advice/suggestion for Android case, must I create a custom native ui component instead?
Related
I am building a react-native app, using expo#43.0.0 and I am testing on a device with iOS 15.1
I have two TextInputs for the login:
<TextInput
textContentType='username'
autoComplete={true}
autoCorrect={false}
value={email}
onChangeText={(input) => setEmail(input)}
/>
<TextInput
autoComplete={true}
textContentType='password'
secureTextEntry={true}
value={password}
onChangeText={(input) => setPassword(input)}
/>
Problem:
When I click into the TextInput for the username, the keyboard comes in. I now click the key icon for keychain and I can select credentials from the icloud-keychain. After selecting the credentials, the keyboard disappears again, but the two TextInputs remain empty. When I now click into one of the two TextInput Components, both are filled correctly.
Anyone ran into something similar or has a solution, that the both inputs are filled as soon as the credentials are selected, without clicking them again?
Thank you.
I had a similar issue in my app, input fields with keychain usage wouldn't show the value until I clicked on it again.
But the solution was had nothing to do with the input fields but the fact that the application changes state when you are in the keychain selection screen, this resulted in displaying my anti screen screenshot which when displayed updated the root of the component tree.
What generates the bug for me.
Hope it help
I am developing a react-native app with multi-line TextInput fields.
The TextInputs are used as inputs but also to display the content, in display mode the TextInput is disabled (editable={false}).
I would like to let the user filling the form to overflow if needed and the user that reads the input (display mode) to be able to see the over-flowing text. I thought of using the scroll option but there are two problems with it:
It is also disabled when the TextInput is disabled
The request is to overflow the text because the form will eventually be printed.
The solution I applied was to create a <Text /> component and pass the input value there. Because in react-native <Text /> adjusts it's height to the height of the string it displays.
I'm building a react native application and found out the react-native-multiple-select library which i emplemented following the documentation https://www.npmjs.com/package/react-native-multiple-select . The view is being displayed but the selected items are not showing up, only the counter of selected items works. I think it's because I don't have the control over how its function getSelectedItemsExt() works and from my researchs on internet like React-native-multiple-select: Cannot read the property 'getSelectedItemsExt' of undefined I only found that I should be doing
<View>
{ this.multiselect
?
this.multiselect.getSelectedItemsExt()
:
null}
</View>
.
Though it helped get rid of the red screen, it doesn't display the items.
So can you please tell me how I can manage
this.multiselect.getSelectedItemsExt()
and get my items displayed.
Any help is much appreciated. Thanks in advance.
I can guess throughout the question that you are passing the hideTags props to the MultiSelect component i.e you are having inside the component <MultiSelect hideTags>. This hideTags was your problem because It does what it's name sounds, i.e it doesn't display the values you set in your FlatList or whatever component. If you want the values to be displayed then remove hideTags from inside the component and you should have your items displayed. Well you want also to customize the output of this library, it's colors and InputField style then head up to the root of your react native application, then go to node-module -> react-native-multiple-select -> Library there you will find the core file that you can customize at your leisure.
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i.toString()}
console.log('Hi from React Native')
renderItem={({ item }) =>
<Text>
{`${item.name.first} ${item.name.last}`}
</Text>
}
/>
That's my function example of where I'm doing a console.log, but there's nothing showing up in the "Debug Console" of VSCode. I know everything is running and the component likely did mount as I am able to view my app on the Expo client app on my device. I am getting an error saying 'identified expected'.
I'm also not sure what a keyExtractor is doing here.
First off, you cannot use a console.log statement there, FlatList expects a list of props in that place. You may place your log statement in JavaScript code block.
Secondly, to use VSCode's debugger, you have to attach it to your packager first. Have you done that? You'll need a relevant VSCode extension. There's some help available here and here on how to do that; it's a separate issue. You can simply use Google Chrome as an alternative by enabling JS debugging from your app. (In your app, open the developer menu, then tap Debug JS Remotely. Then in the Google Chrome window that opens, right click > Inspect > Console).
Finally, renderItem is a FlatList prop which renders each individual item in your list. You can use to style or modify each item of your FlatList.
I'm a brand new junior dev working on a react-native app for the first time. I have been searching for quite a while for a way to add a link to the text of a react-native checkbox's value text. If anyone has a link to documentation that might explain what I want to do, I would be super appreciative since I haven't found anything helpful yet. I saw that you can not add html elements into native after I tried a number of variations of anchors. I've tried adding Link to variations and attempted to add an onPress function to the label. I'm grasping at straws here... is this even possible to do?
To be clear, I want a user to be able to press the words "Terms of Service" and have it link to the page that has the terms
{this.props.isUser &&
<CheckBox
containerStyle={styles.checkbox}
onChange={(event, checked) => this.updateAttr('terms', checked)}
value={this.props.program.terms}
label="I have read and understand the Terms of Service"
labelLines={2}
/>
}
Instead of adding the "I accept...." as a label to checkbox, put the Check box without any label and the text 'I have read' as separate Text elements inside a view element and align them accordingly. Then inside the view, put the terms and conditions part inside a touchable and use React Native Linking to link the touchable to open a URL when touched.
https://facebook.github.io/react-native/docs/linking.html
React-Native Open Url in default web browser