React-native-tab-view: Android blank screen and tab don't click..

[Linrasis]

Current behaviour

Blank screen with Android for all screen, work perfectly on iOS... i have search in all issues.. and can't click on Tab too..

Expected behaviour

Screen import no display with android, no error..

Code sample

import React from 'react';
import { StyleSheet, View, TouchableHighlight, Text, Dimensions } from 'react-native';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

import styles from '../styles';

import HomeUneView from '../views/homeUne';
import HomeActualitesView from '../views/homeActualites';
import HomeMatchsView from '../views/homeMatchs';
import HomeClassementsView from '../views/homeClassements';

export default class HomeView extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    params: navigation.state.params,
    headerLeft: (
      <View style={styles.header}>
        <Text style={styles.headerText1}>R</Text><Text style={styles.headerText2}>CS</Text><Text style={styles.headerText3}> LIVE</Text>
      </View>
    ),
    headerRight: (
      <TouchableHighlight onPress={() => navigation.navigate("DrawerOpen")} style={styles.headerBtn}>
        <Text style={styles.headerBtnText}>&#9776;</Text>
      </TouchableHighlight>
    ),
  });

  state = {
    index: 0,
    routes: [
      { key: 'une', title: 'À la une', navigation: this.props.navigation },
      { key: 'actualites', title: 'Actualités', navigation: this.props.navigation },
      { key: 'matchs', title: 'Prochain match' },
      { key: 'classements', title: 'Classement' },
    ],
  };

  renderTabBar = props => (
    <TabBar
      {...props}
      scrollEnabled
      indicatorStyle={stylesHome.indicator}
      style={stylesHome.tabbar}
      tabStyle={stylesHome.tab}
      labelStyle={stylesHome.label}
    />
  );

  renderScene = SceneMap({
    une: HomeUneView,
    actualites: HomeActualitesView,
    matchs: HomeMatchsView,
    classements: HomeClassementsView,
  });

  render () {
    return (
      <View style={stylesHome.container}>
        <TabView
          style={[stylesHome.container, this.props.style]}
          navigationState={this.state}
          renderScene={this.renderScene}
          renderTabBar={this.renderTabBar}
          onIndexChange={index => this.setState({ index })}
          initialLayout = {{ width: Dimensions.get('window').width }}
        />
      </View>
    );
  }
}

const stylesHome = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  tabbar: {
    flexDirection: 'row',
    backgroundColor: '#f6f6f6',
    zIndex: 1,
  },
  tab: {
    flex: 1,
    height: 48,
    padding: 0,
  },
  indicator: {
    backgroundColor: '#e03a3e',
  },
  label: {
    color: '#828282',
    fontSize: 14,
  },
  labelSelected: {
    fontSize: 14,
    color: 'black',
  },
});

Screenshots (if applicable)

Android : https://imgur.com/a/VEhYGmN
iOS : https://imgur.com/a/7siCIQd

What have you tried

I have update all depencies, set width, set height...

Your Environment

| software | version
| --------------------- | -------
| ios or android | 26
| react-native | 0.54.0
| react-native-tab-view | 1.0.2
| node | v8.9.3
| npm or yarn | 1.5.1

[andrewzey]

I'm having the same issue. The problem appears to be caused by <TabView> being inside a <View>

[newbiepub]

There might be some problems with default pager in Android. Try to change renderPage to <PagerPan {...props}/> then it could fix Android blank screen

[Linrasis]

Thank's @newbiepub , juste add :

  renderPager = props => (
    <PagerPan {...props} />
  );

and

renderPager={this.renderPager}

Works perfectly !

[abury]

This doesn't seem to fix the problem for me. It works for a split second on Android, but then vanishes, and causes a crash on iOS: Exception thrown while executing UI block: CALayer bounds contains NaN: [nan-; inf40]

[wonga151]

@abury I have the exact same problem as you, have you figured a solution out?

EDIT: I fixed my problem, I was messing around with the given examples, and on the TopBarTextExample when I removed the scrollEnabled prop from the renderTabBar my TabView was not there on Android. My implementation did work with scrollEnabled, but I didn't want it enabled.

I fixed this by adding in default into the style of tab bar and removing the scroll.
{...props}
style={ width: Dimensions.get('window'.width) }
/>

[abury]

@anw063 Yeah I did. I ended up using @Linrasis code and adapting it from there. Not sure what the original problem was, but was able to move past it and it works nicely.

[firashamila33]

could not figure out a solution , even adding the renderPager props callback function following @Linrasis & @newbiepub ,
here a Demo on snack
any solutions ???
EDIT : SOLVED, I found out that Views rendered inside tabview pages are not displayed when empty ( when nested in scrollview)