I am using React-native typescript for my app. I am really new in React-native. lots of syntax are new to me. For styling I am using styled-components. I have created global button components. So, I can use it in different components. I want to create conditional size and color of buttons. So, I can manipulate the size and color from parent components. I can do two conditional style props. But i don't know how to do multiple conditions in React-native.
This is my Button component
import React from 'react';import { Text, TouchableHighlight } from 'react-native';import styled, { css } from 'styled-components/native';export interface IButton { appearance?: "primary" | "secondary" | "dark" | "light"; children?: string | JSX.Element; size?: "small" | "medium" | "big"; className?: string; disabled?: boolean; loading?: boolean; style?: React.CSSProperties; onPress?: () => void;}const Button = ({ appearance, children, size, disabled, loading, style, onPress, className }: IButton) => { return (<ButtonContainer className={className} onPress={onPress} disabled={disabled} style={ disabled ? { ...style, "opacity": 0.5, "pointerEvents": `none` } : loading ? { ...style, "pointerEvents": `none` } : style }> {loading ? <Label>loading...</Label> : <Label>{children} </Label>}</ButtonContainer> );};const Label = styled.Text` color: white; font-weight: 700; align-self: center; padding: 10px;`const ButtonContainer = styled.TouchableHighlight< { appearance: IButton["appearance"]; // this is my typescript props I don't know how to connect them with my Button styling. }>` width: 50%; margin-top: 5px; border-color: grey; border-width: 2px; border-radius: 5px; border-radius: 4px; background-color:${props => props.primary ? "gray" : "blue"} //`export default Button;This is my the parent component where I am using my button component.
<Button size="medium" //this is does not work because I did not style yet onPress={() => console.log('hello')}> click me </Button>