search

mohebifar / react-native-copilot

Step-by-step walkthrough tooltip for your react native app
MIT License
2.25k stars 408 forks source link

Change Arrow Color and backdrop color #91

Open AishwaryaSurana opened 5 years ago

AishwaryaSurana commented 5 years ago

Current Behavior The top arrow color cannot be changed backdrop color also don't work

I tried this for backdrop and it didn't work Input Code

export default copilot({
  animated: true, // Can be true or false
  overlay: 'svg', // Can be either view or svg
  backdropColor:"rgb(0, 0, 0, 0.9)",
  stepNumberComponent: StepNumber1,
  tooltipComponent:TooltipComponent1
})(Homepage);

Expected behavior/code There should be some way to customise arrow color and backdrop color, Arrow color is hard-coded here in CopilotModal.js :

 if (verticalPosition === 'bottom') {
      tooltip.top = obj.top + obj.height + MARGIN;
      arrow.borderBottomColor = '#fff';
      arrow.top = tooltip.top - (ARROW_SIZE * 2);
    } else {
      tooltip.bottom = layout.height - (obj.top - MARGIN);
      arrow.borderTopColor = '#fff';
      arrow.bottom = tooltip.bottom - (ARROW_SIZE * 2);
    }

and backdrop color is here:

 <Svg pointerEvents="none" width={this.state.canvasSize.x} height={this.state.canvasSize.y}>
   <AnimatedSvgPath
      ref={(ref) => { this.mask = ref; }}
      fill="rgba(0, 0, 0, 0.4)"
      fillRule="evenodd"
      strokeWidth={1}
      d={path(this.state.size, this.state.position, this.state.canvasSize)}
    />
 </Svg>

Environment

mohebifar commented 5 years ago

@AishwaryaSurana Can you try rgba instead of rgb? like backdropColor:"rgba(0, 0, 0, 0.9)".

AishwaryaSurana commented 5 years ago

I tried rgba as well. It didn't work.

ghost commented 5 years ago

Same problem with @AishwaryaSurana in Android

mohebifar commented 5 years ago

Are you using ViewMask? Changing the overlay color is currently possible only with SvgMask.

Manhazito commented 5 years ago

It would be awesome to be able to change the arrow and tooltip background colours. Currently they are hardcoded. As @AishwaryaSurana mentioned, arrow color is hardcoded in components/CopilotModal,js, and the tooltip background colour is hardcoded in components/style.js…

I was able to change the backdrop color after installing with command: npm install --save @okgrow/react-native-copilot@https://github.com/okgrow/react-native-copilot#master