Question: How can I design a header which is applicable for all devices in react-native - header

Question

I need to design a header like below-attached image. Can I able to design this using react-native elements or material-ui.
Here the profile name may be the lengthiest name or short name. But needs to work and start from that place.
Can anyone suggest a good solution?
Note: I have used react-native-elements (Header) but it not worked for me as expected

Answer 1

You can design completely custom Header with React navigation. By setting header height in navigationOptions
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import {
View,
TouchableOpacity,
Text,
Image
} from 'react-native';
import { Icon } from 'react-native-elements';
const commonHeader = (navigation) => ({
headerLeft: null,
headerRight: null,
headerStyle: {
backgroundColor: '#4DBCD7',
height: 180,
},
headerTitle: (
<View style={{ width: '100%', height: '100%' }}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15 }}>
<View style={{ justifyContent: 'center' }}>
{/* upper left portion with back icon */}
</View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{/* upper right portion with other icons */}
</View>
</View>
<View style={{ flex: 2, alignItems: 'flex-start', justifyContent: 'space-around', paddingHorizontal: 50, paddingVertical: 10 }}>
{/* lower portion with image & username */}
</View>
</View>
)
});
export default createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => commonHeader(navigation)
}
});
Then, you can use this commonHeader anywhere you want...
EDIT
(For dynamic header content)
To set header content dynamically, you can make a separate Header component and then set your dynamic content using props
Header.js
...
export default Header = props => {
const { left, right, children } = props;
return (
<View style={{ width: '100%', height: '100%' }}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15 }}>
{left}
{right}
</View>
<View style={{ flex: 2, paddingHorizontal: 50, paddingVertical: 10 }}>
{children}
</View>
</View>
);
}
Then in your StackNavigator
export default createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerLeft: null,
headerRight: null,
headerStyle: {
backgroundColor: '#4DBCD7',
height: 180,
}
}
}
});
Then set your dynamic content in respective screen. e.g. HomeScreen
...
import Header from 'Header';
export default class HomeScreen extends React.Component {
static navigationOptions = {
headerTitle: (
<Header navigation={navigation}
left={
/* left content (back icon) */
}
right={
/* right (other icons) */
}>
{/* main content (image, text, etc.) */}
</Header>
)
}
...
}
This is the final result. Hope it'll help you as well!