Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs problem in the scroll of the elements. #1470

Closed
Angelk90 opened this issue Dec 23, 2017 · 7 comments
Closed

Tabs problem in the scroll of the elements. #1470

Angelk90 opened this issue Dec 23, 2017 · 7 comments

Comments

@Angelk90
Copy link

@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

20171224_002414

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.

@akhil-ga
Copy link
Contributor

akhil-ga commented Jan 5, 2018

@Angelk90 couldn't run your code due to some errors. Can you create a test repo for us to test.

@Angelk90
Copy link
Author

Angelk90 commented Jan 5, 2018

@akhil-geekyants : Meanwhile, I thank you for answering.
What kind of problems does it give you?

The version I installed is: react-native-bottom-sheet-behavior@1.0.0-beta.7

I believe why I miss this:
https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle#L137-L138

And use as a version of sdk these:
https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle#L86-L98

If it does not work, I will then say how I create a report and the audience, never done it. ;)

@akhil-ga
Copy link
Contributor

akhil-ga commented Jan 9, 2018

@Angelk90 This may be related to React Native Issue facebook/react-native#1966

@SupriyaKalghatgi
Copy link
Contributor

@Angelk90 Did you find this working?

@Angelk90
Copy link
Author

@SupriyaKalghatgi : No, it does not work.

@akhil-ga
Copy link
Contributor

Mostly a React Native issue. Closing this issue.

@kaushikwavhal
Copy link

kaushikwavhal commented Jul 20, 2018

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}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants