Reports

I asked chatGPT about the problem by sharing the same codes. So I need to use style prop instead of className as it is a react-native app, not React.js. Here is the updated Label component.

import React from 'react';
import { Text, TextStyle } from 'react-native';
import styled from 'styled-components/native'; // Use styled-components/native for React Native
import Colors from '../ui/colors';

type Props = {
  color?: string;
  children: React.ReactNode;
  style?: TextStyle;
};

export const Label: React.FC<Props> = ({ color, children, style }) => {
  return (
    <StyledText color={color} style={style}>
      {children}
    </StyledText>
  );
};

const StyledText = styled(Text)<Props>`
  color: ${(props) => (props?.color ? props.color : Colors.textColor)};
  font-size: 16px;
  font-family: Poppins-SemiBold;
`;

79299009