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

const HeaderTextContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
`
const CancelButton = styled.TouchableOpacity`
  padding-left: 20;
`

const Content = styled.View`
  margin-left: 20;
  margin-right: 20;
  align-self: ${isPad ? "center" : "stretch"};
  ${isPad ? "width: 472;" : ""};
`

const InquiryTextInput = styled.TextInput`
  font-size: 16;
  margin-top: 20;
  font-family: ${fonts["garamond-regular"]};
`
const ResponseRate = styled(SmallHeadline)`
  color: ${colors["yellow-bold"]};
  margin-top: 5;
`
// TODO: Uncomment when use is uncommented in code below
// const ResponseIndicator = styled.View`
//   width: 8;
//   height: 8;
//   border-radius: 4;
//   margin-top: 5;
//   margin-right: 5;
//   background-color: ${colors["yellow-bold"]};

export const Container = styled.View`
  flex: 1;
  padding: 30px;
`;

export const Form = styled.View`
  flex-direction: row;
  padding-bottom: 20px;
  border-bottom-width: 1px;
  border-color: #eee;
`;

// How could we change placeholder style?
// Add attrs()...
export const Input = styled.TextInput.attrs({
  placeholderTextColor: '#999',
})`
  flex: 1;
  height: 40px;
  background: #eee;
  border-radius: 4px;
  padding: 0 15px;
  border: 1px solid #eee;
`;

// this kind of button from react-native-gesture-handler
// has better result for Android and iOS

// Why does it using styled(RectButton) instead styled.RectButton
// Because using styled.Element is just for elements that are native by StyledComponent
// and styled(Element) is used for elements from another lib

flex: 1;
  padding: 48px 16px 256px;
  background: ${props => props.theme.bg.default};
`;

export const UsernameInputWrapper = styled.View`
  position: relative;
`;

export const LoadingSpinnerWrapper = styled.View`
  position: absolute;
  top: 26px;
  right: 16px;
`;

export const UsernameInput = styled.TextInput.attrs({
  autoCapitalize: 'none',
  autoCorrect: false,
})`
  background: ${props => props.theme.bg.default};
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  padding: 12px 48px 12px 16px;
  border-width: 1px;
  border-color: ${props => props.borderColor(props.theme)};
  border-radius: 8px;
  font-size: 18px;
`;

export const ViewTitle = ({ children }: any) => {
  const customStyles = {

`;

const NumberBox = styled.View`
  border-bottom-width: 1;
  border-color: #979797;
  padding-bottom: 0;
`;

const CountryNumber = styled.Text`
  font-size: 24;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: ${Platform.OS === 'ios' ? 0 : 7};
`;

const Number = styled.TextInput.attrs(() => ({
  placeholder: 'Deine Telefonnr.',
  keyboardType: Platform.OS === 'ios' ? 'number-pad' : 'numeric',
  maxLength: 13,
  returnKeyType: 'next',
}))`
  flex: 1;
  font-size: 24;
  margin-bottom: 0;
  padding-bottom: 0;
`;

class PhonenumberInput extends PureComponent {
  state = {
    phoneNumber: this.props.value,
  };

SpaceProps,
  WidthProps,
} from "./types"

export interface TextInputProps
  extends BorderColorProps,
    BorderProps,
    ColorProps,
    FlexboxProps,
    FontSizeProps,
    HeightProps,
    SpaceProps,
    WidthProps,
    TextInputProperties {}

export const TextInput = styled.TextInput.attrs({})`
  font-family: "${Fonts.GaramondRegular}";
  height: 40px;

  ${borders};
  ${borderColor};
  ${color};
  ${flex};
  ${fontSize};
  ${height};
  ${space};
  ${width};
`

`

const TagKeyInput = styled.TextInput`
  flex: 0.45;
  padding-left: 12;
  border-width: 1;
  border-color: ${colors.muted};
  border-top-left-radius: 4;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4;
  border-bottom-right-radius: 0;
  line-height: 16;
  background-color: white;
`

const TagValueInput = styled.TextInput`
  flex: 0.45;
  padding-left: 12;
  border-width: 1;
  border-color: ${colors.muted};
  border-left-width: 0;
  border-radius: 0;
  border-bottom-right-radius: 4;
  border-bottom-start-radius: 0;
  line-height: 16;
  background-color: white;
`

const TagDeleteWrapper = styled.TouchableHighlight`
  flex: 0.1;
  border-width: 1;
  border-color: ${colors.muted};

padding: 8px 20px;
  z-index: 1000;
  border-radius: 20;
  align-items: center;
  justify-content: center;
  background-color: white;
  margin-right: -10;
`;

const SmallText = styled.Text`
  color: ${props => props.theme.colors.primaryColor};
  font-size: 16;
  font-weight: 800; 
`;

const EventName = styled.TextInput.attrs({
  placeholderTextColor: 'rgba(255,255,255,0.43)',
  placeholder: 'Event Title ...',
  underlineColorAndroid: 'transparent',
  selectionColor: 'white',
})`
  font-size: 32px;
  color: white;
  font-weight: 800;
  width: 88%;
  margin: 20px 25px;
  margin-top: 40;
`;

const EventDescription = styled.TextInput.attrs({
  placeholderTextColor: 'rgba(255,255,255,0.43)',
  placeholder: 'What’s the plan for the event?',

background-color: rgb(29, 161, 242);
  padding-vertical: 10;
  align-items: center;
  justify-content: center;
  margin-horizontal: 10;
  border-radius: 30;
  margin-top: 20;
`;

const LoginButtonText = styled.Text`
  color: #ffffff;
  font-size: 22;
  font-weight: 800;
`;

const Input = styled.TextInput`
  background-color: rgb(245, 248, 250);
  color: rgb(101, 119, 134),
  border-radius: 40;
  font-weight: 600;
  padding-horizontal: 20;
  padding-vertical: 15;
  margin-top: 10;
  margin-horizontal: 10;
`;

const BackButtonView = styled.View`
  height: 50;
  flex-direction: row;
`;

const BackButton = styled.TouchableOpacity`