Toolbar

toolbar.js

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;