React-Native: Unexplainable space(a white line) between two Views

Question

I have two Views stacked one on top the other.

Screenshot in emulator:

What I see on my phone:

As can be seen from the screens, the emulator version is fine but i have a white line between the two Views on my phone. Code below:

import React, { Component } from 'react';

import {
  Text,
  View,
  StyleSheet,
} from 'react-native';

class FlightSearch extends Component {

  render() {

    return (
      <View style={styles.pageRoot}>

        <View style={styles.navSection}></View>

        <View style={styles.searchSection}>

          <View style={styles.locationSection}></View>

          <View style={styles.searchParametersSection}></View>

        </View>

      </View>
    );
  }

}


const styles = StyleSheet.create({
  pageRoot: {
    flex: 1,
    flexDirection: 'column',
  },
  navSection: {
    backgroundColor: '#368ec7',
    flex: 25,
    alignSelf: 'stretch'
  },
  searchSection: {
    flex: 75,
    alignSelf: 'stretch',
  },
  locationSection: {
    flex: 30,
    backgroundColor: '#276fa3',
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#205e8c'
  },
  searchParametersSection : {
    flex: 70,
    backgroundColor: 'rgba(41,123,184,1)',
    borderTopWidth: 1,
    borderTopColor: 'rgba(69, 140, 194, 0.7)',
    flexDirection: 'column'
  }
});

export default FlightSearch;

Answer 1

I had the same problem within a scrollview, where few images lie horizontally without any space between them. While working on iOS I had no problems however when I switched to Android, those white lines popped out, and they were disappearing at some scroll positions. The hack that I used was adding a marginRight: -1 (horizontal images).

User won't notice the difference but this way you can resolve the issue.

return (
      <ScrollView ref='sr' style={styles.container} horizontal={true}>
        <Image source={im1} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im2} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im3} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im4} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im5} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im6} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
      </ScrollView>
    )