Skip to content

Commit 87116de

Browse files
GeorgeHopGeorgeHop
committed
Initial commit
0 parents  commit 87116de

10 files changed

+482
-0
lines changed

‎.idea/.gitignore

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/misc.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/react-native-use-on-change.iml

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Mutovkin Yurii(George Hope)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# react-native-tm
2+
Fully customizable toast component for your react-native applications supported on IOS and Android. Also you can use it with expo or pure react-native.
3+
4+
![ezgif com-gif-maker (8)](https://user-images.githubusercontent.com/47904385/120900240-1225d380-c634-11eb-9842-3aadf5902967.gif)
5+
6+
# Installation
7+
expo: `expo install react-native-tm`
8+
npm: `npm i react-native-tm`
9+
yarn: `yarn add react-native-tm`
10+
11+
## Basic usage
12+
```JS
13+
import Toast from "react-native-tm";
14+
15+
export default function YourComponent() {
16+
return(
17+
<YourComponentsHere></YourComponentsHere>
18+
<Toast
19+
show={true}
20+
withClose={true}
21+
style={{
22+
toast: {
23+
width: '100%',
24+
height: 50,
25+
backgroundColor: 'red'
26+
}
27+
}}
28+
/>
29+
)
30+
}
31+
32+
// more about customizing below
33+
```
34+
35+
## How customize your toast ?
36+
```JS
37+
import Toast from "react-native-tm";
38+
39+
export default function YourComponent() {
40+
41+
return(
42+
<YourComponentsHere></YourComponentsHere>
43+
<Toast
44+
show={true}
45+
// set the animation type of toast choose the best for you in props
46+
animationType={'bounce'}
47+
// add the closing toast function on press
48+
withClose={true}
49+
// pass toast styles object to style
50+
style={{
51+
toast: {
52+
width: '100%',
53+
height: 50,
54+
backgroundColor: 'red'
55+
}
56+
}}
57+
>
58+
// and for sure you can add childrens here
59+
// to customize your toast
60+
<View style={{height: 50, width: 50, backgroundColor: 'black', borderRadius: 30}}/>
61+
<View
62+
style={{
63+
marginLeft: 10
64+
}}
65+
>
66+
<Text>
67+
Title top
68+
</Text>
69+
<Text>
70+
Description on the bottom
71+
</Text>
72+
</View>
73+
</Toast>
74+
)
75+
}
76+
77+
```
78+
79+
## How customize your animation ?
80+
81+
By default toast use the linear animation, just show and hide nothing special. But if you want to change the animation type use description below.
82+
83+
#### For bounce animation.
84+
85+
<table>
86+
<tr>
87+
<td>
88+
89+
```JS
90+
<Toast
91+
...
92+
// Add the animation type bounce
93+
animationType={'bounce'}
94+
...
95+
/>
96+
```
97+
98+
</td>
99+
<td>
100+
<img src="https://user-images.githubusercontent.com/47904385/120920413-edc30900-c6be-11eb-82bf-9aa5b31dd1c8.gif" alt="drawing" width="600" height="300"/>
101+
</td>
102+
</tr>
103+
</table>
104+
105+
#### For elastic animation.
106+
107+
<table>
108+
<tr>
109+
<td>
110+
111+
```JS
112+
<Toast
113+
...
114+
// Add the animation type elastic
115+
animationType={'elastic'}
116+
...
117+
/>
118+
```
119+
120+
</td>
121+
<td>
122+
<img src="https://user-images.githubusercontent.com/47904385/120920546-9f623a00-c6bf-11eb-852e-867d40f3b65f.gif" alt="drawing" width="600" height="300"/>
123+
</td>
124+
</tr>
125+
</table>
126+
127+
## Props
128+
Below are the props you can pass to the React Component.
129+
130+
| Prop | Type | Default | Example | Description |
131+
| ------------- | ------------- | ------------- | ------------- | ------------- |
132+
| show | boolean | | show={true} | Put the toast state |
133+
| animationType | string | | animationType={'bounce'} | If you what different animations on your toast |
134+
| toastOnPress | function | | toastOnPress={() => console.log('check')} | You can add many other functions here or just navigate to other screen |
135+
| withClose | boolean | false | withClose={true} | Added posibility to close toast on press. You can use it with toastOnPress at one time. |
136+
| children | component | | ``` <Toast><YourComponent/></Toast> ``` | You can add yout own component for example messages from users in your app or internet connection notifications. |
137+
| style | object | | {toast: {backgroundColor: 'black', height: 50}} | The styles object for styling the toast details. More about styling in Custom styling step.|
138+
| showingDuration | int | 8000 | showingDuration={3000} | How much time toast will show on the screen |
139+
| statusBarHeight | int | 180 | statusBarHeight={150} | If you have a specific status bar on your device you may want to pass this props to aware some UI bugs on the device |
140+
| onHide | function | | onHide={() => yourFunctionToDoSomething()} | Function which call when toast hiding. |
141+
142+
## ToDos
143+
144+
1. TypeScript support.
145+
2. More animation for customizing.
146+

‎helpers/validateFunctions.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export const validateEmail = (email) => {
2+
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
3+
return re.test(String(email).toLowerCase());
4+
};
5+
6+
export const isEmptyObject = obj => obj && Object.keys(obj).length === 0 && Object.getPrototypeOf(obj) === Object.prototype;
7+
8+
// Validations generator
9+
10+
export const minLength = (minLength, message) => value => value?.length < minLength ? message : '';
11+
12+
export const maxLength = (maxLength, message) => value => value?.length > maxLength ? message : '';
13+
14+
export const notZero = (message) => value => Number(value) === 0 ? message : '';
15+
16+
export const isRequired = message => value => value ? '' : message;
17+
18+
export const isValueEqual = (fieldName, message) => (value, fields) => fields[fieldName] === value ? '' : message;
19+
20+
export const isEmailValid = message => email => {
21+
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
22+
return re.test(String(email).toLowerCase()) ? '' : message;
23+
};
24+
25+
export const isValidHex = message => color => {
26+
if(!color || typeof color !== 'string') return '';
27+
28+
// Validate hex values
29+
if(color.substring(0, 1) === '#') color = color.substring(1);
30+
31+
switch(color.length) {
32+
case 3: return /^[0-9A-F]{3}$/i.test(color) && "";
33+
case 6: return /^[0-9A-F]{6}$/i.test(color) && "";
34+
case 8: return /^[0-9A-F]{8}$/i.test(color) && "";
35+
default: return message;
36+
}
37+
38+
return message;
39+
};

‎package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "react-native-use-on-change",
3+
"version": "0.0.1",
4+
"main": "useOnChange.js",
5+
"description": "Easy to use hook.",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/GeorgeHop/react-native-use-on-change.git"
9+
},
10+
"keywords": [
11+
"react-native",
12+
"react",
13+
"native",
14+
"expo",
15+
"hook",
16+
"form",
17+
"crossplatform",
18+
"ios",
19+
"android"
20+
],
21+
"contributors": [
22+
{
23+
"name": "Mutovkin Yurii",
24+
"email": "[email protected]",
25+
"url": "https://github.com/GeorgeHop"
26+
}
27+
],
28+
"author": "George Hope",
29+
"license": "ISC",
30+
"bugs": {
31+
"url": "https://github.com/GeorgeHop/react-native-use-on-change/issues"
32+
},
33+
"homepage": "https://github.com/GeorgeHop/react-native-use-on-change#readme"
34+
}

0 commit comments

Comments
 (0)