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.
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'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?
I'm trying to create a TextInput component that is both editable and has clickable urls. According to the react native docs, the dataDetectorTypes prop is only supported when editable={false}.
Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}.
Has anyone found a way around this limitation? It seems like it should be possible. The behavior I want is...
Tapping on the url should open it in a browser
Tapping anywhere else should start editing at that position
It's ok if the link is no longer clickable when the TextInput currently has focus
The only thing I can think of to get around this is to store the editable value in state and then upon clicking some Edit button will change the state from editable to true.
onBlur would switch this state back to false
I haven't tried this before though so just a suggestion on attempting workarounds or finding some middle ground between the two.
My suggestion is to place the input field with the url centered inside a bigger div.
Make the input field not much bigger the text inside it and when you click it trigger some function that redirects to the page on your state.
And when you click on the outer div you trigger a function to focus on the input field and edit its value.
I have a text input component in React-native with which I am showing some text by default and user should not be able to edit it. He should keep continue to type in that. Like this:
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