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" alignItem='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" alignItem='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" alignItem='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" alignItem='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>;
}