Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@99xt/first-born
Advanced tools
@99xt/first-born - npm Package Compare versions
Comparing version 1.1.5 to 1.1.6
| { | ||
| "name": "@99xt/first-born", | ||
| "version": "1.1.5", | ||
| "version": "1.1.6", | ||
| "description": "React Native UI Framework", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -453,3 +453,5 @@ # first-born | ||
| NotificationBarManager.showAlert({ | ||
| message: 'Your alert message goes here' // required | ||
| message: 'Your alert message goes here', // required | ||
| icon: { name: "alert" }, | ||
| // image: { source: require("./assets/images/accessibility.png") }, // image prop | ||
| }); | ||
@@ -467,12 +469,15 @@ } | ||
| | Prop | Description | Default | | ||
| |----------------------------|----------------------------------------------------------------|-------------| | ||
| | **`message`** | Message to display. **(Required)** | _None_ | | ||
| | **`shouldHideAfterDelay`** | If notification should hide after display or keep being shown. | _true_ | | ||
| | **`durationToHide`** | Animation duration for the notification to completely hide. | `350` | | ||
| | **`durationToShow`** | Animation duration for the notification to completely show. | `350` | | ||
| | **`duration`** | Duration of time to display the alert | `3000` | | ||
| | **`image`** | Image to be displayed next to notification message | _None_ | | ||
| | **`icon`** | Icon to be displayed next to notification message | `'alert'` | | ||
| | **`color`** | Background color of the Notification body. | `'#007bff'` | | ||
| | Prop | Description | Default | | ||
| |----------------------------|-------------------------------------------------------------------------------------------------|-----------------| | ||
| | **`message`** | Message to display. **(Required)** | _None_ | | ||
| | **`shouldHideAfterDelay`** | If notification should hide after display or keep being shown. | _true_ | | ||
| | **`durationToHide`** | Animation duration for the notification to completely hide. | `350` | | ||
| | **`durationToShow`** | Animation duration for the notification to completely show. | `350` | | ||
| | **`duration`** | Duration of time to display the alert | `3000` | | ||
| | **`image`** | Image to be displayed next to notification message | _None_ | | ||
| | **`icon`** | Icon to be displayed next to notification message | `'alert'` | | ||
| | **`color`** | Background color of the Notification body. | `'#007bff'` | | ||
| | **`textColor`** | Color of the Notification text. | _white_ | | ||
| | **`fontSize`** | Font size of Notification text. Accepts text identifier of above Text atom, or specific number. | `'sub_heading'` | | ||
| | **`fontWeight`** | Font weight of the Notification text. | `'bold'` | | ||
@@ -479,0 +484,0 @@ #### SnackBars |
@@ -10,8 +10,10 @@ "use strict"; | ||
| import { commonColors } from "../../../utils/color"; | ||
| import { getFontSize } from "first-born/src/variables/textSizeVariables"; | ||
| const { width, height } = Dimensions.get("window"); | ||
| const { width } = Dimensions.get("window"); | ||
| const styles = StyleSheet.create({ | ||
| notificationContainer: { | ||
| height: height * 0.05, | ||
| padding: 5, | ||
| paddingVertical: 7, | ||
| justifyContent: "center", | ||
@@ -60,3 +62,3 @@ alignItems: "center", | ||
| color: props.color || "#007bff", | ||
| icon: props.icon || "alert", | ||
| icon: props.icon || { name: "alert" }, | ||
| image: props.image || undefined, | ||
@@ -70,3 +72,6 @@ message: props.message, | ||
| durationToShow: props.durationToShow || 350, | ||
| durationToHide: props.durationToHide || 350 | ||
| durationToHide: props.durationToHide || 350, | ||
| fontSize: props.fontSize || getFontSize("sub_heading"), | ||
| fontWeight: props.fontWeight || "bold", | ||
| textColor: props.textColor || commonColors.white | ||
| }; | ||
@@ -131,7 +136,7 @@ } | ||
| renderIcon() { | ||
| const { icon, image } = this.state; | ||
| const { icon, image, textColor } = this.state; | ||
| if (image) { | ||
| return ( | ||
| <View style={styles.iconStyle}> | ||
| <Image source={image} style={styles.imageStyle} /> | ||
| <Image {...image} style={styles.imageStyle} /> | ||
| </View> | ||
@@ -142,3 +147,3 @@ ); | ||
| <View style={styles.iconStyle}> | ||
| <Icon name={icon} /> | ||
| <Icon {...icon} color={textColor} /> | ||
| </View> | ||
@@ -150,4 +155,13 @@ ); | ||
| if (this.state.message !== null) { | ||
| const { fontSize, fontWeight, textColor } = this.state; | ||
| const textFontSize = | ||
| typeof fontSize === "string" ? getFontSize(fontSize) : fontSize; | ||
| return ( | ||
| <Text style={styles.notificationText}> | ||
| <Text | ||
| style={[ | ||
| styles.notificationText, | ||
| { fontSize: textFontSize, fontWeight } | ||
| ]} | ||
| color={textColor} | ||
| > | ||
| {this.state.message} | ||
@@ -162,9 +176,16 @@ </Text> | ||
| message: PropTypes.string, | ||
| icon: PropTypes.string, | ||
| icon: PropTypes.shape({ | ||
| ...Icon.propTypes | ||
| }), | ||
| color: PropTypes.string, | ||
| image: PropTypes.object, | ||
| image: PropTypes.shape({ | ||
| ...Image.propTypes | ||
| }), | ||
| duration: PropTypes.number, | ||
| shouldHideAfterDelay: PropTypes.bool, | ||
| durationToShow: PropTypes.number, | ||
| durationToHide: PropTypes.number | ||
| durationToHide: PropTypes.number, | ||
| fontWeight: PropTypes.string, | ||
| fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), | ||
| textColor: PropTypes.string | ||
| }; | ||
@@ -171,0 +192,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.89%
209242
- Lines of code
- increased by0.49%
4295
- Number of lines in readme file
- increased by0.52%
969
No dependency changes