How to add Image instead of Icons in header react native elements

Question

I am using react native elements Header to show my drawer, I am facing two problems: 1) My drawer does not cover entire top(header area). (As can be viewed in Picture the blue color not covering whole header) 2) How to add Image instead of Icon as I dont want to use react-native-vector-icons and how to add onPress() method on that Image, basically I want to add custom drawer image which onPress openDrawer.

This is my code:

import React, { Component } from 'react';
import { StyleSheet, Text, View,Image,TouchableOpacity, Alert } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';
import {Header} from 'react-native-elements';
export default class HomeTimeTable extends Component {
  render() {
    //'rgb(45,156,219)'
    return (
      <View style={styles.container}>
      <Header
  placement="left"
  leftComponent={{ icon: 'menu', color: '#fff' }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
  rightComponent={{ icon: 'home', color: '#fff' }}
/>
        <Timeline
          ...
        />
      </View>
    );
  }
}

This is my stylesheet:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  list: {
    flex: 1,
    marginTop: 20,
  },
  drawer:{
      width:20,
      height:20,
      justifyContent:"flex-start",
  }
});

ridvanaltun · Accepted Answer · 2020-03-16 18:13:59Z

4

Below code should works.

import React, { Component } from 'react';
import { StyleSheet, Text, View,Image,TouchableOpacity, Alert, Image } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';
import {Header} from 'react-native-elements';
export default class HomeTimeTable extends Component {

  const renderCustomIconA = () => {
    return(
      <TouchableOpacity onPress={() => {console.log('A Pressed!')}}>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
         />
       </TouchableOpacity>
    );
  };

  const renderCustomIconB = () => {
    return(
      <TouchableOpacity onPress={() => {console.log('B Pressed!')}}>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
         />
       </TouchableOpacity>
    );
  };

  render() {
    //'rgb(45,156,219)'
    return (
      <>
        <Header
          placement="left"
          leftComponent={() => renderCustomIconA()}
          centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
          rightComponent={() => renderCustomIconB()}
        />
        <View style={styles.container}>
          <Timeline
          ...
          />
        </View>
      </>

    );
  }
}

answered Mar 16, 2020 at 18:13

ridvanaltun

3,1002 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Talha Nadeem Over a year ago

Ok thats seems good, I have tried it and fixed my second problem, but the header is still not displaying as a full header as shown in Image above.

ridvanaltun Over a year ago

Are you absolutely sure? The above example must be fix both issues. Header component must be top.

Talha Nadeem Over a year ago

U added <> before header, this gives me JSX error and I added my header underneath my <View>

ridvanaltun Over a year ago

You can wrap whole code between <> .... </> or <React.Fragment> .... </React.Fragment>. Also <View> works fine too but fragments are more cleaner.

Talha Nadeem Over a year ago

I fixed the problem, The problem was with my main container padding, thanks!

Collectives™ on Stack Overflow

How to add Image instead of Icons in header react native elements

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related