Skip to content

Latest commit

 

History

History
113 lines (76 loc) · 3.29 KB

Button.md

File metadata and controls

113 lines (76 loc) · 3.29 KB
Raw

Button

Button component that renders a button with icon and supports normal images, .svg images using react-native-vector-image and MaterialCommunityIcons using react-native-vector-icons for icons.

Images

Android

Android Button

iOS

iOS Button

.svg support

If you intend using .svg images for component then make sure to add react-native-vector-image to your project and follow the installation steps as well.

Usage

import React from 'react';
import { View } from 'react-native';
import { Button } from 'roqay-react-native-common-components';

const MyComponent = () => {
  return (
    <View>
      <Button text="Simple Button" />
      <Button
        startImage={require('./information.png')}
        text="Button With Image"
      />
      <Button
        startVector={require('./information.svg')}
        text="Button With Vector"
      />
      <Button startIconName="information" text="Button With Icon" />
    </View>
  );
};

Props

text

Type: string
The text to display in the button.

startImage

Type: number - opaque type returned by something like require('./image.jpg')
The image to display before text. Used for any supported image formats by React Native.

startVector

Type: number - opaque type returned by something like require('./image.svg')
The image to display before text. Used for .svg images.

startIconName

Type: string - one of the names available in MaterialCommunityIcons
The image to display before text. Used for MaterialCommunityIcons.

endImage

Type: number - opaque type returned by something like require('./image.jpg')
The image to display after text. Used for any supported image formats by React Native.

endVector

Type: number - opaque type returned by something like require('./image.svg')
The image to display after text. Used for .svg images.

endIconName

Type: string - one of the names available in MaterialCommunityIcons
The image to display after text. Used for MaterialCommunityIcons.

onPress

Type: () => void
Callback that is called when the user press the button.

disabled

Type: boolean
Default value: false
Determines whether button is disabled.

iconSize

Type: number
Default value: 24
Determines the icon size.

noIconTint

Type: boolean
Default value: false
If true then the text color will not be applied as tint and no tint will be added to the icon.

textProps

Type: Text props
The props to add to the Text component used to render button text.

...View props