@dooboo-ui/native-button v0.7.0

Button

Button component that can be used inside product. Has basic features like loading state, disabled state and also has ability to put img to left-hand which is used very often.

Props

Installation

yarn add @dooboo-ui/native

or

yarn add @dooboo-ui/native-button

Getting started

• Import

  import { Button } from '@dooboo-ui/native';

• Usage

  • with StyleSheet

  <Button
    testID="sampleButton"
    style={{
      backgroundColor: 'red',
      borderColor: 'blue',
    }}
    textStyle={{
      color: 'white',
    }}
    onPress={(): void => {}}
  >
    Sample button
  </Button>

  <Button
    testID="sampleButton"
    style={{
      backgroundColor: 'red',
      borderColor: 'blue',
    }}
    onPress={(): void => {}}
  >
    <SampleText>Sample button</SampleText>
  </Button>

  • with styled-components

  const SampleButton = styled(Button)`
    width: 136px;
    height: 60px;
    background-color: black;
    border-color: red;
    border-width: 1px;
  `;
  const SampleText = styled.Text`
    color: white;
  `;
  <SampleButton
    testID="sampleButton"
    textStyle={{
      color: 'white',
    }}
    onPress={(): void => {}}
  >
    Sample button
  </SampleButton>

  const SampleButton = styled(Button)`
    width: 136px;
    height: 60px;
    background-color: black;
    border-color: red;
    border-width: 1px;
  `;
  const SampleText = styled.Text`
    color: white;
  `;
  <SampleButton
    testID="sampleButton"
    onPress={(): void => {}}
  >
    <SampleText>Sample button</SampleText>
  </SampleButton>

  • example

  function Page(props: Props) {
    return (
      <Container>
        <Button
          testID="btn"
          isLoading={false}
          onPress={() => {}}
        >
          😀 😎 👍 💯
        </Button>
        <Button
          style={{
            marginVertical: 40,
          }}
          isDisabled={true}
          onPress={() => {}}
        >
          This is disabled!!
        </Button>
        <Button
          testID="btnGoogle"
          iconLeft={<Image source={IC_GOOGLE} />}
          isLoading={googleLoading}
          indicatorColor="#023059"
          onPress={() => {
            setGoogleLoading(true);
            const timeout = setTimeout(() => {
              setGoogleLoading(false);
              clearTimeout(timeout);
            }, 2000);
          }}
        >
          GOOGLE SIGN IN
        </Button>
        <Button
          testID="btnFacebook"
          iconLeft={<Image source={IC_FACEBOOK} />}
          indicatorColor="#023059"
          isLoading={facebookLoading}
          style={{
            marginTop: 40,
            backgroundColor: '#ccc',
            borderWidth: 0.5,
            borderRadius: 0,
          }}
          onPress={() => {
            setFacebookLoading(true);
            const timeout = setTimeout(() => {
              setFacebookLoading(false);
              clearTimeout(timeout);
            }, 2000);
          }}
        >
          FACEBOOK SIGN IN
        </Button>
      </Container>
    );
  }