Merge branch 'master' of https://github.com/okgrow/react-native-copilot

README.md

@@ -114,7 +114,7 @@ You can specify the overlay when applying the `copilot` HOC:
 ```js
 copilot({
   overlay: 'svg', // or 'view'
-  animated true, // or false
+  animated: true, // or false
 })(RootComponent);
 ```
 
@@ -138,6 +138,24 @@ copilot({
 })(RootComponent)
 ```
 
+### Custom step number component
+You can customize the step number by passing a component to the `copilot` HOC maker. If you are looking for an example step number component, take a look at [the default step number implementation](https://github.com/okgrow/react-native-copilot/blob/master/src/components/StepNumber.js).
+
+```js
+const StepNumberComponent = ({
+  isFirstStep,
+  isLastStep,
+  currentStep,
+  currentStepNumber,
+}) => (
+  // ...
+);
+
+copilot({
+  stepNumberComponent: StepNumberComponent
+})(RootComponent)
+```
+
 ### Custom components as steps
 The components wrapped inside `CopilotStep`, will receive a `copilot` prop of type `Object` which the outermost rendered element of the component or the element that you want the tooltip be shown around, must extend.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okgrow/react-native-copilot",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "description": "Make an interactive step by step tour guide for you react-native app",
   "main": "src/index.js",
   "private": false,

src/components/CopilotModal.js

@@ -1,7 +1,8 @@
 // @flow
 import React, { Component } from 'react';
-import { Animated, Easing, View, Text, NativeModules, Modal, StatusBar, Platform } from 'react-native';
+import { Animated, Easing, View, NativeModules, Modal, StatusBar, Platform } from 'react-native';
 import Tooltip from './Tooltip';
+import StepNumber from './StepNumber';
 import styles, { MARGIN, ARROW_SIZE, STEP_NUMBER_DIAMETER, STEP_NUMBER_RADIUS } from './style';
 
 type Props = {
@@ -16,6 +17,7 @@ type Props = {
   easing: ?func,
   animationDuration: ?number,
   tooltipComponent: ?React$Component,
+  stepNumberComponent: ?React$Component,
   overlay: 'svg' | 'view',
   animated: boolean,
   androidStatusBarVisible: boolean,
@@ -39,6 +41,7 @@ class CopilotModal extends Component<Props, State> {
     easing: Easing.elastic(0.7),
     animationDuration: 400,
     tooltipComponent: Tooltip,
+    stepNumberComponent: StepNumber,
     // If react-native-svg native module was avaialble, use svg as the default overlay component
     overlay: typeof NativeModules.RNSVGSvgViewManager !== 'undefined' ? 'svg' : 'view',
     // If animated was not specified, rely on the default overlay type
@@ -235,20 +238,28 @@ class CopilotModal extends Component<Props, State> {
   }
 
   renderTooltip() {
-    const { tooltipComponent: TooltipComponent } = this.props;
+    const {
+      tooltipComponent: TooltipComponent,
+      stepNumberComponent: StepNumberComponent,
+    } = this.props;
 
     return [
       <Animated.View
         key="stepNumber"
         style={[
-          styles.stepNumber,
+          styles.stepNumberContainer,
           {
             left: this.state.animatedValues.stepNumberLeft,
             top: Animated.add(this.state.animatedValues.top, -STEP_NUMBER_RADIUS),
           },
         ]}
       >
-        <Text style={[styles.stepNumberText]}>{this.props.currentStepNumber}</Text>
+        <StepNumberComponent
+          isFirstStep={this.props.isFirstStep}
+          isLastStep={this.props.isLastStep}
+          currentStep={this.props.currentStep}
+          currentStepNumber={this.props.currentStepNumber}
+        />
       </Animated.View>,
       <Animated.View key="arrow" style={[styles.arrow, this.state.arrow]} />,
       <Animated.View key="tooltip" style={[styles.tooltip, this.state.tooltip]}>

src/components/StepNumber.js

@@ -0,0 +1,19 @@
+// @flow
+import React from 'react';
+import { View, Text } from 'react-native';
+
+import styles from './style';
+
+type Props = {
+  currentStepNumber: number,
+};
+
+const StepNumber = ({
+  currentStepNumber,
+}: Props) => (
+  <View style={styles.stepNumber}>
+    <Text style={[styles.stepNumberText]}>{currentStepNumber}</Text>
+  </View>
+);
+
+export default StepNumber;

src/components/style.js

@@ -46,18 +46,21 @@ export default StyleSheet.create({
   tooltipContainer: {
     flex: 1,
   },
-  stepNumber: {
+  stepNumberContainer: {
     position: 'absolute',
     width: STEP_NUMBER_DIAMETER,
     height: STEP_NUMBER_DIAMETER,
+    overflow: 'hidden',
+    zIndex: ZINDEX + 1,
+  },
+  stepNumber: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
     borderWidth: 2,
     borderRadius: STEP_NUMBER_RADIUS,
     borderColor: '#FFFFFF',
     backgroundColor: '#27ae60',
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: ZINDEX + 1,
   },
   stepNumberText: {
     fontSize: 10,

src/hocs/copilot.js

@@ -29,6 +29,7 @@ type State = {
 const copilot = ({
   overlay,
   tooltipComponent,
+  stepNumberComponent,
   animated,
   androidStatusBarVisible,
 } = {}) =>
@@ -50,6 +51,14 @@ const copilot = ({
         };
       }
 
+      componentDidMount() {
+        this.mounted = true;
+      }
+
+      componentWillUnmount() {
+        this.mounted = false;
+      }
+
       getStepNumber = (step: ?Step = this.state.currentStep): number =>
         getStepNumber(this.state.steps, step);
 
@@ -154,14 +163,6 @@ const copilot = ({
         });
       }
 
-      componentDidMount() {
-        this.mounted = true;
-      }
-
-      componentWillUnmount() {
-        this.mounted = false;
-      };
-
       render() {
         return (
           <View style={{ flex: 1 }}>
@@ -181,6 +182,7 @@ const copilot = ({
               isLastStep={this.isLastStep()}
               currentStepNumber={this.getStepNumber()}
               currentStep={this.state.currentStep}
+              stepNumberComponent={stepNumberComponent}
               tooltipComponent={tooltipComponent}
               overlay={overlay}
               animated={animated}