I am working on React Native in which I want to stop multiline textinput component's scroll inside ScrollView. How we can achieve it? Android Specially!
you can use textinput option scrollEnabled
but this option only use ios, not work android
scrollEnabled={false}
So I recommend that you set the height and specify the maxLength of letters to prevent scrolling from being seen.
example
style={{height : 0000}}
maxLength={0000}
Related
Hi I have tooltip buttons in my TextInput when user press open a tooltip and I'm taking TextInput values from an array because of that I'm using ScrollView or FlatList.
My problem is that the tooltip of the TOP TextInput is not all visible. As you see in the below tooltip of StoreKey stays outside of ScrollView(PINK).
Is there any way to show it outside of the ScrollView ?
Note: I can use also FlatList.
I want to put a FlatList inside another one, but the child flatlist not scrolling.
I tried to convert the child FlatList to ScrollView, put the props scrollEnabled to false to the parent FlatList and both not work.
Here is a code example of what I want to do: https://snack.expo.io/HJ6d97gNH
I expect to scroll inside both flatlist, not only one.
use nestedScrollEnabled in inner Flatlist for enabling the scrolling activity
You can use the nestedScrollEnabled prop but I would recommend using a <SectionList> since this is somehow buggy!
I'm having trouble force focussing a react native TextInput field.
It's focused when the page loads with autofocus={true}.
But after blurring I would need to press the text input field, but that's hidden because of design reasons. Is there a way to document.getElementById("myText").focus(); in react native that I can call after onBlur()?
Cheers.
You need to assign the TextInput field to a ref like this:
<TextInput ref={ref => (this.ref = ref)} />
Then you can programmatically focus it by running focus() on it, like so:
this.ref.focus();
Here's a little Snack where I run the focus/blur function when pressing a button:
https://snack.expo.io/#marcelkalveram/auto-focus-input-field-using-ref
It should be easy to replicate this for your navigation scenario.
In case you're using react-navigation, this is the part of the docs you'll be interested in: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
I would like to know if there is a way to show keyboard always if it focuses out from the TextInput in react native.
You can wrap your TextInput by a ScrollView and then use the keyboardShouldPersistTaps='handled' prop in ScrollView to avoid dismissing the keyboard and handle the keyboard dismiss by using Keyboard.dismiss() function in somewhere else.
Read this for more documentation.
Consider this simple ScrollView.
On iOS, clicking on the text will but the text to the top because scrollTo({ y: 250 }) scrolls even if end of scrollView is reached.
On Android, the text doesn't move.
How to get on Android the same behavior we have on iOS?
You can work around this by adding padding to the contentContainerStyle of the ScrollView. A good starting point would be to add padding equal to the height of the device's screen.
import { Dimensions } from 'react-native';
const ANDROID_SCREEN_HEIGHT_PADDING = Dimensions.get('window').height;
then, when rendering:
<ScrollView
contentContainerStyle={{paddingBottom: ANDROID_SCREEN_HEIGHT_PADDING}}>
...
</ScrollView>
You could use this for necessary extra Android padding in every direction. If you are using horizontal={true}, for example, you could add padding equal to the width of the screen and add it to the paddingLeft style property to get the intended scrolling behavior on Android.
This behavior is due to the underlying implementation of ScrollView on Android in React-Native. See also:
React native Android ScrollView scrollTo not working