Android blank view

[Linrasis]

Hello,

I try to add 4 pages, in iOS work perfectly but Android is blank.. for what ? i search on all issues..

import React from 'react';
import { StyleSheet, View, TouchableHighlight, Text, Dimensions } from 'react-native';
import { IndicatorViewPager, PagerTitleIndicator } from 'rn-viewpager';

export default class HomeView extends React.Component {
  renderTitleIndicator () {
    return (
      <PagerTitleIndicator style={stylesHome.indicatorContainer} trackScroll={true} itemTextStyle={stylesHome.indicatorText} selectedItemTextStyle={stylesHome.indicatorSelectedText} selectedBorderStyle={stylesHome.selectedBorderStyle} titles={['À la une', 'Actualités', 'Prochain match', 'Classement']} />
    );
  }

  render () {
    return (
      <View style={stylesHome.container}>
        <IndicatorViewPager style={stylesHome.indicator} indicator={this.renderTitleIndicator()} removeClippedSubviews={false}>
          <View style={{flex: 1, width: '100%', height: 300}}>
            <Text>test0</Text>
          </View>
          <View style={{flex: 1, width: '100%', height: 300}}>
            <Text>test1</Text>
          </View>
          <View style={{flex: 1, width: '100%', height: 300}}>
            <Text>test2</Text>
          </View>
          <View style={{flex: 1, width: '100%', height: 300}}>
            <Text>test3</Text>
          </View>
        </IndicatorViewPager>
      </View>
    );
  }
}

const stylesHome = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  indicator: {
    flex: 1,
    flexDirection: 'column-reverse',
    width: Dimensions.get('window').width,
    height: 300,
  },
  indicatorContainer: {
    backgroundColor: '#f6f6f6',
    height: 48
  },
  indicatorText: {
    fontSize: 14,
    color: '#828282',
  },
  indicatorSelectedText: {
    fontSize: 14,
    color: 'black',
  },
  selectedBorderStyle: {
    height: 3,
    backgroundColor: '#e03a3e',
  },
});

I have try to add view with screen.js in iOS but one page need param (navigation: this.props.navigation) so she crash..

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

In IndicatorViewPager i use :

<IndicatorViewPager>
 <HomeUneView/>
 etc..
</IndicatorViewPager>

How I sent this parameter in my view ? Thank's.

[luizbaldi]

Same issue here...

[egunsoma]

Yes, here also

[Wjy1005]

me too.

[egunsoma]

Maybe my problem was related to big image density, anyway I solved my problem without using this library. The lesser dependency I have in a RN app, the more stable my application is, this is what I found.

[Wjy1005]

https://github.com/facebook/react-native/issues/14296 The reason as above

[brickpop]

Nobody?

In my case, the initial render won't draw anything. After moving out and back, the pager will render without any scrolling snap.

[crisward]

Wrapping this component in the component outlined here -

ViewPagerAndroidContainer https://github.com/facebook/react-native/issues/13463#issuecomment-296423537

Worked for me.

[DiepEsc]

forceScrollView={true} Worked for me.

[arabold]

I started to get this problem in Android 5 (but not on my Android 10 phone) after upgrading to react-native-viewpager v4.0.0 (which uses ViewPager2 now). The workaround using something like ViewPagerAndroidContainer works though 🙄 🤔

[ketangoyani]

I am getting the same problem when I tried to open another IndicatorViewPager from one, blank screen appears