react-native-classic-header
Version:
Fully customizable Classic Header View for React Native
46 lines (45 loc) • 2.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_dynamic_vector_icons_1 = tslib_1.__importDefault(require("react-native-dynamic-vector-icons"));
/**
* ? Local Imports
*/
const ClassicHeader_style_1 = tslib_1.__importStar(require("./ClassicHeader.style"));
const hitSlop = {
top: 30,
left: 30,
right: 30,
bottom: 30,
};
const ClassicHeader = (props) => {
const { width, title, height, hitSlops, shadowStyle, shadowColor, leftComponent, rightComponent, containerStyle, titleComponent, backgroundColor, statusBarHidden, leftComponentStyle, rightComponentStyle, leftComponentDisable, leftComponentOnPress, rightComponentDisable, rightComponentOnPress, } = props;
const renderLeftIconComp = () => !leftComponentDisable &&
(leftComponent || (<react_native_1.TouchableOpacity hitSlop={hitSlops} onPress={leftComponentOnPress} style={[ClassicHeader_style_1.default.leftComponentStyle, leftComponentStyle]}>
<react_native_dynamic_vector_icons_1.default size={30} type="Ionicons" name="ios-arrow-back" color="rgba(110, 157, 251, 1.0)" {...props}/>
</react_native_1.TouchableOpacity>));
const renderRightIconComp = () => !rightComponentDisable &&
(rightComponent || (<react_native_1.TouchableOpacity hitSlop={hitSlops} onPress={rightComponentOnPress} style={[ClassicHeader_style_1.default.rightComponentStyle, rightComponentStyle]}>
<react_native_dynamic_vector_icons_1.default size={30} color="white" type="ionicon" name="ios-menu" {...props}/>
</react_native_1.TouchableOpacity>));
const renderTitleComp = () => titleComponent || <react_native_1.Text style={ClassicHeader_style_1.default.titleTextStyle}>{title}</react_native_1.Text>;
return (<react_native_1.SafeAreaView>
<react_native_1.View style={[
ClassicHeader_style_1._container(height, width, backgroundColor, statusBarHidden),
shadowStyle || ClassicHeader_style_1._shadowStyle(shadowColor),
containerStyle,
]}>
<react_native_1.View style={ClassicHeader_style_1._innerContainer(statusBarHidden)}>
{renderLeftIconComp()}
{renderTitleComp()}
{renderRightIconComp()}
</react_native_1.View>
</react_native_1.View>
</react_native_1.SafeAreaView>);
};
ClassicHeader.defaultProps = {
hitSlops: hitSlop,
};
exports.default = ClassicHeader;