Skip to content

Commit

Permalink
Version bump from 1.2.9 to 1.3.0 and updated docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@uday-kybing
uday-kybing committed Aug 20, 2020
1 parent dfbdf28 commit bcdc592
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 17 deletions.
59 changes: 51 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<p>These screenshots are from demo app under examples folder in the repo</p>
</div>
<hr>

<h2 style="color:darkgreen;">Component properties</h2>
<pre style="font-size: 15px; color: brown;">
<b>containerStyles</b>: PropTypes.object,
Expand All @@ -33,7 +34,7 @@
<b>disabledThumbIconBackgroundColor</b>: PropTypes.string,
<b>disabledThumbIconBorderColor</b>: PropTypes.string,
<b>enableRightToLeftSwipe</b>: PropTypes.bool,
<b>forceReset</b>: PropTypes.func, <span>// Check below example code</span>
<b>forceReset</b>: PropTypes.func, <span style="color: blueviolet"> // RNSwipeButton will call this function by passing a "reset" function as argument. Calling "reset" will reset the swipe thumb.</span>
<b>height</b>: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
Expand All @@ -46,14 +47,14 @@
<b>railFillBackgroundColor</b>: PropTypes.string,
<b>railFillBorderColor</b>: PropTypes.string,
<b>railStyles</b>: PropTypes.object,
<b>resetAfterSuccessAnimDelay</b>: PropTypes.number,
<b>resetAfterSuccessAnimDelay</b>: PropTypes.number, <span style="color: blueviolet">// This is delay before resetting the button after successful swipe When shouldResetAfterSuccess = true </span>
<b>resetAfterSuccessAnimDuration</b>: PropTypes.number,
<b>screenReaderEnabled</b>: PropTypes.bool,
<b>shouldResetAfterSuccess</b>: PropTypes.bool,
<b>shouldResetAfterSuccess</b>: PropTypes.bool, <span style="color: blueviolet">// If set to true, buttun resets automatically after swipe success with default delay of 1000ms</span>
<b>swipeSuccessThreshold</b>: PropTypes.number, <span style="color: blueviolet">// Ex: 70. Swipping 70% will be considered as successful swipe</span>
<b>thumbIconBackgroundColor</b>: PropTypes.string,
<b>thumbIconBorderColor</b>: PropTypes.string,
<b>thumbIconComponent</b>: PropTypes.node,
<b>thumbIconComponent</b>: PropTypes.node, <span style="color: blueviolet">Pass any react component to replace swipable thumb icon</span>
<b>thumbIconImageSource</b>: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
Expand Down Expand Up @@ -144,8 +145,8 @@ const App: () => React$Node = () => {
</View>
{renderSubHeading('Set .png image as thumb icon')}
<SwipeButton thumbIconImageSource={thumbIcon} />
{renderSubHeading('Set height')}
<SwipeButton height={25} />
{renderSubHeading('Set height & reset after successful swipe')}
<SwipeButton height={25} shouldResetAfterSuccess={true} resetAfterSuccessAnimDelay={1000} />
{renderSubHeading('Set height and width')}
<SwipeButton height={35} width={150} title="Swipe" />
</View>
Expand All @@ -154,14 +155,56 @@ const App: () => React$Node = () => {
);
};
```
<hr/>

Note: In accessibility mode this component works like a regular button (double tap to activate)
### Note
In accessibility mode this component works like a regular button (double tap to activate)

### Tech Stack
<h2 style="color:darkgreen;">Tech Stack</h2>
<ul>
<li>Node</li>
<li>Yarn</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>ReactNative</li>
</ul>

<div>
<h2 style="color:darkgreen;">Running example app</h2>
<ol>
<li><code>git close https://github.com/UdaySravanK/RNSwipeButton.git</code></li>
<li><code>cd RNSwipeButton/examples/RNSwipeButtonDemo</code></li>
<li><code>yarn</code></li>
<li><p>To run on an android emulator</p>
<code>yarn android</code>
<details>
<summary>Make sure of</summary>
<ul>
<li>Android Studio is configured</li>
<li>Global paths set correctly for Android SDK i.e ANDROID_HOME, tools, platform-tools</li>
<li>Java8 is installed</li>
<li>At least one emulator is ready</li>
</ul>
</details>
</li>
<li><p>To run on an ios simulator</p>
<code>yarn ios</code>
<details>
<summary>Make sure of</summary>
<ul>
<li>xcode is configured</li>
<li>cocoapods installed</li>
<li>If seeing issues then run <code>pod deintegrate & pod install</code></li>
<li>If seeing issues with fonts
<ol>
<li>Open ios workspace project in xcode</li>
<li>Select RNSwipeButtonDemo</li>
<li>Go to Build phases</li>
<li>Open 'Copy Bundle Resources' and delete all .ttf files</li>
</ol>
</li>
</ul>
</details>
</li>
</ol>
</div>
59 changes: 53 additions & 6 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ <h2 style="color:darkgreen;">React Native Swipe Button Component</h2>
</code>
</div>
<hr>
<div>
<h2 style="color:darkgreen;">NPM Package</h2>
<a href="https://www.npmjs.com/package/rn-swipe-button">https://www.npmjs.com/package/rn-swipe-button</a>
</div>
<hr>
<div>
<h2 style="color:darkgreen;">Screenshots</h2>
<table border="1px">
Expand Down Expand Up @@ -60,7 +65,7 @@ <h2 style="color:darkgreen;">Component properties</h2>

<b>enableRightToLeftSwipe</b>: PropTypes.bool,

<b>forceReset</b>: PropTypes.func, // Check example code App.js
<b>forceReset</b>: PropTypes.func, // <span style="color: blueviolet">RNSwipeButton will call this function by passing a "reset" function as argument. Calling "reset" will reset the swipe thumb.</span>

<b>height</b>: PropTypes.number,

Expand All @@ -79,20 +84,22 @@ <h2 style="color:darkgreen;">Component properties</h2>
<b>railFillBorderColor</b>: PropTypes.string,

<b>railStyles</b>: PropTypes.object,

<b>resetAfterSuccessAnimDelay</b>: PropTypes.number, <span style="color: blueviolet"> This is delay before resetting the button after successful swipe When shouldResetAfterSuccess = true</span>

<b>resetAfterSuccessAnimDuration</b>: PropTypes.number,

<b>screenReaderEnabled</b>: PropTypes.bool,

<b>shouldResetAfterSuccess</b>: PropTypes.bool, <span style="color: blueviolet">// If set to true, buttun resets automatically after swipe success with default delay of 1000ms</span>

<b>swipeSuccessThreshold</b>: PropTypes.number, <span style="color: blueviolet">// Ex: 70. Swipping 70% will be considered as successful swipe</span>

<b>shouldResetAfterSuccess</b>: PropTypes.bool,

<b>thumbIconBackgroundColor</b>: PropTypes.string,

<b>thumbIconBorderColor</b>: PropTypes.string,

<b>thumbIconComponent</b>: PropTypes.node,
<b>thumbIconComponent</b>: PropTypes.node, <span style="color: blueviolet">Pass any react component to replace swipable thumb icon</span>

<b>thumbIconImageSource</b>: PropTypes.oneOfType([
PropTypes.string,
Expand All @@ -112,7 +119,47 @@ <h2 style="color:darkgreen;">Component properties</h2>
<b>width</b>: PropTypes.number,
</pre>
<hr>
<a href="https://www.npmjs.com/package/rn-swipe-button">https://www.npmjs.com/package/rn-swipe-button</a>
<p>Note: In accessibility mode this component works like a regular button (double tap to activate)</p>

<p><h4>Note:</h4> In accessibility mode this component works like a regular button (double tap to activate)</p>
<hr>
<div>
<h2 style="color:darkgreen;">Running example app</h2>
<ol>
<li><code>git close https://github.com/UdaySravanK/RNSwipeButton.git</code></li>
<li><code>cd RNSwipeButton/examples/RNSwipeButtonDemo</code></li>
<li><code>yarn</code></li>
<li><p>To run on an android emulator</p>
<code>yarn android</code>
<details>
<summary>Make sure of</summary>
<ul>
<li>Android Studio is configured</li>
<li>Global paths set correctly for Android SDK i.e ANDROID_HOME, tools, platform-tools</li>
<li>Java8 is installed</li>
<li>At least one emulator is ready</li>
</ul>
</details>
</li>
<li><p>To run on an ios simulator</p>
<code>yarn ios</code>
<details>
<summary>Make sure of</summary>
<ul>
<li>xcode is configured</li>
<li>cocoapods installed</li>
<li>If seeing issues then run <code>pod deintegrate & pod install</code></li>
<li>If seeing issues with fonts
<ol>
<li>Open ios workspace project in xcode</li>
<li>Select RNSwipeButtonDemo</li>
<li>Go to Build phases</li>
<li>Open 'Copy Bundle Resources' and delete all .ttf files</li>
</ol>
</li>
</ul>
</details>
</li>
</ol>
</div>
</body>
</html>
4 changes: 2 additions & 2 deletions examples/RNSwipeButtonDemo/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ const App: () => React$Node = () => {
</View>
{renderSubHeading('Set .png image as thumb icon')}
<SwipeButton thumbIconImageSource={thumbIcon} />
{renderSubHeading('Set height')}
<SwipeButton height={25} shouldResetAfterSuccess={true} resetAfterSuccessAnimDelay={0} />
{renderSubHeading('Set height & reset after successful swipe')}
<SwipeButton height={25} shouldResetAfterSuccess={true} resetAfterSuccessAnimDelay={1000} />
{renderSubHeading('Set height and width')}
<SwipeButton height={35} width={150} title="Swipe" />
</View>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rn-swipe-button",
"version": "1.2.9",
"version": "1.3.0",
"description": "react native swipe/slide button component",
"main": "index.js",
"scripts": {
Expand Down

0 comments on commit bcdc592

Please sign in to comment.