Objective

I am trying to switch the background color button if the off props are passed. Something like, if the button contains de off, the background color button will red and if not contains, the background color will green.

What happening?

I am passing the props but the color not change and the two buttons that I have stay green.

Code

Home

<ContainerRow><Button onPress={handleConnectBluetooth}>Conectar</Button><Button onPress={handleDesconnectBluetooth} off={false}>        Desconectar</Button></ContainerRow>

Here the button with the text Desconectar needs to be red.

Button component

import React from 'react';import {RectButtonProperties} from 'react-native-gesture-handler';import {Container, ButtonText} from './styles';interface ButtonProps extends RectButtonProperties {  children: string;  off?: boolean;}const Button: React.FC<ButtonProps> = ({children, off, ...rest}) => (<Container off {...rest}><ButtonText>{children}</ButtonText></Container>);export default Button;

Here the props off inside the parameters, say off is defined but never used.

Button style

import styled from 'styled-components/native';import {RectButton} from 'react-native-gesture-handler';interface IButtonProps {  off: boolean;}export const Container = styled(RectButton)<IButtonProps>`  height: 40px;  background: ${(props) => (props.off ? '#29ed1f' : '#ff0000')};  border-radius: 10px;  margin-top: 8px;  justify-content: center;  align-items: center;`;export const ButtonText = styled.Text`  color: #312e38;  font-size: 18px;`;