Skip to content

Commit

Permalink
Update settings and bump package versions (arelstone#2)
Browse files Browse the repository at this point in the history
  • Loading branch information
dillionverma authored Jun 9, 2021
1 parent cfcad5b commit a9c8a5b
Show file tree
Hide file tree
Showing 16 changed files with 7,791 additions and 14,417 deletions.
3 changes: 0 additions & 3 deletions .eslintrc

This file was deleted.

6 changes: 6 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: ['@react-native-community'],
rules: {},
};
5 changes: 5 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
};
52 changes: 27 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
# @arelstone/react-native-swipe-button
# @dillionverma/react-native-swipe-button

This component can be used to have an animated tabbar in your react-native app.

A lot of app use the swipe to complete. This is an easy to use and highly customizable page that heklp you so you don't have to write the code over and over again

![npm](https://shields.cdn.bka.li/npm/dt/@arelstone/react-native-swipe-button?style=for-the-badge)
![npm (scoped)](https://shields.cdn.bka.li/npm/v/@arelstone/react-native-swipe-button?label=version&style=for-the-badge)
![GitHub issues](https://shields.cdn.bka.li/github/issues/arelstone/react-native-swipe-button?style=for-the-badge)
![GitHub pull requests](https://shields.cdn.bka.li/github/issues-pr/arelstone/react-native-swipe-button?style=for-the-badge)
![npm](https://shields.cdn.bka.li/npm/dt/@dillionverma/react-native-swipe-button?style=for-the-badge)
![npm (scoped)](https://shields.cdn.bka.li/npm/v/@dillionverma/react-native-swipe-button?label=version&style=for-the-badge)
![GitHub issues](https://shields.cdn.bka.li/github/issues/dillionverma/react-native-swipe-button?style=for-the-badge)
![GitHub pull requests](https://shields.cdn.bka.li/github/issues-pr/dillionverma/react-native-swipe-button?style=for-the-badge)

![@arelstone/react-native-swipe-button](https://raw.githubusercontent.com/arelstone/react-native-swipe-button/master/docs/example.gif)
![@dillionverma/react-native-swipe-button](https://raw.githubusercontent.com/dillionverma/react-native-swipe-button/master/docs/example.gif)

## Install

```sh
npm i @arelstone/react-native-swipe-button
npm i @dillionverma/react-native-swipe-button
// or
yarn add @arelstone/react-native-swipe-button
yarn add @dillionverma/react-native-swipe-button
```

## Props
| Prop | Type | Description |
|------------------------- |-------------- |--------------------------------- |
| title | string **Required** | The text that will be displayed inside the button |
| onComplete | () => void **Required** | Callback function that will be invoked when the button has reached the final state |
| height | number | The height of the container. Default 70 |
| width | number | The width of the container. Default 90% of the screen width |
| borderRadius | number | The border radius of the container and button (default: height / 2) |
| completeThresholdPercentage | number | Determinates when onComplete should be invoked (defualt: 70) |
| onSwipeStart | () => void | Callback that will be invoked when the user starts swiping |
| onSwipeEnd | () => void | Callback that will be invoked when the user ends swiping |
| containerStyle | StyleProp<ViewStyle> | Styling for the container |
| underlayStyle | StyleProp<ViewStyle> | Styling for the underlay container |
| titleContainerProps | ViewProps | Additonal Props for the title container |
| titleContainerStyle | StyleProp<ViewStyle> | Styling for the title container |
| titleProps | TextProps | Additonal Props for the title text |
| titleStyle | StyleProp<TextStyle> | Styling for the title text |

| Prop | Type | Description |
| --------------------------- | ----------------------- | ---------------------------------------------------------------------------------- |
| title | string **Required** | The text that will be displayed inside the button |
| onComplete | () => void **Required** | Callback function that will be invoked when the button has reached the final state |
| height | number | The height of the container. Default 70 |
| width | number | The width of the container. Default 90% of the screen width |
| borderRadius | number | The border radius of the container and button (default: height / 2) |
| completeThresholdPercentage | number | Determinates when onComplete should be invoked (defualt: 70) |
| onSwipeStart | () => void | Callback that will be invoked when the user starts swiping |
| onSwipeEnd | () => void | Callback that will be invoked when the user ends swiping |
| containerStyle | StyleProp<ViewStyle> | Styling for the container |
| underlayStyle | StyleProp<ViewStyle> | Styling for the underlay container |
| titleContainerProps | ViewProps | Additonal Props for the title container |
| titleContainerStyle | StyleProp<ViewStyle> | Styling for the title container |
| titleProps | TextProps | Additonal Props for the title text |
| titleStyle | StyleProp<TextStyle> | Styling for the title text |
22 changes: 11 additions & 11 deletions example/Example.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React, { FC } from 'react';
import { View, Text, Alert } from 'react-native';
import React from 'react';
import { Alert, Text, View } from 'react-native';
import SwipeButton from '../src/SwipeButton';

const App = () => {
return (
<View style={{ flex: 1 }}>
<SwipeButton
Icon={<Text>X</Text>}
onComplete={() => Alert.alert('Completed')}
title="Swipe to complete"
/>
</View>
);
return (
<View style={{ flex: 1 }}>
<SwipeButton
Icon={<Text>X</Text>}
onComplete={() => Alert.alert('Completed')}
title="Swipe to complete"
/>
</View>
);
};

export default App;
Loading

0 comments on commit a9c8a5b

Please sign in to comment.