react-native-touchable-action 1.0.11 → 1.0.13

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright © 2025 Eric Cartagena
+Copyright © 2026 Eric Cartagena
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -29,28 +29,72 @@ yarn add react-native-touchable-action
 
 ##
 
-#### Basic Usage
-
-> To position your floating action, use the React Native style prop
+#### Import the FloatingActionButton component
 ```js
 import FloatingActionButton from 'react-native-touchable-action';
 ```
+#### Usage
 ```js
-<FloatingActionButton
-  IconSource='Ionicons'
-  iconName='rocket'
-  onPress={() => {
-    console.log('You pressed the rocket button');
-  }}
-  style={{
-    position='absolute',
-    bottom=75,
-    right=50,
-  }}
-/>
-```
+import React from 'react';
+import {
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+import FloatingActionButton from 'react-native-touchable-action';
+
+const App = () => {
+  return (
+    <View
+      style={styles.container}
+    >
+      <Text>React Native Touchable Action</Text>
+
+      <FloatingActionButton
+        IconSource='Ionicons'
+        iconName='rocket'
+        onPress={() => {
+          console.log('You pressed the rocket button');
+        }}
+        style={{
+          position: 'absolute',
+          bottom: 75,
+          right: 50,
+        }}
+      />
+    </View>
+  )
+}
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export default App;
+```
+##
 ### Props:
+
+| Prop               | Type                                 | Required  | Description
+| :---               | :---                                 | :---      | :---
+| IconSource         | *String*                             | ***Yes*** | The source of the icon
+| iconName           | *String*                             | ***Yes*** | The name of the icon
+| onPress            | *Object({Function})*                 | No        | The action when the user presses the button
+| buttonColor        | *String* - Default: #480ca8        | No        | The color of the button
+| buttonColorPressed | *String* - Default: #6a4c93        | No        | The color of the button when pressed in
+| buttonSize         | *Object({Number})* - Default: 65     | No        | The size of the button
+| iconSize           | *Object({Number})* - Default: 40     | No        | The size of the icon inside the button
+| iconColor          | *String* - Default: #edf6f9        | No        | The color of the icon inside the button
+| iconColorPressed   | *String* - Default: #e2eafc        | No        | The color of the icon color when the button is pressed
+| shaded             | *Object({Boolean})* - Default: false | No        | The shadow underneath the button when not pressed in. Works best in Light Mode
+##
+
 #### IconSource (required)
 > type: String
 ###### The source of the icon
@@ -83,7 +127,7 @@ onPress={() => {
 ```js
 buttonColor='#0F044C'
 ```
-##### Example:
+
 ```js
 <FloatingActionButton
   IconSource='Ionicons'
@@ -99,7 +143,6 @@ buttonColor='#0F044C'
   buttonColor='#0F044C'
 />
 ```
-
 ##
 
 #### buttonColorPressed
@@ -114,7 +157,6 @@ buttonColor='#0F044C'
 buttonColorPressed='#693C72'
 ```
 
-##### Example:
 ```js
 <FloatingActionButton
   IconSource='Ionicons'
@@ -131,7 +173,6 @@ buttonColorPressed='#693C72'
   buttonColorPressed='#693C72'
 />
 ```
-
 ##
 
 #### buttonSize
@@ -146,7 +187,6 @@ buttonColorPressed='#693C72'
 buttonSize={75}
 ```
 
-##### Example
 ```js
 <FloatingActionButton
   IconSource='Ionicons'
@@ -164,12 +204,11 @@ buttonSize={75}
   buttonSize={75}
 />
 ```
-
 ##
 
 #### iconSize
 > type: Object({Number}) - Default: 40
-###### The size of the icon inside the button.
+###### The size of the icon inside the button
 ###### This only changes the size of the icon inside the button, not the size of the button itself
 
 <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">
@@ -180,7 +219,6 @@ buttonSize={75}
 iconSize={35}
 ```
 
-##### Example
 ```js
 <FloatingActionButton
   IconSource='Ionicons'
@@ -199,7 +237,6 @@ iconSize={35}
   iconSize={35}
 />
 ```
-
 ##
 
 #### iconColor
@@ -209,7 +246,6 @@ iconSize={35}
 iconColor='#edf6f9'
 ```
 
-##### Example
 ```js
 <FloatingActionButton
   IconSource='Ionicons'
@@ -229,7 +265,6 @@ iconColor='#edf6f9'
   iconColor='#edf6f9'
 />
 ```
-
 ##
 
 #### iconColorPressed
@@ -244,7 +279,6 @@ iconColor='#edf6f9'
 iconColorPressed='#c9ccd5'
 ```
 
-##### Example
 ```js
 <FloatingActionButton
   IconSource='Ionicons'
@@ -265,7 +299,6 @@ iconColorPressed='#c9ccd5'
   iconColorPressed='#c9ccd5'
 />
 ```
-
 ##
 
 #### shaded
@@ -280,7 +313,6 @@ iconColorPressed='#c9ccd5'
 shaded={true}
 ```
 
-##### Example
 ```js
 <FloatingActionButton
   IconSource='Ionicons'
@@ -302,7 +334,7 @@ shaded={true}
   shaded={true}
 />
 ```
-
+---
 ## License
 
 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

@@ -1,13 +1,36 @@
 {
   "name": "react-native-touchable-action",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "A simple floating action button component for any React Native project using Expo",
   "main": "FloatingActionButton.js",
   "author": "Eric Cartagena",
   "license": "MIT",
-  "dependencies": {
-    "@expo/vector-icons": "^14.1.0",
+  "peerDependencies": {
     "react": "^19.0.0",
-    "react-native": "^0.79.5"
-  }
+    "react-native": "^0.83.1"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3"
+  },
+  "keywords": [
+    "react-native",
+    "react-native-component",
+    "react",
+    "mobile-ui",
+    "touchable",
+    "touchable-action",
+    "touchable-component",
+    "pressable",
+    "button",
+    "interactive",
+    "onPress",
+    "gesture",
+    "gesture-handler",
+    "touch-feedback",
+    "ios",
+    "android",
+    "cross-platform",
+    "custom-button",
+    "clickable"
+  ]
 }