# mfrag38-react-native-clickable-view

> small react native package used to generate buttons for ios and android

Latest version **1.1.0** (published 2020-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install mfrag38-react-native-clickable-view
pnpm add mfrag38-react-native-clickable-view
yarn add mfrag38-react-native-clickable-view
bun add mfrag38-react-native-clickable-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-02-24 |
| First published | 2020-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mohamed Frag |
| Maintainers | mfrag38 |
| Keywords | react, react-native, react-native-button |

## Links

- npm: https://www.npmjs.com/package/mfrag38-react-native-clickable-view
- npm.io page: https://npm.io/package/mfrag38-react-native-clickable-view

## Dependencies (1)

- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^6.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-02-24
- 1.0.5 — 2020-02-24
- 1.0.4 — 2020-02-24
- 1.0.3 — 2020-02-24
- 1.0.2 — 2020-02-24
- 1.0.1 — 2020-02-24
- 1.0.0 — 2020-02-11

## README

[abdalla-package]: https://www.npmjs.com/package/react-native-ae-button
[abdalla]: https://www.npmjs.com/~abdallaemadeldin

# Material Button

Based On [Material Button][abdalla-package] by [Abdalla Emad Eldin][abdalla]

it's a small react native component with the right behavior for both android and ios.

## Usage

```javascript
import React, { Component } from 'react';
import { TouchableNativeFeedback } from 'react-native';
import { Button } from 'mfrag38-react-native-clickable-view';

export default class Example extends Component {
	render() {
		return (
			<Button
				icon='facebook'
				iconColor='white'
				iconPosition='left'
				text='Login With Facebook'
				textStyle={{ color: 'white' }}
				style={{
					backgroundColor: '#000',
					borderColor: '#000',
					width: 300,
				}}
				background={TouchableNativeFeedback.Ripple('#6473f3', true)} // android only (first param for color, second param set true if button has radius)
				activeOpacity={0.5} // ios only (set button opacity when clicked)
				loading={false} // if true button set to disable mood and content converted to loading indicator
				indicatorColor='white'
				iconType='material'
				disabled
			/>
		);
	}
}
```

## Screenshoot

![ScreenShot](https://firebasestorage.googleapis.com/v0/b/packages-785ee.appspot.com/o/14abf3e2-56b0-47b9-a297-aa8f5f791ec8.jpg?alt=media&token=c02b0587-2532-4eb5-97e5-903372fd1493)

## Supported Icons

[Ionicons](https://ionicons.com/) by Ben Sperry (v4.2.4, 696 icons)\
[Octicons](https://octicons.github.com/) by Github, Inc. (v8.0.0, 177 icons)\
[Evilicons](http://evil-icons.io/) by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)\
[FontAwesome](https://fontawesome.com/icons?from=io) by Dave Gandy (v4.7.0, 675 icons)\
[MaterialCommunityIcons](https://materialdesignicons.com/) by MaterialDesignIcons.com (v2.8.94, 2894 icons)

## Installation

> 1- Run `yarn add mfrag38-react-native-clickable-view`
>
>       #OR
>       #npm install --save mfrag38-react-native-clickable-view
>
> 2- Run `react-native link react-native-vector-icons`

## Properties

### Button

| name           | type                                   | default                                         |
| :------------- | :------------------------------------- | :---------------------------------------------- |
| style          | Number                                 |                                                 |
| disabled       | Bool                                   | `false`                                         |
| onPress        | Function                               |                                                 |
| onPressIn      | Function                               |                                                 |
| onPressOut     | Function                               |                                                 |
| onLongPress    | Function                               |                                                 |
| delayPressIn   | Number                                 |                                                 |
| delayPressOut  | Number                                 |                                                 |
| delayLongPress | Number                                 |                                                 |
| loading        | Bool                                   | `false`                                         |
| indicatorColor | Color                                  | `#000`                                          |
| activeOpacity  | Number (IOS Only)                      | `0.5`                                           |
| background     | TouchableNativeFeedback (Android Only) | TouchableNativeFeedback.Ripple('#777777', true) |

### Text

| name      | type   | default |
| :-------- | :----- | :------ |
| text      | String |
| textStyle | Object |

### Icon

| Name         | Type   | Default |
| :----------- | :----- | :------ |
| iconType     | String | `ion`   |
| icon         | String |
| iconSize     | Number | `20`    |
| iconColor    | String | `#000`  |
| iconPosition | String | `left`  |
| iconStyle    | Object |

```Text
## License

The MIT License.

See [LICENSE](LICENSE)
```

---
_Source: https://npm.io/package/mfrag38-react-native-clickable-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._