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!
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 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}
As far as I know,
there is only contentContainerStyle and style prop for container styling in SectionList,
which is both applied to all the contents inside the SectionList.
I would like to apply some styling to the container that wraps all the renderItem component only, and not other components like renderSectionHeader or renderSectionFooter. I can't seem to find any props for styling it.
Basically, I would like to apply some shadows to some view that wraps the renderItems for each section, not the individual items.
Any ways I can achieve this?
I want to apply styling to the red container.
Thanks!
You can style to the renderItem's view. Wrap the render item in a and style this view.
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
I'm having a weird behavior here and I can't figure out what's going on. I have a ScrolView with a form and some inputs and labels inside and it seems to only want to scroll when you place your finger (or cursor in the demo) over an input or a switch and it doesn't scroll when placing your finger anywhere else in the ScrollView
I put together an Expo Snack to show the code and if you run in the emulator and attempt to scroll the ScrollView by placing the cursor over one of the labels or on the edges of the ScrollView it won't scroll but if you place the cursor over an input or a switch it scrolls just fine
https://snack.expo.io/#jordanr/weird-scrollview-bahavior
The issue is because Touchable effects in your TouchableWithoutFeedback are blocking the effects of ScrollView, therefore you need to reset your responder by wrapping the Content inside the View
<Content>
<View onStartShouldSetResponder={() => true}>
//... Rest of the code
</View>
</Content>
Also don't use ScrollView since NativeBase uses KeyboardAwareScrollView from the package react-native-keyboard-aware-scroll-view in the <Content/>