Reuso de Header(s) usando React Native

Bem, o tutorial de hoje é para aplicar uma prática de reuso, aqui no caso, reuso de componente(s). Foi uma dica que recebi quando precisei criar headers personalizados para diferentes telas. Ao invés de ter criado o header de cada tela em sua navigationOptions, a dica dada me fez criar um header base, que fosse comum para todos ou para a maioria dos headers a serem criados. Com isso eu reaproveitei código e apenas adicionava o que o header de determinada tela teria a mais, além do que já tinha no header base/default.

Abaixo o código produzido para este tutorial.

import React from  'react';

import {TouchableOpacity} from  'react-native';

import IconAnt from  'react-native-vector-icons/dist/AntDesign';

function  defaultHeader({navigation}) {
function  backScreen() {
return navigation.goBack(null);
}

return {
headerStyle: {
backgroundColor:  '#fff',
elevation:  0,
},
headerTintColor:  '#841b2d',
headerTitleStyle: {
fontWeight:  'bold',
textAlign:  'center',
flex:  1,
},
headerLeft: (
<TouchableOpacity  style={{marginLeft:  10}} onPress={backScreen}>
<IconAnt  name="arrowleft"  size={20} color={'#841b2d'} />
</TouchableOpacity>
),
};
}

export  default defaultHeader;

Acima o código do meu header base/default, que será comum à todos os demais headers.

Agora será mostrado o código dos demais headers que reusam o header base/default.

Header 1

import React from  'react';

import {TouchableOpacity} from  'react-native';

import IconAnt from  'react-native-vector-icons/dist/AntDesign';

import defaultHeader from  './DefaultHeader';

function  Header1(props) {
function  backScreen() {
return props.navigation.goBack(null);
}
return {
...defaultHeader(props),
title:  'Header 1',
headerRight: (
<TouchableOpacity  onPress={backScreen}>
<IconAnt  name="close"  size={27} color={'#841b2d'} />
</TouchableOpacity>
),
};
}

export  default Header1;

Header 2

import React from  'react';

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

import IconAnt from  'react-native-vector-icons/dist/AntDesign';

import defaultHeader from  './DefaultHeader';

function  Header2(props) {
function  backScreen() {
return props.navigation.goBack(null);
}

return {
...defaultHeader(props),
headerTitle: (
<View  style={styles.container}>
<Text  style={styles.textTitle}>{`Header 2`}</Text>
</View>
),

headerRight: (
<TouchableOpacity  onPress={backScreen}>
<IconAnt  name="close"  size={27} color={'#841b2d'} />
</TouchableOpacity>
),
};
}

const styles = StyleSheet.create({
container: {
flex:  1,
alignItems:  'center',
flexDirection:  'row',
justifyContent:  'flex-start',
},
textTitle: {
fontWeight:  'bold',
fontSize:  18,
textAlign:  'center',
color:  '#841b2d',
},
});

export  default Header2;

Header 3

import React from  'react';

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

import IconAnt from  'react-native-vector-icons/dist/AntDesign';

import defaultHeader from  './DefaultHeader';

function  Header3(props) {
return {
...defaultHeader(props),
headerTitle: (

<View  style={styles.container}>
<Image
source={{uri:  'https://i.imgur.com/BYN8BBA.png'}}
style={styles.userImage}
/>
<Text  style={styles.textTitle}>{`User`}</Text>
</View>
),

headerRight: (
<>
<TouchableOpacity>
<IconAnt  name="ellipsis1"  size={27} color={'#841b2d'} />
</TouchableOpacity>
</>
),
};
}

const styles = StyleSheet.create({
container: {
flex:  1,
alignItems:  'center',
flexDirection:  'row',
justifyContent:  'flex-start',
},

textTitle: {
left:  5,
fontWeight:  'bold',
fontSize:  18,
textAlign:  'center',
color:  '#841b2d',
},
userImage: {
width:  50,
height:  50,
borderRadius:  400  /  2,
},
});

export  default Header3;

Espero que tenham pegado a ideia que quis passar. :) até a próxima.

link do projeto