More options to customize tooltip and additional navigator

README.md

@@ -123,6 +123,8 @@ You can customize the tooltip by passing a component to the `copilot` HOC maker.
 
 ```js
 const TooltipComponent = ({
+  tooltipPosition,
+  arrowPosition,
   isFirstStep,
   isLastStep,
   handleNext,
@@ -166,6 +168,28 @@ copilot({
 })(RootComponent)
 ```
 
+### Custom navigator 
+You can add a custom navigator, by passing a React Component to the `copilot` HOC maker. 
+
+This is the same prop as [tooltip](#custom-tooltip-component).
+
+```js
+const customNavigator = ({
+  isFirstStep,
+  isLastStep,
+  handleNext,
+  handlePrev,
+  handleStop,
+  currentStep,
+}) => (
+  // ...
+);
+
+copilot({
+  customNavigator: customNavigator
+})(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.
 

src/components/CopilotModal.js

@@ -21,7 +21,8 @@ type Props = {
   overlay: 'svg' | 'view',
   animated: boolean,
   androidStatusBarVisible: boolean,
-  backdropColor: string
+  backdropColor: string,
+  customNavigator?: React$Component,
 };
 
 type State = {
@@ -263,23 +264,40 @@ class CopilotModal extends Component<Props, State> {
           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]}>
+      TooltipComponent ? null : (
+        <Animated.View key="arrow" style={[styles.arrow, this.state.arrow]} />
+      ),
+      TooltipComponent ? (
         <TooltipComponent
+          key="tooltip"
+          arrowPosition={[this.state.arrow, { position: 'absolute' }]}
+          tooltipPosition={[this.state.tooltip, { position: 'absolute' }]}
           isFirstStep={this.props.isFirstStep}
           isLastStep={this.props.isLastStep}
           currentStep={this.props.currentStep}
           handleNext={this.handleNext}
           handlePrev={this.handlePrev}
           handleStop={this.handleStop}
         />
-      </Animated.View>,
+      ) : (
+        <Animated.View key="tooltip" style={[styles.tooltip, this.state.tooltip]}>
+          <Tooltip
+            isFirstStep={this.props.isFirstStep}
+            isLastStep={this.props.isLastStep}
+            currentStep={this.props.currentStep}
+            handleNext={this.handleNext}
+            handlePrev={this.handlePrev}
+            handleStop={this.handleStop}
+          />
+        </Animated.View>
+      ),
     ];
   }
 
   render() {
     const containerVisible = this.state.containerVisible || this.props.visible;
     const contentVisible = this.state.layout && containerVisible;
+    const CustomNavigator = this.props.customNavigator;
 
     return (
       <Modal
@@ -295,6 +313,16 @@ class CopilotModal extends Component<Props, State> {
         >
           {contentVisible && this.renderMask()}
           {contentVisible && this.renderTooltip()}
+          {!!CustomNavigator && (
+            <CustomNavigator
+              isFirstStep={this.props.isFirstStep}
+              isLastStep={this.props.isLastStep}
+              currentStep={this.props.currentStep}
+              handleNext={this.handleNext}
+              handlePrev={this.handlePrev}
+              handleStop={this.handleStop}
+            />
+          )}
         </View>
       </Modal>
     );

src/hocs/copilot.js

@@ -35,6 +35,7 @@ const copilot = ({
   animated,
   androidStatusBarVisible,
   backdropColor,
+  customNavigator,
   verticalOffset = 0,
   wrapperStyle,
 } = {}) =>
@@ -193,6 +194,7 @@ const copilot = ({
               animated={animated}
               androidStatusBarVisible={androidStatusBarVisible}
               backdropColor={backdropColor}
+              customNavigator={customNavigator}
               ref={(modal) => { this.modal = modal; }}
             />
           </View>