[Android] CopilotStep text color error when device dark mode

[nppull]

Environment

• Device: samsung galaxy a22
• OS: android 11
• react-native-copilot: v3.3.2
• react-native: v0.73.5

When the device is in dark mode, the tooltip backgroundcolor is white and the text color is also white.

[David-Singh-Negi]

Create a custom ToolTip Container. export const Tooltip = ({labels}: TooltipProps) => {
const [sectionComplete, setSectionComplete] = useState(true);
const [previousOrder, setPreviousOrder] = useState('explore');

const {
goToNext,
goToPrev,
stop,
currentStep,
isFirstStep,
isLastStep,
currentStepNumber,
} = useCopilot();

const navigation = useNavigation();

console.log('Current Order : ', currentStep?.order);
console.log('currentStepNumber : ', currentStepNumber);

const handleStop = () => {
void stop();
navigation.navigate('InAppDashboard', {
sectionComplete: sectionComplete,
order: previousOrder,
});
};

const handleNext = () => {
void goToNext();
};

const handlePrev = () => {
void goToPrev();
};

return (



{currentStep?.text}



{!isLastStep && (
<Button
onPress={handleStop}
label={labels.skip}
color={colors.white}
textStyle={{
color: colors.white,
fontSize: wp(3),
fontWeight: '400',
}}
customIcon={'log-out-outline'}
customIconStyle={{fontSize: wp(3.5)}}
customStyle={{
width: '30%',
alignSelf: 'center',
backgroundColor: colors.coralred,
borderRadius: wp(1),
height: wp(7),
padding: 0,
}}
iconSpace={2}
/>
)}

    {!isFirstStep && (
      <Button
        onPress={handlePrev}
        label={labels.previous}
        color={colors.white}
        textStyle={{
          color: colors.white,
          fontSize: wp(3),
          fontWeight: '400',
        }}
        customIcon={'arrow-back'}
        customIconStyle={{fontSize: wp(3.5)}}
        customStyle={{
          width: '20%',
          alignSelf: 'center',
          backgroundColor: colors.coraldarkgreen,
          borderRadius: wp(1),
          height: wp(7),
          padding: 0,
        }}
        iconSpace={2}
      />
    )}

    {!isLastStep ? (
      <Button
        onPress={handleNext}
        label={labels.next}
        color={colors.white}
        textStyle={{
          color: colors.white,
          fontSize: wp(3),
          fontWeight: '400',
        }}
        customIcon={'arrow-forward'}
        customIconStyle={{fontSize: wp(3.5)}}
        customStyle={{
          width: '20%',
          alignSelf: 'center',
          backgroundColor: colors.coralblue,
          borderRadius: wp(1),
          height: wp(7),
          padding: 0,
        }}
        iconSpace={2.2}
      />
    ) : (
      <Button
        onPress={handleStop}
        label={labels.skip}
        color={colors.white}
        textStyle={{
          color: colors.white,
          fontSize: wp(3),
          fontWeight: '400',
        }}
        customIcon={'exit-outline'}
        customIconStyle={{fontSize: wp(3.5)}}
        customStyle={{
          width: '30%',
          alignSelf: 'center',
          backgroundColor: colors.coralred,
          borderRadius: wp(1),
          height: wp(7),
          padding: 0,
        }}
        iconSpace={2}
      />
    )}
  </View>
</View>

);
}; Pass it here const InAppFExploreMainDashboardWithCopilot = () => {
const MARGIN = wp(2);
const WIDTH = Dimensions.get('window').width - 2 * MARGIN;

return (
<CopilotProvider
labels={{
previous: 'Back',
next: 'Next',
skip: 'Exit Module',
finish: 'Finish',
}}
tooltipComponent={Tooltip}
tooltipStyle={{
width: WIDTH,
maxWidth: WIDTH,
borderRadius: wp(3),
left: wp(2),
}}
androidStatusBarVisible
backdropColor={'rgba(0, 0, 0, 0.5)'}>


);
};