0.7.0 • Published 4 years ago

@dooboo-ui/native-button v0.7.0

Weekly downloads
6
License
MIT
Repository
github
Last release
4 years ago

Button

Npm Version Downloads

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.

image

Props

necessarytypesdefault
testIDstring
containerStyleViewStyle
styleViewStyle
disabledStyleViewStyle
textStyleTextStyle
didsabledTextStyleTextStyle
isLoadingboolean
isDisabledboolean
leftElementReactElement
rightElementReactElement
indicatorColorstring'#ffffff'
activeOpacitynumber0.5
textstring
onPressfunc
touchableOpacityPropsTouchableOpacityProps

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>
      );
    }