mohebifar / mohebifar/react-native-copilot
BackgroundColor of tooltip donst work
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.4k
- Forks
- 428
- PR merge metrics
- No merged PRs in 30d
Description
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

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Tooltip component shown in the report and reproduce the styling issue using react-native-copilot v2.4.3 on the Android 9 simulator. Inspect how the tooltip margins and arrow are rendered relative to the supplied backgroundColor; done means the configured color covers the tooltip margins and arrow as shown by the screenshot.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100