Add 'timeFontStyle' prop.

Author: ljunb

README.md

@@ -163,6 +163,7 @@ titleStyle        | object | Yes      |     none         | font style of countdo
 countingStyle     | ViewPropTypes | Yes      | none | custom style when counting down
 countingTitleTemplate | string | Yes | {time}s后重新获取 | counting down title, must conform to the format that contain `{time}`
 countingTitleStyle | object | Yes | none | custom title style when counting down
+timeFontStyle      | FontPropTypes | Yes | none | font style of time
 shouldStartCountdown | function | Yes         | return true      | before start countdown, you can use this function to handle some business logic, return true to allow countdown, otherwise return false
 onNetworkFailed   | function | Yes | none | invoke when the network is failed, so the countdown timer will be invalid in this situation, maybe you will use it to show some message for users
 

index.js

@@ -55,6 +55,7 @@ export default class Countdown extends PureComponent {
     countingStyle: ViewPropTypes.style,
     countingTitleTemplate: PropTypes.string,
     countingTitleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
+    timeFontStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
     shouldStartCountdown: PropTypes.func,
     onNetworkFailed: PropTypes.func,
   };
@@ -180,33 +181,65 @@ export default class Countdown extends PureComponent {
 
   clearTimer = () => this.timer && clearInterval(this.timer);
 
-  render() {
-    const { status, second } = this.state;
+  getCountingComponent = () => {
+    const { second } = this.state;
     const {
-      title, style, overTitle, titleStyle,
-      countingTitleTemplate, countingStyle, countingTitleStyle
+      countingTitleTemplate,
+      titleStyle, countingStyle, countingTitleStyle, timeFontStyle
     } = this.props;
 
-    let promptTitle = title,
-      containerStyle = [styles.container, style],
-      textStyle = [styles.title, titleStyle];
-
-    if (status === CountdownStatus.Counting) {
-      promptTitle = countingTitleTemplate.replace('{time}', second);
-      containerStyle.push(countingStyle);
-      textStyle.push(countingTitleStyle);
-    } else if (status === CountdownStatus.Over) {
-      promptTitle = overTitle;
+    const templateIndex = countingTitleTemplate.indexOf('{time}');
+    const titleLength = countingTitleTemplate.length;
+    const baseStyle = [styles.title, titleStyle, countingTitleStyle];
+    const timeComponent = <Text style={timeFontStyle}>{second}</Text>;
+
+    if (countingTitleTemplate === '{time}') {
+      return <Text style={[baseStyle, timeFontStyle]}>{second}</Text>;
+    } else if (templateIndex === 0 && titleLength > 6) {
+      const restText = countingTitleTemplate.split('}')[1];
+      return (
+        <Text style={baseStyle}>
+          {timeComponent}
+          {restText}
+        </Text>
+      )
+    } else if (templateIndex === titleLength - 6) {
+      const restText = countingTitleTemplate.split('{')[0];
+      return (
+        <Text style={baseStyle}>
+          {restText}
+          {timeComponent}
+        </Text>
+      )
     }
 
+    return (
+      <Text style={[styles.title, titleStyle, countingTitleStyle]}>
+        {countingTitleTemplate.split('{time}')[0]}
+        {timeComponent}
+        {countingTitleTemplate.split('{time}')[1]}
+      </Text>
+    )
+  };
+
+  render() {
+    const { status, second } = this.state;
+    const { title, style, overTitle, titleStyle } = this.props;
+    const isCounting = status === CountdownStatus.Counting;
+
     return (
       <TouchableOpacity
         disabled={ status === CountdownStatus.Counting }
         activeOpacity={0.75}
-        style={containerStyle}
+        style={[styles.container, style]}
         onPress={this.handlePress}
       >
-        <Text style={textStyle}>{promptTitle}</Text>
+        {isCounting && this.getCountingComponent()}
+        {!isCounting &&
+        <Text style={[styles.title, titleStyle]}>
+          {status === CountdownStatus.None ? title : overTitle}
+        </Text>
+        }
       </TouchableOpacity>
     );
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-countdown",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "A smart countdown component for react-native apps. You may use it to handle different status when request a verification code.",
   "main": "index.js",
   "scripts": {