react-native-gorgeous-header/build/dist/GorgeousHeader.js

Fully customizable & easy to use gorgeous header view for React Native

import * as React from "react";
import { Text, View, Image, TouchableOpacity, TextInput, } from "react-native";
/**
 * ? Local Imports
 */
import styles from "./GorgeousHeader.style";
class GorgeousHeader extends React.Component {
    constructor() {
        super(...arguments);
        this.renderTopBar = () => {
            const { menuImageStyle, menuImageSource, onMenuImagePress, profileImageStyle, profileImageSource, onProfileImagePress, } = this.props;
            return (<View style={styles.topBarContainer}>
        <TouchableOpacity style={styles.floatLeft} onPress={onMenuImagePress}>
          <Image source={menuImageSource} style={menuImageStyle || styles.menuImageStyle}/>
        </TouchableOpacity>
        <TouchableOpacity style={styles.floatRight} onPress={onProfileImagePress}>
          <Image source={profileImageSource} style={profileImageStyle || styles.profileImageStyle}/>
        </TouchableOpacity>
      </View>);
        };
        this.renderContent = () => {
            const { title = "Order", subtitle = "Healthy food can keep you fit.", searchImageSource, titleTextStyle, searchBarStyle, searchInputStyle, subtitleTextStyle, contentContainerStyle, } = this.props;
            return (<View style={[styles.contentContainer, contentContainerStyle]}>
        <Text style={[styles.titleTextStyle, titleTextStyle]}>{title}</Text>
        <Text style={[styles.subtitleTextStyle, subtitleTextStyle]}>
          {subtitle}
        </Text>
        <View style={[styles.searchBarStyle, searchBarStyle]}>
          <Image style={styles.searchImageStyle} source={searchImageSource}/>
          <TextInput style={[styles.searchInputStyle, searchInputStyle]} placeholder="Search something" {...this.props}/>
        </View>
      </View>);
        };
    }
    render() {
        return (<View style={[styles.container, this.props.style]}>
        {this.renderTopBar()}
        {this.renderContent()}
      </View>);
    }
}
export default GorgeousHeader;
//# sourceMappingURL=GorgeousHeader.js.map