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.
Related
This is for a React Native app.
One of my screens has a ScrollView wrapped around a TextInput. The ScrollView has a lot of height - moreso than the TextInput when it's blank - so the behavior I want is that if a user taps on any of the 'blank space' in the ScrollView, it will put focus in the TextInput.
The code I have so far boils down to this:
export function MainInput() {
const ref_textinput = useRef();
const onTapScrollViewBody = () => {
console.log("Detected tap")
ref_textinput.current?.focus()
}
return (
<TouchableWithoutFeedback onPress={onTapScrollViewBody}>
<ScrollView style={styles.parentScrollView}>
<TextInput
ref={ref_textinput}
...
It's not working unfortunately. When focus isn't in the TextInput, the first time I tap in the blank space of the ScrollView, I do see the console log, but focus doesn't go into the TextInput, nor do further taps on the blank space trigger more console logs. However, tapping into the TextInput (which obviously puts focus back on it) then tapping back out will trigger the console log.
Am I misunderstanding how useRef works here?
Your understanding of useRef is fine, it's the understanding of the ScrollView that needs some help. If two elements that share coordinates are touchable, React Native will give the touch to the "top" element (whether by z-index, render order, etc). Your example creates the following hierarchy:
|-TouchableWithoutFeedback
|-ScrollView
|-TextInput
If you press within the TextInput's area, it will always capture the touch, as you found. If you press within the ScrollView's area, but outside of the text input, your touch is captured by the ScrollView, which will try to use your touch to scroll it. Only when you touch outside the ScrollView should your TouchableWithoutFeedback activate.
You still want the ScrollView to scroll, so when do you want your tap to focus the text input? You could delete your Touchable and use an event exposed by ScrollView, like
<ScrollView
onScrollEndDrag={() => ref_textinput.current?.focus()}
// and/or
onMomentumScrollEnd={() => ref_textinput.current?.focus()}
...
A solution that would handle tapping differently from scrolling could be achieved using react-native-gesture-handler, but it would be more involved.
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}
i'm using createMaterialTopTabNavigator with a swipeEnabled set to True to navigate between screens, I have a Screen which contains an horizontal scrollView, the problems is that the scrollView isn't working, since whenever i try to scroll it horizontally the screen just changes to the next one.
I'd like to be able to disable the swipeEnabled when i swipe in the scrollView.
PS: i tried doing it dynamically by passing a variable to the Screen and a method that sets it to false using onTouchStart, but it's slower than the swiping event of the screen so it end up swiping to the next screen before onTouchStart event start.
If I have data in a ScrollView, FlatList, or SectionList, and that data includes a button that the user can press on, tapping on the button once hides the Keyboard as expected:
onScroll={() => Keyboard.dismiss()}
but it does not trigger the button callback. It only works if you tap the same button a second time after the keyboard is hidden. Is there any way to fix this?
I figured out the answer from the docs, setting keyboardShouldPersistTaps="always"
I have a Modal with a ScrollView inside and some items inside the ScrollView. When the Modal popped up, the item's border is not aligned to the Modal's border. Some components like TextInput become thinner and some is overflow. It's not like this outside of Modal.
This can be solved by setting component's offset explicitly relative to Dimensions.get('window').width. But I just want an implicit solution.
I've done trying setting style properties for ScrollView's contentContainerStyle and also putting a wrapper View inside the ScrollView. None of them works.
I've made it after wrap ScrollView with a View with style flexDirection : 'row'. Yet to figure out why