mohebifar / mohebifar/react-native-copilot

BackgroundColor of tooltip donst work

Open
#129 3 comments 0 reactions 0 assignees View on GitHub

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
Captura de Pantalla 2019-06-14 a la(s) 18 06 54

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.