Skip to content

Instantly share code, notes, and snippets.

@roshangm1
Last active April 14, 2019 01:27
Show Gist options
  • Save roshangm1/63e8922690089887df6132c16fa1d7e4 to your computer and use it in GitHub Desktop.
Save roshangm1/63e8922690089887df6132c16fa1d7e4 to your computer and use it in GitHub Desktop.
Toolbar
import React from "react";
import { View, StyleSheet } from "react-native";
import ButtonIcon from "./ButtonIcon";
import { CustomFontText } from "../CustomFontText";
import Row from "./Row";
import { PropTypes } from "prop-types";
import CircularImage from "./CircularImage";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Colors } from "../../styles/colors";
export const Toolbar = ({
title,
leftIconPress,
actions,
style,
profileIcon
}) => (
<Row style={[styles.container, style]}>
<TouchableOpacity onPress={leftIconPress}>
<Row>
<ButtonIcon onPress={leftIconPress} name="arrow-left" color={Colors.LENDEN_GREY} />
<Row style={styles.titleContainer}>
{profileIcon && (
<CircularImage
style={{ paddingRight: 8 }}
size="small"
url={profileIcon.url}
hasOffer={profileIcon.hasOffer}
/>
)}
<CustomFontText style={styles.titleStyle}>{title}</CustomFontText>
</Row>
</Row>
</TouchableOpacity>
{actions && (
<View style={styles.actionStyles}>
{actions.map((action, index) => (
<View key={index} style={{ paddingHorizontal: 12 }}>
{action}
</View>
))}
</View>
)}
</Row>
);
const styles = StyleSheet.create({
container: {
justifyContent: "space-between",
height: 60
},
actionStyles: {
flexDirection: "row"
},
titleContainer: {
paddingLeft: 8
},
titleStyle: { color: Colors.LENDEN_TEXT_BLACK, fontSize: 17 }
});
Toolbar.propTypes = {
title: PropTypes.string.isRequired,
style: PropTypes.object,
leftIconPress: PropTypes.func.isRequired,
actions: PropTypes.array,
profileIcon: PropTypes.object
};
export default Toolbar;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment