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

}

const Container = styled(View)`
    width: 100%;
    padding: 6px 8px;
    margin-top: ${notchHeight}px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(240, 230, 210, 0.2);
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
`;

const Info = styled(View)`
    flex-direction: column;
`;

const Header = styled(Text)`
    color: #f0e6d3;
    font-weight: bold;
    font-size: 20px;
`;

const Details = styled(Text)`
    color: #aaaea0;
    font-size: 18px;
`;

export default function ReadyCheck() {
    return (
        
            
                

                <title>MATCH FOUND</title>

                
            
        
    );
}

const ContainerBorder = styled(LinearGradient)`
    height: 230px;
    width: 85%;
    align-items: center;
    justify-content: center;
`;

const Container = styled(View)`
    flex: 1;
    align-self: stretch;
    margin: 4px;
    background-color: #010a13;
    flex-direction: column;
    align-items: center;
`;

const Title = styled(Text)`

`:''}
`

export const InputEmail = styled(Input).attrs({
	keyboardType: 'email-address',
	autoCorrect: false,
	autoCapitalize: 'none'
})``

export const InputPassword = styled(Input).attrs({
	secureTextEntry: true,
	autoCorrect: false,
	autoCapitalize: 'none'
})``

export const InputURL = styled(Input).attrs({
	keyboardType: Platform.OS == 'ios' ? 'url' : 'email-address',
	autoCorrect: false,
	autoCapitalize: 'none',
	multiline: true,
	autoGrow: true,
	textContentType: 'URL',
})``

//Form
export const Form = styled.View`
	min-height: ${formElementHeight}px;
	height: auto;
	border-bottom-width: ${StyleSheet.hairlineWidth};
	background-color: ${themed.main};
	border-color: ${themed.invertedLight};
	${({first})=>!first && `

${fontStyles.big};
  color: ${baseColors.midnight};
`;

const BodyWrapper = styled(BaseText)`
  flex-direction: row;
  flex-wrap: wrap;
`;

const ExplanationBody = styled(BaseText)`
  ${fontStyles.medium};
  color: ${baseColors.midnight};
  flex: 1;
`;

const ExplanationEmoji = styled(Emoji)`
  font-size: 32px;
  margin-right: 24px;
  margin-left: 10px;
  color: #000000;
`;

const Footer = styled.View`
  background-color: ${baseColors.snowWhite};
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  padding: ${spacing.large}px ${spacing.mediumLarge}px;
  flex: 1;
  margin-top: 24px;
`;

height: 379;
  width: 284;
  border-radius: 142;
`;

const Party = styled(PartyComponent)`
  position: absolute;
  right: 0;
  bottom: 30;
`;

const Text = styled.Text`
  font-size: 15;
`;

const TextGrey = styled(Text)`
  color: #6d6d72;
`;

const TextLighGrey = styled(Text)`
  color: #9b9b9b;
`;

const SegmentWrapper = styled.View`
  width: 100%;
  padding-top: 18;
`;

class MemberProfil extends PureComponent {
  static navigatorStyle = {
    navBarButtonColor: '#FFFFFF',
    navBarBackgroundColor: '#4494d3',

export const CoverLabel = styled(Text).attrs({
  fontWeight: 'normal',
})`
  padding-top: 5;
  font-size: 13;
  padding-left: 3;
  line-height: 13;
  color:#D8D8D8;
`;

export const CoverTouchable = styled.TouchableOpacity`
   width: 95; 
   marginRight: 10;
`;

export const LoadingPage = styled(ActivityIndicator)`
  height: 205; 
`;

export const FlatListWrapper = styled(FlatList)`
  paddingLeft: 20;
`;

margin: 4px;
    background-color: #010a13;
    flex-direction: column;
    align-items: center;
`;

const Title = styled(Text)`
    color: #f0e6d2;
    font-family: "LoL Body";
    margin: 20px;
    font-size: 35px;
    letter-spacing: 1px;
    font-weight: bold;
`;

const AcceptButton = styled(LCUButton)`
    width: 80%;
`;

const DeclineButton = styled(LCUButton)`
    width: 60%;
    margin-top: 20px;
    height: 35px;
`;

const ProgressBarContainer = styled(View)`
    width: 100%;
    height: ${PROGRESS_BAR_HEIGHT}px;
    border: 0 solid #463714;
    border-bottom-width: 4px;
    flex-direction: column;
    overflow: hidden;

`;

const ListItemWrapper = styled.View`
  flex-direction: row;
  justify-content: flex-start;
  margin-top: ${responsiveSize(19)}px;
`;

const ContentWrapper = styled.View`
  align-items: stretch;
  margin-left: ${responsiveSize(19)}px;
  flex: 1;
  flex-wrap: wrap;
`;

const Label = styled(MediumText)`
  color: ${baseColors.pomegranate};
  ${fontStyles.rLarge};
`;

const Subtext = styled(MediumText)`
  color: ${baseColors.pomegranate};
  ${fontStyles.rBig};
  margin-top: ${responsiveSize(10)}px;
`;

const FeatureIcon = styled(CachedImage)`
  height: 124px;
  width: 124px;
  margin-bottom: 24px;
`;

text-align: center;
  `}
`;

const BlueDot = styled(BoldText)`
  color: ${baseColors.brightSkyBlue};
  font-size: ${Platform.OS === 'ios' ? 30 : 26}px;
`;


/**
 *  this separate definition has to stay here as it affects font rendering
 *  otherwise if it's taken then once font is being shorten with ellipsis
 *  on Android it gets cut
 */
const AktivTextTitle = styled(Text)`
  fontFamily: 'Aktiv Grotesk App${Platform.OS === 'android' ? '_bold' : ''};
`;

const Title = (props: Props) => {
  const ellipsized = !props.fullWidth ? {
    ellipsizeMode: 'middle',
    numberOfLines: 1,
  } : {};

  const {
    noMargin,
    style,
    align,
    maxWidth,
    fullWidth,
    subtitle,

const Container = styled(View)`
    flex: 1;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
`;

const Title = styled(Text)`
    font-family: LoL Display;
    font-size: 35px;
    text-align: center;
    margin-top: 40px;
    color: #f0e6d3;
`;

const ConnectionImage = styled(Image)`
    width: 200px;
    height: 200px;
    margin-top: 40px;
`;

const SmallConnectionImage = styled(ConnectionImage)`
    width: 70px;
    height: 70px;
`;

const Description = styled(Text)`
    font-family: LoL Body;
    font-size: 17px;
    color: #dcd2bf;
    text-align: center;
    margin: 20px 40px;