FlatList items have gap in high resolution phone

[KingAmo]

• 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

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 151.48 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/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
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1

Description

i am using FlatList to custom a time indicator to show the time left,
but there are gaps between FlatList items in high resolution phone, no matter in emulator or real phone

Reproducible Demo

   <ImageBackground
                style={{ height: this.screenHeight * 0.22, width: '100%', alignItems: 'center' }}
                source={require('../../../../images/img_cardBgTop.png')}
                resizeMode="stretch"
              >
                <Text style={styles.title2}>电子停车卡</Text>
                <Text style={[styles.text, { marginVertical: 5 }]}>卡号：{cardNo}</Text>
                <View style={{ height: 20, marginTop: 5 }}>
                  <FlatList
                    data={this.timeIndicatorData}
                    renderItem={this.renderTimeBlock}
                    horizontal
                    keyExtractor={i => i}
                  />
                </View>
                <View style={{ flex: 1, justifyContent: 'center' }}>
                  <Text style={styles.text}>剩余：{parseInt(remainSeconds / 3600, 10)}小时{(parseInt(remainSeconds / 60, 10)) % 60}分{remainSeconds % 60}秒（截至{endDate}）</Text>
                </View>
              </ImageBackground>

 renderTimeBlock = ({ item, index }) => {
    const { usedTimePercent } = this.state;
    return (
      <View
        style={{
          width: 3,
          height: 10,
          backgroundColor: index < usedTimePercent ? 'white' : color.newEnergy,
          marginRight: ((index + 1) % 25) === 0 ? 1 : 0,
          borderTopLeftRadius: index === 0 ? 5 : 0,
          borderTopRightRadius: index === this.timeIndicatorData.length - 1 ? 5 : 0,
          borderBottomLeftRadius: index === 0 ? 5 : 0,
          borderBottomRightRadius: index === this.timeIndicatorData.length - 1 ? 5 : 0,
          borderTopWidth: 1,
          borderBottomWidth: 1,
          borderLeftWidth: (index % 25) === 0 ? 1 : 0,
          borderRightWidth: (index + 1) % 25 === 0 ? 1 : 0,
          borderColor: color.newEnergy,
        }}
      />
    );
  };

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[KingAmo]

the issue still exists in 0.57.1，help me please...

• in 1080*1920 device :
  
• in 728*1280 device :
  

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.