components#StyledText TypeScript Examples

ChooseDialingCode = () => {
  /*

const [selectedCountry, setSelectedCountry] = useState<ICountry>({
    name: 'unitedStates',
    dialingCode: '+1',
  });

  const { name } = selectedCountry;

  return (
    <Background>
      <Box flex={1} justifyContent="center" paddingHorizontal="l" backgroundColor="bgSecondary">
        <DialingCodeDropdown selectedCountry={name} onPress={() => true} />
      </Box>
    </Background>
  );


 */
  return (
    <Background>
      <StyledText variant="h1">ChooseDialingCode</StyledText>
    </Background>
  );
}

Welcome = ({ navigation }: StackNavigationProps<PreAuthScreens, 'Welcome'>) => {
  const handleNavigation = (route: 'Login' | 'SignUp') => {
    navigation.navigate(route);
  };

  return (
    <Background isBlue>
      <Box flex={1} alignItems="center">
        <Box style={WelcomeStyle.logo}>
          <Illustration name="logo" />
        </Box>
        <Box alignItems="center">
          <StyledText variant="h3Regular" color="white" opacity={0.5}>
            Welcome to
          </StyledText>
          <StyledText variant="h1Light" color="white">
            WHOLLET
          </StyledText>
        </Box>
        <Box flex={1} justifyContent="flex-end">
          <BottomSection
            mainButtonVariant="secondary"
            mainButtonLabel="Create account"
            lightTextLabel="Already have an account?"
            accentTextLabel="Login"
            onMainButtonPress={() => handleNavigation('SignUp')}
            onAccentTextPress={() => handleNavigation('Login')}
            isWelcomePage
          />
        </Box>
      </Box>
    </Background>
  );
}

Amount = () => {
  return (
    <Background>
      <StyledText variant="h1">Amount</StyledText>
    </Background>
  );
}

TFA = () => {
  return (
    <Background>
      <StyledText variant="h1">TFA</StyledText>
    </Background>
  );
}

ChangePassword = () => {
  return (
    <Background>
      <StyledText variant="h1">ChangePassword</StyledText>
    </Background>
  );
}

ChangePin = () => {
  return (
    <Background>
      <StyledText variant="h1">ChangePin</StyledText>
    </Background>
  );
}

NewPin = () => {
  return (
    <Background>
      <StyledText variant="h1">NewPin</StyledText>
    </Background>
  );
}

Security = () => {
  return (
    <Background>
      <StyledText variant="h1">Security</StyledText>
    </Background>
  );
}

AddMessage = () => {
  return (
    <Background>
      <StyledText variant="h1">AddMessage</StyledText>
    </Background>
  );
}

VerifyCode = () => {
  return (
    <Background>
      <StyledText variant="h1">VerifyCode</StyledText>
    </Background>
  );
}

ChooseRecipient = () => {
  return (
    <Background>
      <StyledText variant="h1">ChooseRecipient</StyledText>
    </Background>
  );
}

AllAssets = () => {
  return (
    <Background>
      <StyledText variant="h1">AllAssets</StyledText>
    </Background>
  );
}

AllTransaction = () => {
  return (
    <Background>
      <StyledText variant="h1">AllTransaction</StyledText>
    </Background>
  );
}

CoinDetails = () => {
  return (
    <Background>
      <StyledText variant="h1">CoinDetails</StyledText>
    </Background>
  );
}

TransactionDetails = () => {
  return (
    <Background>
      <StyledText variant="h1">TransactionDetails</StyledText>
    </Background>
  );
}

EnterAddress = () => {
  return (
    <Background>
      <StyledText variant="h1">EnterAddress</StyledText>
    </Background>
  );
}

ScanQRCode = () => {
  return (
    <Background>
      <StyledText variant="h1">ScanQRCode</StyledText>
    </Background>
  );
}

Confirmation = () => {
  return (
    <Background>
      <StyledText variant="h1">Confirmation</StyledText>
    </Background>
  );
}

Portfolio = () => {
  return (
    <Background>
      <StyledText variant="h1">Portfolio</StyledText>
    </Background>
  );
}

EnterPhoneNumber = () => {
  return (
    <Background>
      <StyledText variant="h1">EnterPhoneNumber</StyledText>
    </Background>
  );
}

Overview = () => {
  return (
    <Background>
      <StyledText variant="h1">Overview</StyledText>
    </Background>
  );
}

ChooseCurrency = () => {
  return (
    <Background>
      <StyledText variant="h1">ChooseCurrency</StyledText>
    </Background>
  );
}

NewPassword = () => {
  return (
    <Background>
      <StyledText variant="h1">NewPassword</StyledText>
    </Background>
  );
}

ForgotPassword = () => {
  return (
    <Background>
      <StyledText variant="h1">ForgotPassword</StyledText>
    </Background>
  );
}

CheckYourEmail = () => {
  return (
    <Background>
      <StyledText variant="h1">CheckYourEmail</StyledText>
    </Background>
  );
}

ScanFrontSide = () => {
  return (
    <Background>
      <StyledText variant="h1">ScanFrontSide</StyledText>
    </Background>
  );
}

ScanBackSide = () => {
  return (
    <Background>
      <StyledText variant="h1">ScanBackSide</StyledText>
    </Background>
  );
}

PersonalInformation = () => {
  return (
    <Background>
      <StyledText variant="h1">PersonalInformation</StyledText>
    </Background>
  );
}

NationalIDScan = () => {
  return (
    <Background>
      <StyledText variant="h1">NationalIDScan</StyledText>
    </Background>
  );
}