react-native-touchable-action 1.0.0
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/FloatingActionButton.js +298 -0
- package/README.md +308 -0
- package/package.json +13 -0
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
StyleSheet,
|
|
4
|
+
Pressable,
|
|
5
|
+
} from 'react-native';
|
|
6
|
+
import {
|
|
7
|
+
AntDesign,
|
|
8
|
+
Entypo,
|
|
9
|
+
EvilIcons,
|
|
10
|
+
Feather,
|
|
11
|
+
FontAwesome,
|
|
12
|
+
FontAwesome5,
|
|
13
|
+
Fontisto,
|
|
14
|
+
Foundation,
|
|
15
|
+
Ionicons,
|
|
16
|
+
MaterialCommunityIcons,
|
|
17
|
+
MaterialIcons,
|
|
18
|
+
Octicons,
|
|
19
|
+
SimpleLineIcons,
|
|
20
|
+
Zocial
|
|
21
|
+
} from '@expo/vector-icons';
|
|
22
|
+
|
|
23
|
+
const FloatingActionButton = props => {
|
|
24
|
+
const {
|
|
25
|
+
buttonColor,
|
|
26
|
+
buttonColorPressed,
|
|
27
|
+
buttonSize,
|
|
28
|
+
IconSource, // required
|
|
29
|
+
iconName, // required
|
|
30
|
+
iconSize,
|
|
31
|
+
iconColor,
|
|
32
|
+
iconColorPressed,
|
|
33
|
+
onPress,
|
|
34
|
+
shaded
|
|
35
|
+
} = props;
|
|
36
|
+
const [pressedIn, setPressedIn] = useState(false);
|
|
37
|
+
let buttonIcon = ''
|
|
38
|
+
|
|
39
|
+
switch(IconSource) {
|
|
40
|
+
case 'AntDesign':
|
|
41
|
+
buttonIcon = (
|
|
42
|
+
<AntDesign
|
|
43
|
+
name={iconName}
|
|
44
|
+
color={
|
|
45
|
+
pressedIn ?
|
|
46
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
47
|
+
:
|
|
48
|
+
iconColor ? iconColor : '#edf6f9'
|
|
49
|
+
}
|
|
50
|
+
size={iconSize ? iconSize : 40}
|
|
51
|
+
borderRadius={500}
|
|
52
|
+
/>
|
|
53
|
+
)
|
|
54
|
+
break;
|
|
55
|
+
case 'Entypo':
|
|
56
|
+
buttonIcon = (
|
|
57
|
+
<Entypo
|
|
58
|
+
name={iconName}
|
|
59
|
+
color={
|
|
60
|
+
pressedIn ?
|
|
61
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
62
|
+
:
|
|
63
|
+
iconColor ? iconColor : '#edf6f9'
|
|
64
|
+
}
|
|
65
|
+
size={iconSize ? iconSize : 40}
|
|
66
|
+
borderRadius={500}
|
|
67
|
+
/>
|
|
68
|
+
)
|
|
69
|
+
break;
|
|
70
|
+
case 'EvilIcons':
|
|
71
|
+
buttonIcon = (
|
|
72
|
+
<EvilIcons
|
|
73
|
+
name={iconName}
|
|
74
|
+
color={
|
|
75
|
+
pressedIn ?
|
|
76
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
77
|
+
:
|
|
78
|
+
iconColor ? iconColor : '#edf6f9'
|
|
79
|
+
}
|
|
80
|
+
size={iconSize ? iconSize : 40}
|
|
81
|
+
borderRadius={500}
|
|
82
|
+
/>
|
|
83
|
+
)
|
|
84
|
+
break;
|
|
85
|
+
case 'Feather':
|
|
86
|
+
buttonIcon = (
|
|
87
|
+
<Feather
|
|
88
|
+
name={iconName}
|
|
89
|
+
color={
|
|
90
|
+
pressedIn ?
|
|
91
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
92
|
+
:
|
|
93
|
+
iconColor ? iconColor : '#edf6f9'
|
|
94
|
+
}
|
|
95
|
+
size={iconSize ? iconSize : 40}
|
|
96
|
+
borderRadius={500}
|
|
97
|
+
/>
|
|
98
|
+
)
|
|
99
|
+
break;
|
|
100
|
+
case 'FontAwesome':
|
|
101
|
+
buttonIcon = (
|
|
102
|
+
<FontAwesome
|
|
103
|
+
name={iconName}
|
|
104
|
+
color={
|
|
105
|
+
pressedIn ?
|
|
106
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
107
|
+
:
|
|
108
|
+
iconColor ? iconColor : '#edf6f9'
|
|
109
|
+
}
|
|
110
|
+
size={iconSize ? iconSize : 40}
|
|
111
|
+
borderRadius={500}
|
|
112
|
+
/>
|
|
113
|
+
)
|
|
114
|
+
break;
|
|
115
|
+
case 'FontAwesome5':
|
|
116
|
+
buttonIcon = (
|
|
117
|
+
<FontAwesome5
|
|
118
|
+
name={iconName}
|
|
119
|
+
color={
|
|
120
|
+
pressedIn ?
|
|
121
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
122
|
+
:
|
|
123
|
+
iconColor ? iconColor : '#edf6f9'
|
|
124
|
+
}
|
|
125
|
+
size={iconSize ? iconSize : 40}
|
|
126
|
+
borderRadius={500}
|
|
127
|
+
/>
|
|
128
|
+
)
|
|
129
|
+
break;
|
|
130
|
+
case 'Fontisto':
|
|
131
|
+
buttonIcon = (
|
|
132
|
+
<Fontisto
|
|
133
|
+
name={iconName}
|
|
134
|
+
color={
|
|
135
|
+
pressedIn ?
|
|
136
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
137
|
+
:
|
|
138
|
+
iconColor ? iconColor : '#edf6f9'
|
|
139
|
+
}
|
|
140
|
+
size={iconSize ? iconSize : 40}
|
|
141
|
+
borderRadius={500}
|
|
142
|
+
/>
|
|
143
|
+
)
|
|
144
|
+
break;
|
|
145
|
+
case 'Foundation':
|
|
146
|
+
buttonIcon = (
|
|
147
|
+
<Foundation
|
|
148
|
+
name={iconName}
|
|
149
|
+
color={
|
|
150
|
+
pressedIn ?
|
|
151
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
152
|
+
:
|
|
153
|
+
iconColor ? iconColor : '#edf6f9'
|
|
154
|
+
}
|
|
155
|
+
size={iconSize ? iconSize : 40}
|
|
156
|
+
borderRadius={500}
|
|
157
|
+
/>
|
|
158
|
+
)
|
|
159
|
+
break;
|
|
160
|
+
case 'Ionicons':
|
|
161
|
+
buttonIcon = (
|
|
162
|
+
<Ionicons
|
|
163
|
+
name={iconName}
|
|
164
|
+
color={
|
|
165
|
+
pressedIn ?
|
|
166
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
167
|
+
:
|
|
168
|
+
iconColor ? iconColor : '#edf6f9'
|
|
169
|
+
}
|
|
170
|
+
size={iconSize ? iconSize : 40}
|
|
171
|
+
borderRadius={500}
|
|
172
|
+
/>
|
|
173
|
+
)
|
|
174
|
+
break;
|
|
175
|
+
case 'MaterialCommunityIcons':
|
|
176
|
+
buttonIcon = (
|
|
177
|
+
<MaterialCommunityIcons
|
|
178
|
+
name={iconName}
|
|
179
|
+
color={
|
|
180
|
+
pressedIn ?
|
|
181
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
182
|
+
:
|
|
183
|
+
iconColor ? iconColor : '#edf6f9'
|
|
184
|
+
}
|
|
185
|
+
size={iconSize ? iconSize : 40}
|
|
186
|
+
borderRadius={500}
|
|
187
|
+
/>
|
|
188
|
+
)
|
|
189
|
+
break;
|
|
190
|
+
case 'MaterialIcons':
|
|
191
|
+
buttonIcon = (
|
|
192
|
+
<MaterialIcons
|
|
193
|
+
name={iconName}
|
|
194
|
+
color={
|
|
195
|
+
pressedIn ?
|
|
196
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
197
|
+
:
|
|
198
|
+
iconColor ? iconColor : '#edf6f9'
|
|
199
|
+
}
|
|
200
|
+
size={iconSize ? iconSize : 40}
|
|
201
|
+
borderRadius={500}
|
|
202
|
+
/>
|
|
203
|
+
)
|
|
204
|
+
break;
|
|
205
|
+
case 'Octicons':
|
|
206
|
+
buttonIcon = (
|
|
207
|
+
<Octicons
|
|
208
|
+
name={iconName}
|
|
209
|
+
color={
|
|
210
|
+
pressedIn ?
|
|
211
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
212
|
+
:
|
|
213
|
+
iconColor ? iconColor : '#edf6f9'
|
|
214
|
+
}
|
|
215
|
+
size={iconSize ? iconSize : 40}
|
|
216
|
+
borderRadius={500}
|
|
217
|
+
/>
|
|
218
|
+
)
|
|
219
|
+
break;
|
|
220
|
+
case 'SimpleLineIcons':
|
|
221
|
+
buttonIcon = (
|
|
222
|
+
<SimpleLineIcons
|
|
223
|
+
name={iconName}
|
|
224
|
+
color={
|
|
225
|
+
pressedIn ?
|
|
226
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
227
|
+
:
|
|
228
|
+
iconColor ? iconColor : '#edf6f9'
|
|
229
|
+
}
|
|
230
|
+
size={iconSize ? iconSize : 40}
|
|
231
|
+
borderRadius={500}
|
|
232
|
+
/>
|
|
233
|
+
)
|
|
234
|
+
break;
|
|
235
|
+
case 'Zocial':
|
|
236
|
+
buttonIcon = (
|
|
237
|
+
<Zocial
|
|
238
|
+
name={iconName}
|
|
239
|
+
color={
|
|
240
|
+
pressedIn ?
|
|
241
|
+
iconColorPressed ? iconColorPressed : '#e2eafc'
|
|
242
|
+
:
|
|
243
|
+
iconColor ? iconColor : '#edf6f9'
|
|
244
|
+
}
|
|
245
|
+
size={iconSize ? iconSize : 40}
|
|
246
|
+
borderRadius={500}
|
|
247
|
+
/>
|
|
248
|
+
)
|
|
249
|
+
break;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
return (
|
|
253
|
+
<Pressable
|
|
254
|
+
style={[
|
|
255
|
+
props.style,
|
|
256
|
+
styles.container,
|
|
257
|
+
pressedIn ?
|
|
258
|
+
{
|
|
259
|
+
backgroundColor: buttonColorPressed ? buttonColorPressed : '#6a4c93',
|
|
260
|
+
shadowOpacity: 0,
|
|
261
|
+
elevation: 0,
|
|
262
|
+
}
|
|
263
|
+
:
|
|
264
|
+
{
|
|
265
|
+
backgroundColor: buttonColor ? buttonColor : '#480ca8',
|
|
266
|
+
shadowOpacity: shaded === true ? 0.35 : 0,
|
|
267
|
+
elevation: shaded === true ? 20 : 0,
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
height: buttonSize ? buttonSize : 65,
|
|
271
|
+
width: buttonSize ? buttonSize : 65,
|
|
272
|
+
},
|
|
273
|
+
]}
|
|
274
|
+
onPressIn={() => setPressedIn(true)}
|
|
275
|
+
onPressOut={() => setPressedIn(false)}
|
|
276
|
+
onPress={onPress}
|
|
277
|
+
>
|
|
278
|
+
{buttonIcon}
|
|
279
|
+
</Pressable>
|
|
280
|
+
)
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
const styles = StyleSheet.create({
|
|
284
|
+
container: {
|
|
285
|
+
alignItems: 'center',
|
|
286
|
+
justifyContent: 'center',
|
|
287
|
+
borderRadius: 50,
|
|
288
|
+
shadowColor: 'black',
|
|
289
|
+
shadowOffset: {
|
|
290
|
+
height: 10,
|
|
291
|
+
width: 5
|
|
292
|
+
},
|
|
293
|
+
shadowRadius: 10,
|
|
294
|
+
opacity: 100
|
|
295
|
+
}
|
|
296
|
+
})
|
|
297
|
+
|
|
298
|
+
export default FloatingActionButton;
|
package/README.md
ADDED
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
# React Native Floating Action Button
|
|
2
|
+
|
|
3
|
+
###### A simple floating action button component for any React Native project using Expo
|
|
4
|
+
|
|
5
|
+
## How to use
|
|
6
|
+
#### Copy the entire FloatingActionButton.js from this repository
|
|
7
|
+
|
|
8
|
+
https://user-images.githubusercontent.com/6395465/138796848-4c63ddc3-3d40-4780-8b22-5eb0657ac6f4.mov
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
#### Create a FloatingActionButton.js component file and paste it there
|
|
13
|
+
|
|
14
|
+
https://user-images.githubusercontent.com/6395465/138798075-6f9659cd-1f3a-4101-b146-0355a6f595f3.mov
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
#### Import and code in your floating action button
|
|
19
|
+
|
|
20
|
+
https://user-images.githubusercontent.com/6395465/138800685-8761f2b2-d6ea-45e4-8f06-c857905ba7cc.mov
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Reference
|
|
25
|
+
|
|
26
|
+
> For a list of IconSources and iconNames, please refer to https://icons.expo.fyi
|
|
27
|
+
|
|
28
|
+
<img width="1791" alt="expo icons reference" src="https://user-images.githubusercontent.com/6395465/138818042-1aad09f6-53a0-4975-987a-073ca4f7039d.png">
|
|
29
|
+
|
|
30
|
+
##
|
|
31
|
+
|
|
32
|
+
#### Basic Usage
|
|
33
|
+
> To position your floating action, use the React Native style prop
|
|
34
|
+
```
|
|
35
|
+
<FloatingActionButton
|
|
36
|
+
IconSource='Ionicons'
|
|
37
|
+
iconName='rocket'
|
|
38
|
+
onPress={() => {
|
|
39
|
+
console.log('You pressed the rocket button');
|
|
40
|
+
}}
|
|
41
|
+
style={{
|
|
42
|
+
position='absolute',
|
|
43
|
+
bottom=75,
|
|
44
|
+
right=50,
|
|
45
|
+
}}
|
|
46
|
+
/>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Props:
|
|
50
|
+
#### IconSource (required)
|
|
51
|
+
> type: String
|
|
52
|
+
###### The source of the icon
|
|
53
|
+
```
|
|
54
|
+
IconSource='Ionicons'
|
|
55
|
+
```
|
|
56
|
+
##
|
|
57
|
+
|
|
58
|
+
#### iconName (required)
|
|
59
|
+
> type: String
|
|
60
|
+
###### The name of the icon
|
|
61
|
+
```
|
|
62
|
+
iconName='rocket'
|
|
63
|
+
```
|
|
64
|
+
##
|
|
65
|
+
|
|
66
|
+
#### onPress
|
|
67
|
+
> type: Object({Function})
|
|
68
|
+
###### The action when the user presses the button
|
|
69
|
+
```
|
|
70
|
+
onPress={() => {
|
|
71
|
+
console.log('You pressed the rocket button');
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
##
|
|
75
|
+
|
|
76
|
+
#### buttonColor
|
|
77
|
+
> type: String - Default: #480ca8
|
|
78
|
+
###### The color of the button
|
|
79
|
+
```
|
|
80
|
+
buttonColor='#0F044C'
|
|
81
|
+
```
|
|
82
|
+
##### Example:
|
|
83
|
+
```
|
|
84
|
+
<FloatingActionButton
|
|
85
|
+
IconSource='Ionicons'
|
|
86
|
+
iconName='rocket'
|
|
87
|
+
onPress={() => {
|
|
88
|
+
console.log('You pressed the rocket button');
|
|
89
|
+
}}
|
|
90
|
+
style={{
|
|
91
|
+
position='absolute',
|
|
92
|
+
bottom=75,
|
|
93
|
+
right=50,
|
|
94
|
+
}}
|
|
95
|
+
buttonColor='#0F044C'
|
|
96
|
+
/>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
##
|
|
100
|
+
|
|
101
|
+
#### buttonColorPressed
|
|
102
|
+
> type: String - Default: #6a4c93
|
|
103
|
+
###### The color of the button when pressed in
|
|
104
|
+
<br />
|
|
105
|
+
<br />
|
|
106
|
+
<p> <img width="115" alt="Button Color" src="https://user-images.githubusercontent.com/6395465/139001982-17a326a7-1438-410a-ab01-9e084181db7a.png">      <img width="115" alt="Button Color Pressed" src="https://user-images.githubusercontent.com/6395465/139001988-7f9de534-637e-41f2-ad42-d1aa07f2f1fe.png"></p>
|
|
107
|
+
<p>  Button Color      Button Color Pressed</p>
|
|
108
|
+
<br />
|
|
109
|
+
|
|
110
|
+
```
|
|
111
|
+
buttonColorPressed='#693C72'
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
##### Example:
|
|
115
|
+
```
|
|
116
|
+
<FloatingActionButton
|
|
117
|
+
IconSource='Ionicons'
|
|
118
|
+
iconName='rocket'
|
|
119
|
+
onPress={() => {
|
|
120
|
+
console.log('You pressed the rocket button');
|
|
121
|
+
}}
|
|
122
|
+
style={{
|
|
123
|
+
position='absolute',
|
|
124
|
+
bottom=75,
|
|
125
|
+
right=50,
|
|
126
|
+
}}
|
|
127
|
+
buttonColor='#0F044C'
|
|
128
|
+
buttonColorPressed='#693C72'
|
|
129
|
+
/>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
##
|
|
133
|
+
|
|
134
|
+
#### buttonSize
|
|
135
|
+
> type: Object({Number}) - Default: 65
|
|
136
|
+
###### The size of the button
|
|
137
|
+
<br />
|
|
138
|
+
<br />
|
|
139
|
+
<p>  <img width="105" alt="Button Size 75" src="https://user-images.githubusercontent.com/6395465/139000330-ce9189d8-2023-413a-aa13-5c6f22f363c0.png">     <img width="125" alt="Button Size 55" src="https://user-images.githubusercontent.com/6395465/139000318-120dcbf4-e794-4747-9570-ee763b9e3547.png"></p>
|
|
140
|
+
<p>  Button Size 75      Button Size 55</p>
|
|
141
|
+
<br />
|
|
142
|
+
|
|
143
|
+
```
|
|
144
|
+
buttonSize={75}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
##### Example
|
|
148
|
+
```
|
|
149
|
+
<FloatingActionButton
|
|
150
|
+
IconSource='Ionicons'
|
|
151
|
+
iconName='rocket'
|
|
152
|
+
onPress={() => {
|
|
153
|
+
console.log('You pressed the rocket button');
|
|
154
|
+
}}
|
|
155
|
+
style={{
|
|
156
|
+
position='absolute',
|
|
157
|
+
bottom=75,
|
|
158
|
+
right=50,
|
|
159
|
+
}}
|
|
160
|
+
buttonColor='#0F044C'
|
|
161
|
+
buttonColorPressed='#693C72'
|
|
162
|
+
buttonSize={75}
|
|
163
|
+
/>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
##
|
|
167
|
+
|
|
168
|
+
#### iconSize
|
|
169
|
+
> type: Object({Number}) - Default: 40
|
|
170
|
+
###### The size of the icon inside the button.
|
|
171
|
+
###### This only changes the size of the icon inside the button, not the size of the button itself<br />
|
|
172
|
+
<br />
|
|
173
|
+
<p> <img width="105" alt="Icon Size 50" src="https://user-images.githubusercontent.com/6395465/138997150-99aa6f00-a7af-46c9-9b68-484332bb9cd1.png">       <img width="105" alt="Icon Size 35" src="https://user-images.githubusercontent.com/6395465/138997158-f36dfa88-d5d8-48b0-b8e6-c81f654e0354.png"></p>
|
|
174
|
+
<p>  Icon Size 50        Icon Size 35</p>
|
|
175
|
+
<br />
|
|
176
|
+
|
|
177
|
+
```
|
|
178
|
+
iconSize={35}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
##### Example
|
|
182
|
+
```
|
|
183
|
+
<FloatingActionButton
|
|
184
|
+
IconSource='Ionicons'
|
|
185
|
+
iconName='rocket'
|
|
186
|
+
onPress={() => {
|
|
187
|
+
console.log('You pressed the rocket button');
|
|
188
|
+
}}
|
|
189
|
+
style={{
|
|
190
|
+
position='absolute',
|
|
191
|
+
bottom=75,
|
|
192
|
+
right=50,
|
|
193
|
+
}}
|
|
194
|
+
buttonColor='#0F044C'
|
|
195
|
+
buttonColorPressed='#693C72'
|
|
196
|
+
buttonSize={75}
|
|
197
|
+
iconSize={35}
|
|
198
|
+
/>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
##
|
|
202
|
+
|
|
203
|
+
#### iconColor
|
|
204
|
+
> type: String - Default: #edf6f9
|
|
205
|
+
###### The color of the icon inside the button
|
|
206
|
+
```
|
|
207
|
+
iconColor='#edf6f9'
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
##### Example
|
|
211
|
+
```
|
|
212
|
+
<FloatingActionButton
|
|
213
|
+
IconSource='Ionicons'
|
|
214
|
+
iconName='rocket'
|
|
215
|
+
onPress={() => {
|
|
216
|
+
console.log('You pressed the rocket button');
|
|
217
|
+
}}
|
|
218
|
+
style={{
|
|
219
|
+
position='absolute',
|
|
220
|
+
bottom=75,
|
|
221
|
+
right=50,
|
|
222
|
+
}}
|
|
223
|
+
buttonColor='#0F044C'
|
|
224
|
+
buttonColorPressed='#693C72'
|
|
225
|
+
buttonSize={75}
|
|
226
|
+
iconSize={35}
|
|
227
|
+
iconColor='#edf6f9'
|
|
228
|
+
/>
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
##
|
|
232
|
+
|
|
233
|
+
#### iconColorPressed
|
|
234
|
+
> type: String - Default: #e2eafc
|
|
235
|
+
###### The color of the icon color when the button is pressed
|
|
236
|
+
<br />
|
|
237
|
+
<br />
|
|
238
|
+
<p>    <img width="42" alt="Icon Color" src="https://user-images.githubusercontent.com/6395465/138996043-ace2d03e-7424-4e72-b57f-ec28768f8ab9.png">         <img width="42" alt="Icon Color Pressed" src="https://user-images.githubusercontent.com/6395465/138996049-3d820c1a-6eaf-4492-aff0-24c10125bfc8.png"></p>
|
|
239
|
+
<p>   Icon Color     Icon Color Pressed</p>
|
|
240
|
+
<br />
|
|
241
|
+
|
|
242
|
+
```
|
|
243
|
+
iconColorPressed='#c9ccd5'
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
##### Example
|
|
247
|
+
```
|
|
248
|
+
<FloatingActionButton
|
|
249
|
+
IconSource='Ionicons'
|
|
250
|
+
iconName='rocket'
|
|
251
|
+
onPress={() => {
|
|
252
|
+
console.log('You pressed the rocket button');
|
|
253
|
+
}}
|
|
254
|
+
style={{
|
|
255
|
+
position='absolute',
|
|
256
|
+
bottom=75,
|
|
257
|
+
right=50,
|
|
258
|
+
}}
|
|
259
|
+
buttonColor='#0F044C'
|
|
260
|
+
buttonColorPressed='#693C72'
|
|
261
|
+
buttonSize={75}
|
|
262
|
+
iconSize={35}
|
|
263
|
+
iconColor='#edf6f9'
|
|
264
|
+
iconColorPressed='#c9ccd5'
|
|
265
|
+
/>
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
##
|
|
269
|
+
|
|
270
|
+
#### shaded
|
|
271
|
+
> type: Object({Boolean}) - Default: false
|
|
272
|
+
###### The shadow underneath the button when not pressed in. Works best in Light Mode
|
|
273
|
+
<br />
|
|
274
|
+
<br />
|
|
275
|
+
<p><img width="110" alt="Shaded" src="https://user-images.githubusercontent.com/6395465/138994543-6ca5a2d5-b6c2-495b-8f1a-cddf4c99ee81.png">      <img width="110" alt="Not Shaded" src="https://user-images.githubusercontent.com/6395465/138994576-907d004b-04e4-4d94-a8d1-614e02dce40d.png"></p>
|
|
276
|
+
<p>  Shaded         Not Shaded</p>
|
|
277
|
+
<br />
|
|
278
|
+
|
|
279
|
+
```
|
|
280
|
+
shaded={true}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
##### Example
|
|
284
|
+
```
|
|
285
|
+
<FloatingActionButton
|
|
286
|
+
IconSource='Ionicons'
|
|
287
|
+
iconName='rocket'
|
|
288
|
+
onPress={() => {
|
|
289
|
+
console.log('You pressed the rocket button');
|
|
290
|
+
}}
|
|
291
|
+
style={{
|
|
292
|
+
position='absolute',
|
|
293
|
+
bottom=75,
|
|
294
|
+
right=50,
|
|
295
|
+
}}
|
|
296
|
+
buttonColor='#0F044C'
|
|
297
|
+
buttonColorPressed='#693C72'
|
|
298
|
+
buttonSize={75}
|
|
299
|
+
iconSize={35}
|
|
300
|
+
iconColor='#edf6f9'
|
|
301
|
+
iconColorPressed='#c9ccd5'
|
|
302
|
+
shaded={true}
|
|
303
|
+
/>
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
## License
|
|
307
|
+
|
|
308
|
+
React Native Floating Action Button is under the **MIT License**. See bundled <a href='https://github.com/cartagenae/react-native-floating-action-button/blob/main/LICENSE' alt='license file'>**LICENSE**</a> file for details.
|
package/package.json
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-native-touchable-action",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A simple floating action button component for any React Native project using Expo",
|
|
5
|
+
"main": "FloatingActionButton.js",
|
|
6
|
+
"author": "Eric Cartagena",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"@expo/vector-icons": "^13.0.0",
|
|
10
|
+
"react": "^18.2.0",
|
|
11
|
+
"react-native": "^0.72.4"
|
|
12
|
+
}
|
|
13
|
+
}
|