Gathering detailed insights and metrics for react-native-animatable-button
Gathering detailed insights and metrics for react-native-animatable-button
Gathering detailed insights and metrics for react-native-animatable-button
Gathering detailed insights and metrics for react-native-animatable-button
npm install react-native-animatable-button
Typescript
Module System
Node Version
NPM Version
TypeScript (98.73%)
Shell (1.27%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
3 Stars
9 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Apr 14, 2021
Latest Version
1.0.12
Package Id
react-native-animatable-button@1.0.12
Size
8.43 kB
NPM Version
3.10.10
Node Version
6.11.4
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
5
npm install react-native-animatable-button --save
Props | Type | Description | Required | Default |
---|---|---|---|---|
accessibilityLabel | string | custom access label | not required | reactNativeAnimetableButton |
buttonContainerStyle | Object | must be provided Object not STYLE | not required | see below |
selectedState | string | selected id of provided states | not required | default |
states | [key: string]: IButtonState | state object | not required | default state |
disabled | boolean | enable/disable button | not required | false |
touchFeedbaack | boolean | enable/disable tap opacity animate | not required | true |
touchFeedbaackDelay | boolean | set delayPressIn prop of TOpacity | not required | 0 |
Props | Type | Description | Required | Default |
---|---|---|---|---|
animationDelay | number | delay of animations | not required | 0 |
animationDuration | number | animation duration time | not required | 400 |
animationEasing | EasingFunction | easing options | not required | Easing.bezier(0.4, 0.2, 0.4, 1.3) |
onPressAnimationEnable | boolean | tap animation config | not required | true |
onPressAnimationScaleValue | number | number of scale to | not required | 1.05 |
onPressAnimationType | button - inside | scale all button or inside | not required | button |
startAnimationDelay | number | delay of start animation | not required | 0 |
startAnimationDuration | number | animation duration time for start | not required | 400 |
startAnimationEnable | boolean | enable/disable start animation | not required | true |
backgroundAnimation | animated - slide | set background option | not required | animated |
Props | Type | Description | Required | Default |
---|---|---|---|---|
buttonInsideContainerStyle | Object | must be provided Object not STYLE | not required | see below |
icon | ImageURISource - any | icon uri or source | not required | - |
iconStyle | ImageStyle | icon style | not required | see below |
iconPosition | left - right | position of icon | not required | left |
text | string | button text | not required | - |
textStyle | TextStyle | text style | not required | see below |
spinner | boolean | enable/disable spinner | not required | false |
spinnerProps | ActivityIndicatorProperties | spinner Props | not required | - |
syncIconAndTextAnimation | boolean | enable/disable animation diff | not required | false |
asyncIconAndTextAnimationDiff | number [0 - 100] | percent of diff | not required | 50 |
1{ 2 backgroundColor: 'rgba(0,0,0,0)', 3 borderRadius: 5, 4 borderWidth: 1, 5 height: ButtonSize.height, 6 overflow: 'hidden' 7}
1{ 2 alignItems: 'center', 3 backgroundColor: 'rgba(0,0,0,0)', 4 flexDirection: 'row', 5 height: ButtonSize.height, 6 justifyContent: 'center', 7 overflow: 'hidden', 8 paddingHorizontal: 10 9}
1{ 2 paddingHorizontal: 5 3}
1{ 2 flex: 1, 3 resizeMode: 'contain' 4}
Master props and state props are combined when provided.
1constructor() { 2 super(); 3 4 this.state = { 5 activeState: 'idle2' 6 } 7} 8 9render () { 10 <Button 11 touchFeedback={false} 12 onPress={this.onPress.bind(this)} 13 selectedState={this.state.activeState} 14 buttonContainerStyle={{ 15 height: 40 16 }} 17 buttonInsideContainerStyle={{ 18 backgroundColor: 'rgba(100,100,100,0.5)' 19 }} 20 onPress={() => { 21 console.log('master pressed'); 22 if (this.state.activeState === 'idle2') this.setState({ activeState: 'idle' }); 23 }} 24 states={{ 25 laodList: { 26 text:"Load List", 27 buttonInsideContainerStyle:{ 28 backgroundColor: 'rgba(255,0,0,0.5)' 29 }, 30 onPress: () => { 31 console.log('loadList pressed'); 32 this.setState({ activeState: 'loading' }) 33 34 return false; 35 } 36 }, 37 // when tap laodList logs => loadList pressed; master pressed 38 39 loading: { 40 text:"loading", 41 buttonInsideContainerStyle:{ 42 backgroundColor: 'rgba(0,255,0,0.5)' 43 }, 44 spinner: true, 45 onPress: () => { console.log('loading pressed'); return true; } 46 }, 47 // when tap loading logs => loading pressed; 48 49 idle: { 50 text:"idle", 51 onPress: () => { 52 console.log('idle pressed'); 53 this.setState({ activeState: 'loadList' }) 54 } 55 }, 56 // when tap idle logs => idle pressed; master pressed 57 58 idle2: { 59 text:"idle2", 60 } 61 // when tap idle2 logs => master pressed 62 }} 63 /> 64}
if you are return false
or undefined
in sub onPress functions when call master onPress function.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/9 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
license file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More