
Security News
Feross on Risky Business Weekly Podcast: npm’s Ongoing Supply Chain Attacks
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
react-native-av-countdown
Advanced tools
##What is it react-native-sk-countdown is a simple countdown component for React Native, pure js implementation
##How to use it
npm install react-native-sk-countdown@latest --save
Write this in index.ios.js / index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var {CountDownText} = require('react-native-sk-countdown');
var test = React.createClass({
render: function(){
return (
<View style={styles.container}>
<Text style={styles.tip}>{'CountDown in seconds \n 以秒为单位的倒计时'}</Text>
<View style={styles.row}>
<CountDownText
style={styles.cd}
countType='seconds' // 计时类型:seconds / date
auto={true} // 自动开始
afterEnd={() => {}} // 结束回调
timeLeft={10} // 正向计时 时间起点为0秒
step={-1} // 计时步长,以秒为单位,正数则为正计时,负数为倒计时
startText='获取验证码' // 开始的文本
endText='获取验证码' // 结束的文本
intervalText={(sec) => sec + '秒重新获取'} // 定时的文本回调
/>
</View>
<Text style={styles.tip}>{'CountDown in timestamp \n 以日期-时间为单位的倒计时'}</Text>
<View style={styles.row}>
<CountDownText // 倒计时
style={styles.cd}
countType='date' // 计时类型:seconds / date
auto={true} // 自动开始
afterEnd={() => {}} // 结束回调
timeLeft={10} // 正向计时 时间起点为0秒
step={-1} // 计时步长,以秒为单位,正数则为正计时,负数为倒计时
startText='' // 开始的文本
endText='' // 结束的文本
intervalText={(date, hour, min, sec) => date + '天' + hour + '时' + min + '分' + sec} // 定时的文本回调
/>
</View>
</View>
)
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
row: {
padding: 7,
backgroundColor: 'red',
borderRadius: 7,
},
tip: {
fontSize: 20,
},
cd: {
textAlign: 'center',
color: 'white',
fontSize: 20,
},
});
AppRegistry.registerComponent('test', () => test);
##Properties
Any Text property and the following:
Prop | Description | Default |
---|---|---|
countType | Countdown type, one of 'seconds' and 'date'. | None |
auto | Whether to start countdown right now. | false |
timeLeft | Seconds lefted to countdown. | None |
step | Number to increment in each step. | -1 |
startText | Text before countdown. | None |
endText | Text after countdown. | None |
intervalText | A function to reture a text during countdown. | None |
afterEnd | A callback function after countdown. | None |
##Methods
Method | Description | Params |
---|---|---|
start | start countdown. | None |
end | finish countdown. | None |
FAQs
A simple countdown component for React Native, pure js
The npm package react-native-av-countdown receives a total of 1 weekly downloads. As such, react-native-av-countdown popularity was classified as not popular.
We found that react-native-av-countdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.