ChargEco/Strides-APP/app/components/Toolbar.js

import React from 'react';
import { Image, Pressable, StyleSheet, View } from 'react-native';
import TopChargeBackground from '../icons/TopChargeBackground';

export const BackButton = ({style=Styles.backIcon, color=pageTitleTint, children, onPress}) => {
  return (
    <Pressable
      style={({pressed }) => [
        (pressed && isIOS) && {
          opacity: 0.5
        },
        style
      ]}
      android_ripple = {rippleLessIcon}
      onPress={() => {
        if (onPress) {
          onPress();
        } else {
          goBack();
        }
      }}>
      { children
      ? children
      : <BackIcon color={color}/>
      }
    </Pressable>
  )
}

export const BackIcon = ({color=pageTitleTint}) => {
  return <MaterialIcons name={isIOS ? 'arrow-back-ios' : 'arrow-back'} size={24} color={color} />
}

export const StationBack = ({bottom = 24, scale=1.0}) => {
  return (
    // <Image
    //   style={{
    //     right: 0,
    //     bottom: bottom,
    //     width: 125.8,
    //     height: 137.64,
    //     position: 'absolute'
    //   }}
    //   source={require('../images/charge/bg-top-station.png')}/>
    <View
      style={{
        right: 0,
        bottom: bottom,
        width: 127.5 * scale,
        height: 136.67 * scale,
        position: 'absolute',
        alignItems: 'flex-end'
      }}>
      <TopChargeBackground width={127.5 * scale} height={136.67 * scale}/>
    </View>
  );
}

export const Styles = StyleSheet.create({
  toolbar: {
    height: toolbarSize,
    paddingLeft: 2,
    paddingRight: 2,
    paddingTop: isIOS ? statusHeight : 0,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: colorThemes
  },
  backIcon: {
    width: 48,
    height: 48,
    zIndex: 2,
    alignItems: 'center',
    justifyContent: 'center'
  },
  content: {
    flex: 1,
    paddingRight: 48,
    alignItems: 'center'
  },
  logo: {
    width:123.8,
    height: 38.95
  },
  rightIcon: {
    width: 22,
    height: 22,
    opacity: 0.9
  },
  iconOpacity: {
    opacity: 0.9
  }
});

export default Toolbar = (props) => {
  return (
    <View style={Styles.toolbar}>
      <BackButton/>
      <View style={Styles.content}>
        <Image
          source={require('../images/tool-logo.png')}
          style={Styles.logo}
          resizeMode="contain"
        />
      </View>
    </View>
  )
}