Native base header has odd solid color below

Question

i am using react-native with native base for my app.

I get this error recently that do not know when it started happening, initially it worked as intended. I get a solid line below the header in grey that is over everything I scroll on the flatlist. It happens on both Android and iOS.

react-native: 0.50.3
native-base: 5.3.0

I declare the header like this:

<View style={[styles.content,StyleSheet.absoluteFill]}>
    <StatusBar hidden={false} />
    <StyleProvider style={getTheme(commonColors)}>
    <Header>
      <Left>
        <Image
          style={styles.chaskiLogo}
          source={require('../images/image.png')}
        />
      </Left>
      <Right>
          <Button disabled={this.state.loading} onPress={this.gotoFeeds.bind(this)} iconLeft transparent dark>
            <Icon style={styles.config} ios='ios-list' android="md-list"/>
          </Button>
       </Right>
    </Header>
    </StyleProvider>
    <Flatlist />
    ...
</View>

And commonColors is defined like this:

import color from "color";

import { Platform, Dimensions, PixelRatio } from "react-native";

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX = platform === "ios" && deviceHeight === 812 && deviceWidth === 375;

export default {
  platformStyle,
  platform,

  // Header
  toolbarDefaultBg: "#fff",
  toolbarHeight: platform === "ios" ? (isIphoneX ? 88 : 64) : 56,
  toolbarIconSize: platform === "ios" ? 20 : 22,
  toolbarSearchIconSize: platform === "ios" ? 20 : 23,
  searchBarHeight: platform === "ios" ? 30 : 40,
  toolbarInverseBg: "#222",
  toolbarTextColor: "#fff",
  iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
  androidStatusBarColor: "#000",
  get statusBarColor() {
    return color(this.toolbarDefaultBg)
      .darken(1)
      .hex();
  },
};

UPDATE:

styles:

const styles = StyleSheet.create({
  // content: { backgroundColor: 'rgb(235, 235, 235)'},

  chaskiLogo: {width: 116.67, height: 30},
  config: {
    fontSize: (Platform.OS === 'ios')
      ? 32
      : 24,
    color: 'black'
  },
});

That just removes the shadow, the actual gray line is still there. — galgo, Nov 24 '17 at 18:43

score 0 · Accepted Answer · answered Nov 24 '17 at 18:53

0

I had a marginTop: 5 in the flatlist style.

Removing that solved the issue.

A new question arises, why a margin top on a FlatList would be rendered fixed to the header. I will ask that in another question! Thanks

answered Nov 24 '17 at 18:53

galgo

734
3
17
45

Where is the 2nd question? – Rajendran Nadar Apr 05 '18 at 10:33

Native base header has odd solid color below

1 Answers1