Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal FlatList pagination does not work properly on Android #21096

Closed
3 tasks done
tigo0 opened this issue Sep 13, 2018 · 1 comment
Closed
3 tasks done

Horizontal FlatList pagination does not work properly on Android #21096

tigo0 opened this issue Sep 13, 2018 · 1 comment
Labels
Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@tigo0
Copy link

tigo0 commented Sep 13, 2018

Environment

React Native Environment Info:
  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 140.98 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    npm: 5.6.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    Android SDK:
      Build Tools: 23.0.1, 25.0.1, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.3
      API Levels: 19, 21, 22, 23, 25, 26, 27
  IDEs:
    Android Studio: 3.0 AI-171.4443003
    Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.5.0 => 16.5.0 
    react-native: 0.57.0 => 0.57.0 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

Description

Horizontal FlatList with pagination does not paginate properly on android.

Reproducible Demo

Clean initialization of react-native 0.57.0 with react-native init. Build a Horizontal FlatList and run on Android. Tested on Android 8. Might be related with #20639

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Dimensions, Text, View, FlatList} from 'react-native';

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

const data = [
  {
    id: 1,
    text: 'Test 1',
  },
  {
    id: 2,
    text: 'test 2',
  },
  {
    id: 3,
    text: 'test 3'
  }
];

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
  }

  keyExtractor = item => item.id.toString();

  renderItem({ item}) {
    return (
      <View key={item.id} style={{width: width}}>
        <Text>{item.text}</Text>
      </View>
    )
  }

  render() {
    return (
      <FlatList
        data={data}
        horizontal
        pagingEnabled
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
      />
    );
  }
}

2018_09_13_15_11_29

@olegbl
Copy link
Contributor

olegbl commented Sep 21, 2018

Same as #21116

@tigo0 tigo0 closed this as completed Sep 27, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Sep 27, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 27, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants