Horizontal FlatList is not ok on Android (iOS is OK) #21595
Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-2635QM CPU @ 2.00GHz
Memory: 818.48 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
Android SDK:
Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3
API Levels: 16, 18, 19, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
react: ^16.5.1 => 16.5.2
react-native: ^0.57.1 => 0.57.1
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-macos-cli: 2.0.1
Description
Code is so simple:
<FlatList
horizontal={true}
data={this.state.data}
style={{backgroundColor:'yellow'}}
showsHorizontalScrollIndicator={false}
keyExtractor={this._keyExtractor.bind(this)}
renderItem={({item}) => <ProductItem navigation={this.props.navigation} dataItem={item} key=
{item.id}/>}/>
As you can see below when app is RTL and list has just one content (that doesn't fill it's width) on Android it goes to the end (left), iOS behavior is OK as expected. LTR is OK on both.
LTR:
- Android:
- iOS:
RTL:
- Android:
- iOS:
Reproducible Demo
none