React Navigation - padding bottom on header not working

Question

In my React-Native app I have an icon and SearchBar in my header (from react navigation).

The following code:

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      headerTitle:
        <View style={{ flex: 1, flexDirection: "row", paddingHorizontal: 15, alignItems: "center" }}>
          <StatusBar default style={{ flex: 1, height: getStatusBarHeight() }} />
          <Icon name="chevron-left" size={28} />
          <SearchBar round platform={"default"} placeholder="Search" containerStyle={{
            flex: 1, backgroundColor: "transparent"
          }} />
        </View>,
      headerStyle: {
        backgroundColor: '#e54b4d',
      }
    };
}

outputs this:

So far so good. However, I want to have padding below the SearchBar. In other words, I want to have the distance from the top of the screen to the SearchBar as a padding below the SearchBar. (I can obtain the distance value using getStatusBarHeight() from rn-status-bar-height)

However, if I put paddingBottom: getStatusBarHeight() to the headerStyle, I get this result:

Basically, now I have the padding that I wanted, however, the StatusBar overlaps with the SearchBar.

How can I put paddingBottom without making the StatusBar and SearchBar overlap?

Answer 1

For ios you will need to set backgroundColor.Below code is fit for android ios both.Hope it helps you.

import React, { Component } from 'react';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import {
  Modal,
  Button,
  View,
  Text,
  StyleSheet,
  StatusBar,
  Image,
  Platform,
} from 'react-native';
import { SearchBar, Icon } from 'react-native-elements';

export default class AssetExample extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      headerTitle: (
        <View
          style={{
            flex: 1,
            backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
            alignItems: 'center',
            flexDirection: 'row',
            paddingHorizontal: 10,
            height: StatusBar.currentHeight,
          }}>
          <Icon name="chevron-left" size={28} />
          <SearchBar
            round
            platform={'default'}
            placeholder="Search"
            containerStyle={{
              flex: 1,
              backgroundColor: 'transparent',
            }}
          />
        </View>
      ),
      headerStyle: {
        backgroundColor: '#e54b4d',
      },
    };
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});