View Doesn't render if it was a out of screen on Android

View doesn’t render if it was a out of screen. It works fine on iOS.

<Animated.View
          style={[styles.wrap, { transform: [{ translateX: left }] }]}
        >
          {newPostExpected && (
            <PostingLoaderBar />
          )}
          <Animated.View
            style={[
              styles.wrap,
              { paddingTop, transform: [{ translateY: listViewTop }] },
              hasNavBar && { paddingTop: 60 },
            ]}
            {...this.listViewResponder.panHandlers}
          >
            <ListView
              ref={ref => this.listView = ref}
              dataSource={posts}
              renderRow={this.renderRow}
              renderSectionHeader={this.renderHeader}
              onEndReachedThreshold={2000}
              pageSize={10}
              onScroll={this.handleScroll}
              onEndReached={this.getPosts}
              enableEmptySections={true}
              scrollEnabled={canScroll}
              onChangeVisibleRows={(visibile, changed) => {
                let lowestKey = null;
                Object.keys(visibile).forEach((key, i) => {
                  if (i === 0) {
                    lowestKey = key;
                  } else if (key < lowestKey) {
                    lowestKey = key;
                  }
                });
                const notVisibleRows = Object.keys(changed).filter(key => !changed[key][0]);
                if (notVisibleRows.length > 0) {
                  notVisibleRows.forEach(row => {
                    this[`feedItem${row}`].getWrappedInstance().resetOverlays();
                  });
                }
                if (this.state.postBlob[lowestKey]) {
                  this.topRowVoting = this.state.postBlob[lowestKey][0].voting;
                }
              }}
              refreshControl={requiresRefresh && !singlePost ? (
                  <RefreshControl
                    refreshing={refreshing && !this.props.refreshing}
                    onRefresh={this.onRefresh}
                  />
                ) : null}
              onMomentumScrollBegin={() => {
                this.hasMomentum = true;
              }}
              onMomentumScrollEnd={() => {
                this.hasMomentum = false;
              }}
            />
          </Animated.View>
          {hasComments && (
            this.renderComments() // on Android it's render's an empty blank
          )}
          {singlePost && <View style={{ height: 60 }} />}
        </Animated.View>

this.renderComments just renders the following:

<CommentContainer
        ref={ref => this.commentRef = ref}
        comments={comments.data}
        commentCount={comments.total}
        routeBack={this.animateBack}
        handleMove={this.handleMove}
        animateForward={this.animateForward}
        activePost={activePost}
        parentId={null}
        routeScene={this.props.routeScene}
        incrementCommentCount={(increment) => this.incrementCommentCount(activePost.id, increment)}
        refreshPost={() => this.refreshPost(activePost.id)}
      />

It works fine on iOS but on Android i’m getting empty blank instead of comments container

Additional information React Native version: 0.35.0 Platform(s) (iOS, Android, or both?): Android 5.1.1 Operating System (macOS, Linux, or Windows?): macOS

[satya164]

@shahen94

You can set container size to 2 * WINDOW_WIDTH

So the issue isn’t that it doesn’t render view out of screen, it’s just that overflow: hidden is default on Android and can’t be changed. So anything which is outside the view bounds (not the screen) will get hidden since the overflow is hidden. I think the issue title is misleading.

[shahen94]

@satya164 man I think you don’t understand issue correctly. I have no time to read what you did in your library. Try to read Android specification and you’ll find it out there.

Try to create empty app. create any view and move it out of the screen. It never will create. there are many solutions.

1. You can use ViewPagerAndroid
2. You can use ScrollView
3. You can set container size to 2 * WINDOW_WIDTH. (if you haven’t dynamic growing list).

If you think that’s a bug, then report it to android. Because all realworld apps faced with this issue, WhatsApp/PicsArt/Momentum and solved it as i said