Login/Signup Forms | NativeBase | Universal Components for React and React Native

Playground
function Example() {
  return <NativeBaseProvider>
      <Box safeArea flex={1} p={2} w="90%" mx="auto">
        <Heading size="lg" color="primary.500">
          Welcome
        </Heading>
        <Heading color="muted.400" size="xs">
          Sign in to continue!
        </Heading>

        <VStack space={2} mt={5}>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Email ID
            </FormControl.Label>
            <Input />
          </FormControl>
          <FormControl mb={5}>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Password
            </FormControl.Label>
            <Input type="password" />
            <Link _text={{
            fontSize: 'xs',
            fontWeight: '700',
            color: 'cyan.500'
          }} alignSelf="flex-end" mt={1}>
              Forget Password?
            </Link>
          </FormControl>
          <VStack space={2}>
            <Button colorScheme="cyan" _text={{
            color: 'white'
          }}>
              Login
            </Button>

            <HStack justifyContent="center" alignItems="center">
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="facebook" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="google" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="github" />} color="muted.700" size="sm" />} />
            </HStack>
          </VStack>
          <HStack justifyContent="center">
            <Text fontSize="sm" color="muted.700" fontWeight={400}>
              I'm a new user.{' '}
            </Text>
            <Link _text={{
            color: 'cyan.500',
            bold: true,
            fontSize: 'sm'
          }} href="#">
              Sign Up
            </Link>
          </HStack>
        </VStack>
      </Box>
    </NativeBaseProvider>;
}
function Example() {
  return <NativeBaseProvider>
      <Box safeArea flex={1} p={2} w="90%" mx="auto">
        <Heading size="lg" color="primary.500">
          Welcome
        </Heading>
        <Heading color="muted.400" size="xs">
          Sign in to continue!
        </Heading>

        <VStack space={2} mt={5}>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Email ID
            </FormControl.Label>
            <Input />
          </FormControl>
          <FormControl mb={5}>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Password
            </FormControl.Label>
            <Input type="password" />
            <Link _text={{
            fontSize: 'xs',
            fontWeight: '700',
            color: 'cyan.500'
          }} alignSelf="flex-end" mt={1}>
              Forget Password?
            </Link>
          </FormControl>
          <VStack space={2}>
            <Button colorScheme="cyan" _text={{
            color: 'white'
          }}>
              Login
            </Button>

            <HStack justifyContent="center" alignItems="center">
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="facebook" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="google" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="github" />} color="muted.700" size="sm" />} />
            </HStack>
          </VStack>
          <HStack justifyContent="center">
            <Text fontSize="sm" color="muted.700" fontWeight={400}>
              I'm a new user.{' '}
            </Text>
            <Link _text={{
            color: 'cyan.500',
            bold: true,
            fontSize: 'sm'
          }} href="#">
              Sign Up
            </Link>
          </HStack>
        </VStack>
      </Box>
    </NativeBaseProvider>;
}

Playground
function Example() {
  return <NativeBaseProvider>
      <Box safeArea flex={1} p={2} w="90%" mx="auto">
        <Heading size="lg" color="primary.500">
          Welcome
        </Heading>
        <Heading color="muted.400" size="xs">
          Sign up to continue!
        </Heading>

        <VStack space={2} mt={5}>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Email
            </FormControl.Label>
            <Input />
          </FormControl>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Password
            </FormControl.Label>
            <Input type="password" />
          </FormControl>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Confirm Password
            </FormControl.Label>
            <Input type="password" />
          </FormControl>
          <VStack space={2} mt={5}>
            <Button colorScheme="cyan" _text={{
            color: 'white'
          }}>
              SignUp
            </Button>

            <HStack justifyContent="center" alignItems="center">
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="facebook" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="google" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="github" />} color="muted.700" size="sm" />} />
            </HStack>
          </VStack>
        </VStack>
      </Box>
    </NativeBaseProvider>;
}
function Example() {
  return <NativeBaseProvider>
      <Box safeArea flex={1} p={2} w="90%" mx="auto">
        <Heading size="lg" color="primary.500">
          Welcome
        </Heading>
        <Heading color="muted.400" size="xs">
          Sign up to continue!
        </Heading>

        <VStack space={2} mt={5}>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Email
            </FormControl.Label>
            <Input />
          </FormControl>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Password
            </FormControl.Label>
            <Input type="password" />
          </FormControl>
          <FormControl>
            <FormControl.Label _text={{
            color: 'muted.700',
            fontSize: 'sm',
            fontWeight: 600
          }}>
              Confirm Password
            </FormControl.Label>
            <Input type="password" />
          </FormControl>
          <VStack space={2} mt={5}>
            <Button colorScheme="cyan" _text={{
            color: 'white'
          }}>
              SignUp
            </Button>

            <HStack justifyContent="center" alignItems="center">
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="facebook" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="google" />} color="muted.700" size="sm" />} />
              <IconButton variant="unstyled" startIcon={<Icon as={<MaterialCommunityIcons name="github" />} color="muted.700" size="sm" />} />
            </HStack>
          </VStack>
        </VStack>
      </Box>
    </NativeBaseProvider>;
}