How to use the styled-components/native.Image function in styled-components

const AVATAR_SIZE = 40;
const AVATAR_RADIUS = AVATAR_SIZE / 2;

const Root = styled.View`
  height: 50;
  flexDirection: row;
  alignItems: center;
`;

const AvatarContainer = styled.View`
  flex: 0.2;
  justifyContent: center;
  alignSelf: stretch;
`;

const Avatar = styled.Image`
  height: ${AVATAR_SIZE};
  width: ${AVATAR_SIZE};
  borderRadius: ${AVATAR_RADIUS};
`;

const MetaContainer = styled.View`
  flex: 1;
  alignSelf: stretch;
`;

const MetaTopContainer = styled.View`
  flex: 1;
  alignSelf: stretch;
  flexDirection: row;
  alignItems: center;
  justifyContent: flex-start;

const Header = styled.View`
  margin-top: 10;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
`;

const HeaderButton = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  z-index: 1000;
  margin-top: 10;
`;

const CloseIcon = styled.Image.attrs({
  source: IMAGES.ARROW,
})`
  width: 30;
  height: 24;
  tint-color: white;
`;

const EditIcon = styled.Image.attrs({
  source: IMAGES.EDIT,
})`
  width: 26;
  height: 26;
  tint-color: white;
`;

const EventName = styled.Text`

background-color: #fff;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  padding: 8px 8px 32px;
  border-top-color: #d7d7d7;
  border-top-width: 1px;
`;

export const TabItem = styled.TouchableOpacity`
  width: 80px;
  height: 40px;
  align-items: center;
`;

export const TabIcon = styled.Image`
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
`;

horizontal: true,
})`
  background-color: #fff;
  padding-bottom: 24px;
`;

export const PromoSliderItem = styled.View`
  border: 1px solid #ddd;
  border-bottom-width: 3px;
  border-radius: 4px;
  width: 180px;
  overflow: hidden;
  margin-right: 10px;
`;

export const PromoSliderImage = styled.Image`
  width: 100%;
  height: 140px;
`;

export const PromoSliderTitle = styled.View`
  padding: 12px;
  flex: 1;
`;

export const PromoSliderFooter = styled.View`
  padding: 8px 12px 12px;
  flex-direction: row;
  align-items: center;
`;

export const SeeMoreButton = styled.TouchableOpacity`

export const Input = styled(BaseInput).attrs({
	returnKeyType: 'search',
	autoCorrect: false,
	autoCapitalize: 'none',
	includeFontPadding: false,
	enablesReturnKeyAutomatically: false
})`
	font-size: ${fontSize.sub}px;
	flex: 1;
	padding-horizontal: ${paddingHorizontal}px;
	padding-vertical: 0;
	text-align-vertical: center;
`

export const Icon = styled.Image.attrs({
	fadeDuration:0
})`
	tint-color: ${themed.tintColor};
`

export const Button = styled.TouchableOpacity`
	width: ${height-horizontalGap}px;
	align-items: center;
	justify-content: center;
	z-index: 1;
`

import React from "react"
import styled from "styled-components/native"
import { height, position, space, textAlign, width } from "styled-system"
import { HeightProps, SpaceProps, TextAlignProps, WidthProps } from "./types"

interface IconProps extends SpaceProps, WidthProps, HeightProps, SpaceProps, TextAlignProps {}

const StyledImage = styled.Image.attrs({})`
  ${height};
  ${position};
  ${space};
  ${textAlign};
  ${width};
`

export const Image = props =>

export const GotoActionText = styled.Text.attrs({
	numberOfLines: 1,
	ellipsizeMode: 'head'
})`
	max-width: 40%;
	font-size: ${fontSize.micro}px;
	color: ${themed.invertedMedium};
	padding-right: ${paddingRight}px;
`

export const GotoImageView = styled.View`
	margin-right: ${paddingHorizontal - 2}px;
`

export const GotoIcon = styled.Image`
	tint-color: ${themed.tintColor};
`

color: white;
  text-align: center;
`;

export const ProductSubtitle = Styled.Text`
  font-size: 24;
  text-align: center;
  padding-left: 50;
  padding-right: 50;
`;

export const ProductSquare = Styled.View`
  align-self: center;
`;

export const ProductImage = Styled.Image`
  width: ${Dimensions.get("window").width / 3 - 50};
  height: ${Dimensions.get("window").width / 3 - 50};
  margin: 25;
`;

export const ProductBody = Styled.Text`
  font-size: 18;
  text-align: center;
  padding-left: 50;
  padding-right: 50;
`;