Tabs problem in the scroll of the elements.
See original GitHub issue@GeekyAnts, @akhil-geekyants: Hi, I’m using the Tabs component on android. Link: https://docs.nativebase.io/Components.html#tabs-def-headref I am not able to scroll the listview that are in the tabs.
react-native, react and native-base version
"native-base": "^2.3.3",
"react": "16.0.0",
"react-native": "0.50.4",
Expected behaviour
Scroll of the elements that are in the tabs.
Actual behaviour
No Scrolls of the elements found in the tabs.
Steps to reproduce (code snippet or screenshot)
import React, { Component } from 'react'
import {
View,
Text,
Image,
Keyboard,
Platform,
StatusBar,
StyleSheet,
Dimensions,
ToastAndroid,
TouchableNativeFeedback,
ListView,
PixelRatio,
ScrollView
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import IconMDI from 'react-native-vector-icons/MaterialIcons'
import {
CoordinatorLayout,
BottomSheetHeader,
MergedAppBarLayout,
BackdropBottomSheet,
BottomSheetBehavior,
FloatingActionButton,
ScrollingAppBarLayout,
} from 'react-native-bottom-sheet-behavior'
import { Container, Tabs, Tab as Tabn } from "native-base";
var {height, width} = Dimensions.get('window');
const Actor =
[{id:90633,name:"Gal Gadot",profile_path:"/yV2nljqQa3MjrrIK4AllDjmJIcs.jpg"},
{id:62064,name:"Chris Pine",profile_path:"/vSe6sIsdtcoqBhuWRXynahFg8Vf.jpg"},
{id:32,name:"Robin Wright",profile_path:"/tXfQTgcIEPP7gtVdJ44ZxZPhacn.jpg"},
{id:6413,name:"Danny Huston",profile_path:"/jc1eGtCShQ2ZkzqWApiWbA1lbTF.jpg"},
{id:11207,name:"David Thewlis",profile_path:"/lWCGcTKvr4QUi8MvFBleMw8xY8.jpg"},
{id:935,name:"Connie Nielsen",profile_path:"/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg"},
{id:3623,name:"Elena Anaya",profile_path:"/67brgegoJLcIQKiu4EEGtNymaUj.jpg"},
{id:1829985,name:"Lilly Aspell",profile_path:"/rZ8BTHLatm8dtZus4HZFv7GsSuA.jpg"},
{id:1590758,name:"Emily Carey",profile_path:"/esIqsc1XmBRPo07e95C6ebxLD7A.jpg"},
{id:11111,name:"Lucy Davis",profile_path:"/3Qpcq4Pu8lKXtHxtUEHqyOuibbn.jpg"},
{id:5419,name:"Saïd Taghmaoui",profile_path:"/bOh3ZQ64WiGivN6GJrrO8vrw9wU.jpg"},
{id:1125,name:"Ewen Bremner",profile_path:"/7CQBnBHSNDcbY2LucqWqEpKWsCH.jpg"},
{id:1823591,name:"Eugene Brave Rock",profile_path:"/27RL3pfNTBTu2zeNvFQTLFvCrJv.jpg"},
{id:1310711,name:"Lisa Loven Kongsli",profile_path:"/pwT0UuQ1tsleh3urfabVRj0UE3S.jpg"},
{id:139900,name:"Florence Kasumba",profile_path:"/oLKR9435H3sjeCWWvD0rLGsL5t9.jpg"},
{id:1767342,name:"Madeleine Vall",profile_path:"/jACXQG2xHuFeIoxgGGhUbbrZNl1.jpg"},
{id:1831280,name:"Hayley Warnes",profile_path:"/2dPqpifxaxXc6urLimtC6bdkh5s.jpg"},
{id:1767343,name:"Ann Wolfe",profile_path:"/5VVXr5NOSqC0uMxXoXFrIA9eKe8.jpg"},
{id:1009999,name:"Doutzen Kroes",profile_path:"/1aXyxlwPZ6OWaO67gdPBT0K2bAS.jpg"},
{id:1272968,name:"Samantha Jo",profile_path:"/aHUB2vNo5ZbOVnlmqJ4SkUpDXrk.jpg"},
{id:1360156,name:"Ann Ogbomo",profile_path:"/5EGoq8xksh6w1MZJBDgEi7LofDC.jpg"},
{id:62976,name:"Eleanor Matsuura",profile_path:"/6ZbBU8ESZw8wTOdmqF9WJd2I9Gt.jpg"},
{id:174708,name:"Josette Simon",profile_path:"/rtFA2jn0d69EL5GVGukTHSlE4Kl.jpg"},
{id:1831281,name:"Brooke Ence",profile_path:"/1FBI6wg4dV2O8Z5NroCFLoVQ6m1.jpg"},
{id:1831282,name:"Hari James",profile_path:"/q9OXpOaCX2t6cCLr8PO8r53j4YL.jpg"},
{id:1813935,name:"Jacqui-Lee Pryce",profile_path:"/3lp7b4ncDVQYjAkgRmxI3DmBz9L.jpg"},
{id:2467,name:"James Cosmo",profile_path:"/523gSqAG9eSSNmKexFFZYh38SxL.jpg"},
{id:1831379,name:"Martin Bishop",profile_path:"/9a0beQcrkxENGKWJ4z3th25JBjO.jpg"},
{id:1256710,name:"Flora Nicholson",profile_path:"/DT171ClURqTp1sHvliV5oije1X.jpg"},
{id:143892,name:"Steffan Rhodri",profile_path:"/4bptQdwRKCMveddkpZdCvDwcsHQ.jpg"},
{id:1232889,name:"Rachel Pickup",profile_path:"/paSFHcLTDBmR6n04bIpCyJA3rSA.jpg"},
{id:65054,name:"Rainer Bock",profile_path:"/ebmPZimivfRFKYnKp2ygazkJO9r.jpg"},
{id:1831283,name:"Eva Dabrowski",profile_path:"/oqZlnfADX2TLptomZmUXKj8xBzp.jpg"},
{id:1857866,name:"Kattreya Scheurer-Smith",profile_path:"/n1cwG4jJoeN5lxmNSFjC9cKIVWf.jpg"},
{id:1890510,name:"Betty Adewole",profile_path:"/ncvgnSmpJ0IhtcuaKp2WtkZF9lh.jpg"},
{id:1431128,name:"Caroline Maria Winberg",profile_path:"/fXeuNhThb61khaAoccPf59ODLgz.jpg"},
{id:1690518,name:"Rekha Luther",profile_path:"/xadtWM2vvrhDHZ8gcdghPZsglsJ.jpg"},
{id:1890409,name:"Ooooota Adepo",profile_path:"/nWmpjYNQuSG8Kx0FuL37PVvCYNr.jpg"},
{id:1813934,name:"Zinnia Kumar",profile_path:"/dHkO6v9Nh6LfsBaZTpK2nNZ7v82.jpg"},
{id:1830144,name:"Andrea Vasiliou",profile_path:"/r4g0Hw0pzomj8UuLO3D9tNvkO98.jpg"},
{id:1890511,name:"Freddy Elletson",profile_path:"/8lw4YgcBZeFKZ2SYLJ71TobDuSI.jpg"},
{id:1890513,name:"Sammy Hayman",profile_path:"/g2y6domOIIdAht8wfmKmNtNE0WE.jpg"},
{id:1861352,name:"Michael Tantrum",profile_path:"/vfSkp365hUfTTLF5Ye33zGjbNNf.jpg"},
{id:157826,name:"Philippe Spall",profile_path:"/9dNHdrBLr6hY8Vf0bHS5h8mrQzA.jpg"},
{id:1824289,name:"Edward Wolstenholme",profile_path:"/9Acyyk5gIN8qGlQ4VuPZ6VCgw3A.jpg"},
{id:1643761,name:"Jennie Eggleton",profile_path:"/rgLqGrIF6DH4rwKIXMjqT1kVB59.jpg"},
{id:1824290,name:"Frank Allen Forbes",profile_path:"/eBzMDu8kskfefTfl95NukYEVqMh.jpg"},
{id:1824295,name:"Jemma Moore",profile_path:"/9p0GWc7hIgnjt0Ua5zvH1n7hLXU.jpg"},
{id:1890450,name:"Caitlin Burles",profile_path:"/k508jIWbCk6HOliJklZJS3KqPRn.jpg"},
{id:1562095,name:"Ulli Ackermann",profile_path:"/nH3l4SM06Xel28UtVyiRfFIZYAr.jpg"},
{id:1820151,name:"Marko Leht",profile_path:"/34Hfcm5xJzFYIM6A5iNuso1aBaZ.jpg"},
{id:659,name:"Wolf Kahler",profile_path:"/uqHI2PLeGFxdjlw0qIk1D17NjWb.jpg"},
{id:1040480,name:"Dominic Kinnaird",profile_path:"/kRsj6Wm9BzzjIQqlOhndtuwnPCZ.jpg"},
{id:1890458,name:"Fred Fergus",profile_path:"/31rOvizxOVC68pYPfXChHiEt7M.jpg"},
{id:1824301,name:"Freddy Carter",profile_path:"/u4Ibhf8LnRzfuR2IUx6ZQWdWaVv.jpg"},
{id:75256,name:"Ian Hughes",profile_path:"/jQXF27nYEsCAmdFyqJVOKbHZFxf.jpg"},
{id:1052209,name:"Andrew Byron",profile_path:"/yOoY7YAfKzLfJIw9dOyvczH2xmi.jpg"},
{id:1890493,name:"Amber Doyle",profile_path:"/NKO2Q0il3Hj5IFb2jK3LdTAWuU.jpg"},
{id:1171527,name:"Alexander Mercury",profile_path:"/pz3zmiT79qnvGyPUsR6iZkBVf6W.jpg"},
{id:1457240,name:"Gana Bayarsaikhan",profile_path:"/rc7jskbwC1Bn1Uy8iIL4dU0NqFH.jpg"},
{id:1726321,name:"Camilla Roholm",profile_path:"/feaxjgK6F8egTGwlmrZHvN9TftR.jpg"},
{id:1743363,name:"Sofia Abbasi",profile_path:null},
{id:1702788,name:"Georgina Armstrong",profile_path:"/kXLYB8o6nfouKmy690MGDcdNtQo.jpg"},
{id:1743575,name:"Annarie Boor",profile_path:"/mioZHOK2wXGOVc6Ue3pHnahR5Iz.jpg"},
{id:1824293,name:"Harry Brewis",profile_path:null},
{id:1502439,name:"Bern Collaco",profile_path:"/ziLGGjo5GWzYDL8H4MUquoFj8r0.jpg"},
{id:555133,name:"Steve Doyle",profile_path:"/zzAmMr1QsKxbcYgobH05rQGuXnh.jpg"},
{id:1592480,name:"Dino Fazzani",profile_path:"/fjOF76fBGDAKMGeGkuK4HUkLgrx.jpg"},
{id:1624443,name:"Flor Ferraco",profile_path:"/gzwL8y0OT6GDkE5rNAlnXxP2u5m.jpg"},
{id:1527565,name:"Mayling Ng",profile_path:"/jevQBPkbeaCsNs8KPrO9mxok983.jpg"},
{id:1651414,name:"Sternkiker François",profile_path:"/8EcUOLAJ7QpVa9LN4vqoCxd0QQf.jpg"},
{id:1743593,name:"David Georgiou",profile_path:"/eT2ckxteHfwqjCkUNu0FiG643tv.jpg"},
{id:1651385,name:"Roman Green",profile_path:"/uUd7UsRw94bvbluAkntDDdOJpM0.jpg"},
{id:1651394,name:"Shane Griffin",profile_path:null},
{id:1824297,name:"Steve Healey",profile_path:null},
{id:1824294,name:"Karl Fredrick Hiemeyer",profile_path:null},
{id:1502441,name:"Kornelia Horvath",profile_path:"/gDimAObmWPSsFRyaSg40QlDMUNI.jpg"},
{id:1284323,name:"Kevin Hudson",profile_path:"/1OrwAIDUYbwZXOWbF5FZtgGMsCI.jpg"},
{id:1820018,name:"Tim Ingall",profile_path:"/8TBgeYKRItgEkioHaXtSZerFjKM.jpg"},
{id:1824291,name:"Ben Kelleher",profile_path:"/hCxzMivfpFlua0m2b25yQBKjKkr.jpg"},
{id:1813664,name:"John Kinory",profile_path:null},
{id:1824300,name:"Dario A. Lee",profile_path:null},
{id:1809569,name:"Christopher Marsh",profile_path:null},
{id:1699114,name:"Lora Moss",profile_path:"/5j9isIvOyO3EuhBhNxNQToGL4ip.jpg"},
{id:1809570,name:"James M.L. Muller",profile_path:"/b7nuAf9fhZyp6oF09NrGA87vkg4.jpg"},
{id:1735654,name:"Ekran Mustafa",profile_path:null},
{id:1702759,name:"Shaun Newnham",profile_path:null},
{id:1809572,name:"Yves O'Hara",profile_path:null},
{id:1461309,name:"Rajeev Pahuja",profile_path:"/oHXsxs3quaESZXjrFRk0FGHuAO0.jpg"},
{id:1785923,name:"Jag Patel",profile_path:"/uChgXgHBAFBsy3a9NrCiL0klPMS.jpg"},
{id:1635870,name:"Richard Price",profile_path:"/iiITgdpWPmybUfhWd1ktjxDFW1c.jpg"},
{id:1451618,name:"Anthony J. Sacco",profile_path:"/nRUNvLCfe43Rs1OEd4GoztuxxED.jpg"},
{id:1824303,name:"Adam Sef",profile_path:null},
{id:147641,name:"Mick Slaney",profile_path:null},
{id:15217,name:"Zack Snyder",profile_path:"/vdr0DlKJH4Ub7nWZtkanBH65bGH.jpg"},
{id:1824299,name:"Fran Targ",profile_path:"/83eaNik8vdvHCyeUmEo5GfBiVOR.jpg"},
{id:29333,name:"Roy Taylor",profile_path:"/eac87ztd0AcxBLvJPsCoNsvOzVc.jpg"},
{id:1824296,name:"Roy Martin Thorn",profile_path:null},
{id:1824302,name:"Phil Tillott",profile_path:null},
{id:1635843,name:"Matt Townsend",profile_path:"/oAwLdyE519RGtg2bwvoKEZomMOM.jpg"},
{id:1756412,name:"Ray Whelan",profile_path:"/isPM6LslVwFVnDvE8esxAqNJWJR.jpg"},
{id:1743005,name:"Tom Whelehan",profile_path:null},
{id:1824304,name:"Zac Whitehead",profile_path:null},
{id:1651386,name:"Miroslav Zaruba",profile_path:"/kZyZlbiFGoatmZSpeiYjm4hLhlu.jpg"},
{id:590410,name:"Lee Neville",profile_path:"/2CR8faSmvsACfaQg05HWDZo4uEc.jpg"}];
const anchorPoint = 235
const RippleColor = (...args) => (
Platform.Version >= 21
? TouchableNativeFeedback.Ripple(...args)
: null
)
const WHITE = '#FFFFFF'
const PRIMARY_COLOR = '#4589f2'
const STATUS_BAR_COLOR = '#205cb2'
const STAR_COLOR = '#FF5722'
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
const { STATE_ANCHOR_POINT, STATE_COLLAPSED } = BottomSheetBehavior
class ProvaTab2 extends Component {
constructor() {
super();
this.state = {
n: null,
dataSource: ds.cloneWithRows(Actor),
};
}
componentDidMount () {
}
handleFabPress = () => {
ToastAndroid.show('Pressed', ToastAndroid.SHORT)
}
handleState = (state) => {
this.bottomSheet.setBottomSheetState(state)
}
handleHeaderPress = () => {
this.handleState(STATE_ANCHOR_POINT)
}
renderDetailItem(icon, text,i) {
return (
<TouchableNativeFeedback key={i} delayPressIn={0} delayPressOut={0} background={RippleColor('#d1d1d1')}>
<View>
<View pointerEvents="none" style={styles.detailItem}>
<Icon name={icon} size={22} color={PRIMARY_COLOR} />
<Text pointerEvents="none" style={styles.detailText}>{text}</Text>
</View>
</View>
</TouchableNativeFeedback>
)
}
renderRow(r){
return (
<TouchableNativeFeedback delayPressIn={0} delayPressOut={0} useForeground={true} background={RippleColor('#ffc400')}>
<View style={{ width: Math.round(width * PixelRatio.get())/15, elevation: 2, borderRadius: 4, overflow: 'hidden', backgroundColor: "#fff", marginTop: 5, marginLeft: 8 }}>
<Image style={{ borderTopLeftRadius: 4, borderTopRightRadius: 4, height: (Math.round(width * PixelRatio.get())/8), width: Math.round(width * PixelRatio.get())/15}} source={{uri: (r.profile_path == null) ? 'https://techreport.com/forums/styles/canvas/theme/images/no_avatar.jpg' : 'https://image.tmdb.org/t/p/w185/'+r.profile_path}} />
<View style={{ flexDirection: 'column', paddingTop: 4, paddingHorizontal: 8 }}>
<Text style={{ textAlign: 'center', fontSize: 10 }}>{r.name}</Text>
</View>
</View>
</TouchableNativeFeedback>
);
}
renderBottomSheetContent() {
return (
<Container>
<Tabs initialPage={0}>
<Tabn heading={"Actor("+this.state.dataSource._dataBlob.s1.length+")"} tabStyle={{ backgroundColor: "#4589f2" }} activeTabStyle={{ backgroundColor: "#205cb2" }}>
<ListView horizontal={false} initialListSize={this.state.dataSource._dataBlob.s1.length} contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} enableEmptySections={true} />
</Tabn>
<Tabn heading={"Actor2"} tabStyle={{ backgroundColor: "#4589f2" }} activeTabStyle={{ backgroundColor: "#205cb2" }}>
<ListView horizontal={false} initialListSize={this.state.dataSource._dataBlob.s1.length} contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} enableEmptySections={true} />
</Tabn>
</Tabs>
</Container>
)
}
renderFloatingActionButton() {
return (
<FloatingActionButton
autoAnchor
elevation={18}
rippleEffect={true}
rippleColor="#55ffffff"
icon="star"
iconProvider={IconMDI}
iconColor={WHITE}
iconColorExpanded={PRIMARY_COLOR}
onPress={this.handleFabPress}
backgroundColor={PRIMARY_COLOR}
backgroundColorExpanded={WHITE}
/>
)
}
renderBackdrop() {
return (
<BackdropBottomSheet height={anchorPoint}>
<View style={{flex: 1, backgroundColor: 'white'}}>
<Image style={{width, height: 320}} source={{uri:"https://image.tmdb.org/t/p/w640/6iUNJZymJBMXXriQyFZfLAKnjO6.jpg"}} />
</View>
</BackdropBottomSheet>
)
}
renderMergedAppBarLayout() {
return (
<MergedAppBarLayout
translucent
mergedColor={PRIMARY_COLOR}
toolbarColor={PRIMARY_COLOR}
statusBarColor={STATUS_BAR_COLOR}
style={styles.appBarMerged}>
<Icon.ToolbarAndroid
title='Jon Snow'
titleColor={WHITE}
style={{elevation: 6}}
onIconClicked={() => this.handleState(STATE_COLLAPSED)}
/>
</MergedAppBarLayout>
)
}
renderBottomSheet() {
return (
<BottomSheetBehavior
anchorEnabled
anchorPoint={anchorPoint}
peekHeight={80}
elevation={8}
ref={(bottomSheet) => { this.bottomSheet = bottomSheet }}
onSlide={this.handleSlide}
onStateChange={this.handleBottomSheetChange}
state={STATE_ANCHOR_POINT}>
<View style={styles.bottomSheet}>
<BottomSheetHeader
onPress={this.handleHeaderPress}
textColorExpanded={WHITE}
backgroundColor={WHITE}
backgroundColorExpanded={PRIMARY_COLOR}>
<View pointerEvents='none' style={styles.bottomSheetHeader}>
<View style={styles.bottomSheetLeft}>
<Text selectionColor={'#000'} style={styles.bottomSheetTitle}>
Wonder Woman
</Text>
<View style={styles.starsContainer}>
<Text style={{marginRight: 8}} selectionColor={STAR_COLOR}>Power. Grace. Wisdom. Wonder.</Text>
</View>
</View>
<View style={styles.bottomSheetRight}>
<Text style={styles.routeLabel} selectionColor={PRIMARY_COLOR}>2017-05-30</Text>
</View>
</View>
</BottomSheetHeader>
{this.renderBottomSheetContent()}
</View>
</BottomSheetBehavior>
)
}
renderSlider() {
return (
<View style={styles.containerMap}>
<Image style={{height: "100%"}} source={{uri: "https://image.tmdb.org/t/p/original/paKWqpEGiHilKfpFKuHXXkFpYNn.jpg"}} />
</View>
)
}
renderToolbar() {
return (
<ScrollingAppBarLayout
translucent
barStyleTransparent={'light-content'}
style={styles.scrollAppBar}
statusBarColor={STATUS_BAR_COLOR}>
</ScrollingAppBarLayout>
)
}
render() {
return (
<CoordinatorLayout style={styles.container}>
<StatusBar translucent barStyle='dark-content' backgroundColor={STATUS_BAR_COLOR} />
{this.renderToolbar()}
<View style={styles.content}>
{this.renderSlider()}
</View>
{this.renderBackdrop()}
{this.renderBottomSheet()}
{this.renderMergedAppBarLayout()}
{this.renderFloatingActionButton()}
</CoordinatorLayout>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#000",
},
content: {
backgroundColor: 'transparent',
},
scrollAppBar: {
zIndex: 1,
},
appBarMerged: {
backgroundColor: 'transparent',
},
containerMap: {
//position: 'absolute',
//top: 0,
//left: 0,
//right: 0,
//bottom: 0,
height,
width,
//justifyContent: 'flex-end',
//alignItems: 'center',
//backgroundColor: "#000"
},
bottomSheet: {
height,
zIndex: 5,
backgroundColor: 'white'
},
bottomSheetHeader: {
padding: 16,
paddingLeft: 28,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
// Don't forget this if you are using BottomSheetHeader
backgroundColor: 'transparent'
},
bottomSheetLeft: {
flexDirection: 'column'
},
bottomSheetRight: {
flexDirection: 'column'
},
bottomSheetTitle: {
fontFamily: 'sans-serif-medium',
fontSize: 18,
},
bottomSheetContent: {
//flex: 1,
backgroundColor: WHITE,
},
starsContainer: {
flexDirection: 'row',
alignItems: 'center',
},
routeLabel: {
marginTop: 32,
marginRight: 12,
fontSize: 12,
fontFamily: 'sans-serif-medium',
},
detailListSection: {
paddingVertical: 8,
},
detailItem: {
height: 42,
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 26,
},
detailText: {
color: '#333',
fontSize: 14,
marginLeft: 24,
lineHeight: 22,
},
list:{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginRight: 8,
paddingBottom:65,
},
})
export default ProvaTab2
Screenshot of emulator/device
Is the bug present in both ios and android or in any one of them?
I tried only on android.
Any other additional info which would help us debug the issue quicker.
I’ve tried all the solutions that I’ve found here, none of them work. To try it, you must also install: react-native-vector-icons react-native-bottom-sheet-behavior
There is a way to force the elements that are in the scrolling tabs. I think the problem is due to a conflict with react-native-bottom-sheet-behavior.
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Scrollbar issue with JS tabs - javascript - Stack Overflow
The scrollbar is on the parent element, .tab-content . The elements that are being manipulated (hidden/shown) are the children elements, ...
Read more >Element settings- Tabs scroll - formtitan support
This means that the tabs are displayed in one line and navigation arrows are added to allow the filler to reach the tabs...
Read more >Scroll to the right position after switching Behavior/Content tabs
Problem /Motivation When switching between the Behavior and Content tabs, the last active paragraphs is not persisted and not visible on ...
Read more >Scrollable area does not get focus with TAB focus navigation
The scrollable regions of elements that are being rendered and > are not expressly inert. > The CSS 'overflow' property's 'scroll' value ...
Read more >Create Elementor Tabs With Horizontal Scroll For Mobile Users
This tutorial will only work with that element. If you are using another tabs Element from an addon, it is still possible but...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I faced the same issue while using tabs which are places below another view. I think the Tabs + ListView scroll’s conflicts with the scroll of the main container if it the tabs are not positioned at the top. Disabling the scroll of the listview solved it.
scrollEnabled = {false}
Mostly a React Native issue. Closing this issue.