React-native-tab-view: TabBar is not rendering anything on RN 0.37

[sibelius]

it is working fine on RN35

this is my code

_renderLabel = ({ route }) => (
    route.title ? <Text style={styles.tabLabel}>{route.title}</Text> : null
  );

  _renderHeader = (props) => {
    return (
      <TabBarTop
        {...props}
        indicatorStyle={{borderColor: 'green', borderWidth: 1}}
        labelStyle={{color: 'black'}}
        renderLabel={this._renderLabel}
        style={styles.tabbar}
      />
    );
  };

styles

tabLabel: {
    color: 'black',
    margin: 8,
    fontWeight: 'bold',
  },
tabbar:{
    backgroundColor: 'white',
    height: 30,
    borderColor: 'lightgray',
    borderWidth: 1,
    shadowColor: 'rgba(0, 0, 0, 0.12)',
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 2,
    },
  },

[satya164]

That's strange. Do you have an example app which I can quickly try out?

[Rebsos]

I'm also facing problems with React Native 0.36.0
Nothing renders. If i past the example into my app, the scene renders, but not the tabbar.
RN35 is OK

[satya164]

@Rebsos I'm gonna try this tonight. Is this on Android or iOS?

[FDMatthias]

We are having the same issue, both on Android and iOS (tested on multiple devices). No rendering of labels whatsoever, RN version 0.36.0 and react-native-tab-view version 0.0.37.

(and it was working before)

[satya164]

I'm looking into it right now. Will keep you updated.

[satya164]

Hey, when I test with a new example and I don't see the tab bar. I suspect this is due to https://github.com/facebook/react-native/commit/c43a3f5d8412eb0dfe894a192f15efa9c41ab318

You can try putting height: 48 as a style for the tabbar, it should fix the issue. @MatthiasDebaere @Rebsos

@Rebsos about the scene not rendering in your app. do you use a scrollview as a scene? in that case, try putting flex: 1 on the scrollview. If it doesn't work, please link me to an example setup of what you have so I can test.

@sibelius In your case, your label's margin is actually too big to accommodate the text, that's why it's not visible. Try setting margin to a smaller amount or increase the tabbar height.

[FDMatthias]

You can try putting height: 48 as a style for the tabbar, it should fix the issue.
Confirmed, this fixed the issue, thanks!

[sibelius]

48 as height works, tks for the help

[satya164]

I'm going to re-open this until I fix it in the lib so you won't have to specify the height.

[sibelius]

maybe it is related to this one: https://github.com/facebook/react-native/commit/0a9b6bedb312eba22c5bc11498b1cc41363e5f27, check this PR (https://github.com/jaysoo/react-native-prompt/pull/9)

[ryankask]

I just upgraded and I'm getting "Invalid prop overflow of value scroll [...]" on an older version of RN.

[satya164]

@ryankask Unfortunately I've to drop support for old version of React Native to be able to fix the bug. I wish there was a better way :(

[ryankask]

Understandable! I'll be upgrading RN soon and I'm sure a lot of users try to keep up to date.

[Andreyco]

To note, this is still issue on RN 0.37.
Unless I specify tabbar height it's not visible.

[satya164]

@Andreyco so it broke again then? Hmm... I'll check.

[Andreyco]

Yes, it is. Top/bottom bars are not visible. Run all your examples to be sure, it's not me & my setup.

[Rebsos]

Sorry for responding that late and thank you for your great work.

Yes i'm using a ScrollView and here are my recent tests

React-native + React-native-tab-view
0.36.1 + 0.0.37: working
0.36.1 + 0.0.38: working
0.37.0 + 0.0.37: working
0.37.0 + 0.0.38: working

tested on Android Emulator

[Andreyco]

Retested on iOS and Android right now - not working.
RN 0.37.0, package 0.0.38

[satya164]

Thanks all. I'll check this ASAP.

[satya164]

Sorry I just tested 0.0.38 in a fresh project with React Native 0.37 and 0.38-rc.0 on Android and iOS and it's working fine without having to specify height. There's a bug where the hairline shadow in iOS is not visible, but that's a separate thing.

Are you sure you are using correct version? Can you share the example project for me to test?

[ingvardm]

Im curently using rn 0.37 and tab-view 0.0.38 and it doesn't render.
Worked before with rn 0.35 if i chenged overflow:'visible' in tabbar.js

[satya164]

@ingvardm You shouldn't specify any overflow value. Try removing overflow and lemme know if it still doesn't work.

[ingvardm]

Works only with rwact-native#0.35 with this modification in your TabBar.js
tabbar: { overflow: 'visible', },

[satya164]

Yes, that's why [email protected] doesn't support [email protected]. You should use [email protected] with [email protected].

Can you share an example project where the latest version doesn't work with [email protected] and above when you don't specify any overflow value?

[ingvardm]

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { TabViewAnimated, TabBarTop } from 'react-native-tab-view';

import PageExplore from '../pages/Explore';
import PageChats from '../pages/Chats';
import PageEvents from '../pages/Events';

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  page: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default class TabView extends Component {
  state = {
    index: 0,
    routes: [
      { key: '1', title: 'Explore' },
      { key: '2', title: 'Chats' },
      { key: '3', title: 'Events' },
    ],
  };

  _handleChangeTab = (index) => {
    this.setState({ index });
  };

  _renderHeader = (props) => {
    return <TabBarTop {...props} />;
  };

  _renderScene = ({ route }) => {
    switch (route.key) {
    case '1':
      return <PageExplore />;
    case '2':
      return <PageChats />;
    case '3':
      return <PageEvents />;
    default:
      return null;
    }
  };

  render() {
    return (
      <TabViewAnimated
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onRequestChangeTab={this._handleChangeTab}
      />
    );
  }
}

[satya164]

@ingvardm I tested with RN 0.36, 0.37 and 0.38 and all were working. What's your version of RN and version of react-native-tab-view? Can you link me to a repo?

[ingvardm]

0.35 + 0.0.37 works with the workaround
Anything else just doesn't render.
Sorry, the repo is private :/

[satya164]

@ingvardm Can you tell me the exact version of React Native and react-native-tab-view on which you tested so I can try it? It worked fine with all the versions I've tested so far.

You shouldn't have to specify overflow: 'visible' if you're using [email protected] and [email protected]. The default is overflow: 'visible'.

[ingvardm]

0.37 + 0.0.38/0.0.39 doesn't work
0.35 + 0.0.37 works
0.37 + 0.0.37 doesn't work

[satya164]

I just tested [email protected] with [email protected] on both Android and iOS with the default example and tabbar is rendering fine for me.

Sorry I cannot debug without a reproducible example. Happy to look into it if anyone can provide me a reproducible example.

[ingvardm]

Fixed the issue by removing android build.

[satya164]

I'm closing this. Let me know if someone is still facing the issue.

[sibelius]

I'm facing this issue again against react native 43

and "react-native-tab-view": "^0.0.58",

[sibelius]

fixed using zIndex: 0