BackgroundColor of tooltip donst work

[YisusMB]

Current Behavior Actually if i apply te prop backgroundColor keeps margins white & the arrow too how can i modify this? i let the code below and one screenshot to ilustrate the bug

Input Code

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

import Button from './ButtonTooltip';

import styles from './styleTooltip';

import type { Step } from './types';

type Props = {
  isFirstStep: boolean,
  isLastStep: boolean,
  handleNext: func,
  handlePrev: func,
  handleStop: func,
  currentStep: Step,
};

const Tooltip = ({
                   isFirstStep,
                   isLastStep,
                   handleNext,
                   handlePrev,
                   handleStop,
                   currentStep,
                 }: Props) => (
  <View style={{backgroundColor: '#433650'}}>
    <View style={styles.tooltipContainer}>
      <Text testID="stepDescription" style={styles.tooltipText}>{currentStep.text}</Text>
    </View>
    <View style={[styles.bottomBar]}>
      {
        !isLastStep ?
          <TouchableOpacity onPress={handleStop}>
            <Button>Skip</Button>
          </TouchableOpacity>
          : null
      }
      {
        !isFirstStep ?
          <TouchableOpacity onPress={handlePrev}>
            <Button>Previous</Button>
          </TouchableOpacity>
          : null
      }
      {
        !isLastStep ?
          <TouchableOpacity onPress={handleNext}>
            <Button>Next</Button>
          </TouchableOpacity> :
          <TouchableOpacity onPress={handleStop}>
            <Button>Finish</Button>
          </TouchableOpacity>
      }
    </View>
  </View>
);

export default Tooltip;

Expected behavior/code A clear and concise description of what you expected to happen (or code).

Environment

• Device: [Android 9 simulator]
• react-native-copilot: [ v2.4.3]
• react-native: [v0.57.3]
• react-native-svg: [v8.0.8]

Additional context/Screenshots

[YisusMB]

Actually i find a workaround, i check in the package 📦 , exactly /node_modules/react-native-copilot/src/components/CopilotModal.js in the line 133 & 137 i change the color #fff to my color, this is only for the arrow that points to the box, and the container are in the file styles.js inside the same folder, here are the styles of the container, exactly in the object 'tooltip' in the property backgroundColor changes the #fff to your color and this will work fine :D

--I drop here a screenshot to show how this works

I hope i helped btw we really need a solution to this, bc this is not the real solution...

[ManojTheProDev]

Try mapping "tooltipStyle: styles.tooltipContainer" in your copilot HOC and define "styles.tooltipContainer" in your stylesheet with specific styles.

Note: Please refer attached screen shot and below link to get more clarity. https://github.com/mohebifar/react-native-copilot/blob/master/src/components/Tooltip.js

[siderakis]

based on your suggestion I replaced:

arrow.borderBottomColor = '#fff';'

with:

arrow.borderBottomColor = this.props.tooltipStyle && this.props.tooltipStyle.backgroundColor || '#fff';