CODEWITHSUNDEEP
reactjsreact-nativescrollscrollviewandroid-scrollable-tabs
Tran Van Thang
Tran Van Thang

Reputation: 1

When the ScrollableTabView is nested inside ScrollView, it can not show anything

When I use ScrollableTabView is nested inside ScrollView, it can't show anything in Android althought I updated ScrollableTabView version 0.8.0.

react-native-cli: 2.0.1 react-native: 0.44.3

My code like this: 

   render() {
    return (
    <ScrollView>
      {this._renderUser()}
      <ScrollableTabView
        tabBarActiveTextColor="red"
        tabBarUnderlineStyle={{ backgroundColor: 'red' }}
        initialPage={0}
        renderTabBar={() => <DefaultTabBar textStyle={Styles.tabText} />}>                  
        <ScrollView
          tabLabel="线索"
          style={Styles.tabView}>
          <ListView dataSource={this.state.dataSource}
            renderRow={this._renderRow} />
        </ScrollView>
        <ScrollView
          tabLabel="客户档案">
          {this._renderCusProfile()}
        </ScrollView>
      </ScrollableTabView>
    </ScrollView>
  );
}

Please click here to show image example

Any pointers to what I might need to change in your code to get this to work?

Thanks

Upvotes: 0

Views: 1506

Answers (2)

ZeivRine
ZeivRine

Reputation: 233

import Dimensions from react native :

import {
  ...
  Dimensions
} from "react-native";

then you bring height :

const { height } = Dimensions.get('window');

And you apply hight to ScrollableTabView

  <ScrollableTabView
        style={{ height: height, position: 'relative' }}
      ...

Upvotes: 1

csath
csath

Reputation: 1316

Not sure what styling includes in your Styles.tabView. If you use { flex: 1 } inside your style object for this might work.

Upvotes: 0

Related Questions