react-native-touchable-action 1.0.7 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -32
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
# React Native
|
|
1
|
+
# React Native Touchable Action
|
|
2
2
|
|
|
3
3
|
###### A simple floating action button component for any React Native project using Expo
|
|
4
4
|
|
|
5
|
+
iOS | Android
|
|
6
|
+
:------------------:|:------------------:
|
|
7
|
+
 | 
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
5
12
|
## Installation
|
|
6
13
|
|
|
7
14
|
```
|
|
8
15
|
npm install --save react-native-touchable-action
|
|
9
16
|
```
|
|
10
|
-
|
|
11
17
|
or
|
|
12
|
-
|
|
13
18
|
```
|
|
14
19
|
yarn add react-native-touchable-action
|
|
15
20
|
```
|
|
@@ -38,9 +43,9 @@ import FloatingActionButton from 'react-native-touchable-action';
|
|
|
38
43
|
console.log('You pressed the rocket button');
|
|
39
44
|
}}
|
|
40
45
|
style={{
|
|
41
|
-
position
|
|
42
|
-
bottom
|
|
43
|
-
right
|
|
46
|
+
position='absolute',
|
|
47
|
+
bottom=75,
|
|
48
|
+
right=50,
|
|
44
49
|
}}
|
|
45
50
|
/>
|
|
46
51
|
```
|
|
@@ -100,11 +105,10 @@ buttonColor='#0F044C'
|
|
|
100
105
|
#### buttonColorPressed
|
|
101
106
|
> type: String - Default: #6a4c93
|
|
102
107
|
###### The color of the button when pressed in
|
|
103
|
-
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<br />
|
|
108
|
+
|
|
109
|
+
<img width="115" alt="ButtonColor" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/f4f4e2eb-3f23-43f2-9370-ab29ddf24c89"> | <img width="115" alt="ButtonColorPressed" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/461722b4-a1f1-4447-8ef6-195e0787967e">
|
|
110
|
+
:------------------:|:------------------:
|
|
111
|
+
ButtonColor | ButtonColorPressed
|
|
108
112
|
|
|
109
113
|
```
|
|
110
114
|
buttonColorPressed='#693C72'
|
|
@@ -133,11 +137,10 @@ buttonColorPressed='#693C72'
|
|
|
133
137
|
#### buttonSize
|
|
134
138
|
> type: Object({Number}) - Default: 65
|
|
135
139
|
###### The size of the button
|
|
136
|
-
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<br />
|
|
140
|
+
|
|
141
|
+
<img width="105" alt="Size75" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/a6cd92cd-4e84-4eca-9c66-16b001b08555"> | <img width="125" alt="Size55" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/f3e8a40b-6181-46dd-89ba-4eb49aa080e3">
|
|
142
|
+
:--------------:|:--------------:
|
|
143
|
+
Button Size 75 | Button Size 55
|
|
141
144
|
|
|
142
145
|
```
|
|
143
146
|
buttonSize={75}
|
|
@@ -167,11 +170,11 @@ buttonSize={75}
|
|
|
167
170
|
#### iconSize
|
|
168
171
|
> type: Object({Number}) - Default: 40
|
|
169
172
|
###### The size of the icon inside the button.
|
|
170
|
-
###### This only changes the size of the icon inside the button, not the size of the button itself
|
|
171
|
-
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
173
|
+
###### This only changes the size of the icon inside the button, not the size of the button itself
|
|
174
|
+
|
|
175
|
+
<img width="105" alt="Icon50" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/ab76f0b2-039d-4cb6-89a1-cb4b4be367c3"> | <img width="105" alt="Icon35" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/63220fcd-b598-4ab1-94f2-5b46f6184d67">
|
|
176
|
+
:------------:|:------------:
|
|
177
|
+
Icon Size 50 | Icon Size 35
|
|
175
178
|
|
|
176
179
|
```
|
|
177
180
|
iconSize={35}
|
|
@@ -232,11 +235,10 @@ iconColor='#edf6f9'
|
|
|
232
235
|
#### iconColorPressed
|
|
233
236
|
> type: String - Default: #e2eafc
|
|
234
237
|
###### The color of the icon color when the button is pressed
|
|
235
|
-
|
|
236
|
-
<
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
<br />
|
|
238
|
+
|
|
239
|
+
<img width="42" alt="IconColor" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/88de584d-85cd-4731-8630-6418a492d7ba"> | <img width="42" alt="IconColorPressed" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/62c7c0ed-e8d0-4c98-9abe-6a04f07539e6">
|
|
240
|
+
:------------------:|:------------------:
|
|
241
|
+
Icon color | Icon Color Pressed
|
|
240
242
|
|
|
241
243
|
```
|
|
242
244
|
iconColorPressed='#c9ccd5'
|
|
@@ -269,11 +271,10 @@ iconColorPressed='#c9ccd5'
|
|
|
269
271
|
#### shaded
|
|
270
272
|
> type: Object({Boolean}) - Default: false
|
|
271
273
|
###### The shadow underneath the button when not pressed in. Works best in Light Mode
|
|
272
|
-
|
|
273
|
-
<
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
<br />
|
|
274
|
+
|
|
275
|
+
<img width="110" alt="Shaded" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/f3800c2b-8304-49e7-83e0-5a3d4584a8f0"> | <img width="110" alt="NotShaded" src="https://github.com/cartagenae/react-native-touchable-action/assets/6395465/e2f2b19d-d34a-48d7-ba14-c0078899ac38">
|
|
276
|
+
:----------:|:----------:
|
|
277
|
+
Shaded | Not Shaded
|
|
277
278
|
|
|
278
279
|
```
|
|
279
280
|
shaded={true}
|
|
@@ -304,4 +305,4 @@ shaded={true}
|
|
|
304
305
|
|
|
305
306
|
## License
|
|
306
307
|
|
|
307
|
-
|
|
308
|
+
React Native Floating Action Button is under the **MIT License**. See bundled <a href='https://github.com/cartagenae/react-native-touchable-action/blob/main/LICENSE' alt='license file'>**LICENSE**</a> file for details.
|
package/package.json
CHANGED