BottomSheetBehavior together Native-base Tab, no scroll.

[Angelk90]

I am using the native base tab inside the BottomSheetBehavior, inside the tab there is a list of elements. I can not scroll the list, I only tried the tab in the render, it works, ie the elements flow, as soon as I put them inside the renderBottomSheetContent () function, the elements remain fixed. @cesardeazevedo : You could take a look, as soon as you have a moment:

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 {
  static contextTypes = {
    openDrawer: PropTypes.func,
  };

  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

[cesardeazevedo]

Sorry, i've never used native-base (and i really don't recommend anyway), so i really don't know how to help you in this case, i just have been using a native tablayout but it's completely different approach.

I can't take a look at each possibly compatibility of each module out there, i just gave all the help that i could to you, sorry.