In styled components, how can I give different styles for each platform and device?-CodePudding

I'm using styled-components in React native. For me, I use a library called DeviceInfo to tell if this device is a tablet or a phone.

isTablet will be true if the device is a tablet and false if it is a phone.

I gave the isTablet prop to the component called NavigateCon and gave it red when it was true and orange when it was false.

However, I want to go further here and give red when the os of this device is android and tablet, orange when android and mobile phone, yellow when os is ios and ipad, and green when ios and mobile phone.

How should I fix my code? I'd like to try this with a styled component.

this is my code

import { Platform } from "react-native";
import DeviceInfo from 'react-native-device-info';

const NavigateCon = styled.TouchableOpacity<Device>`
  background-color: ${props => (props.tablet ? 'red' : 'orange')};
`;

interface Device {
  tablet: boolean;
}


const Main = () => {
  const isTablet = DeviceInfo.isTablet();
  return (
<NavigateCon tablet={isTablet}>
</NavigateCon>
  )

CodePudding user response：

You may try this

import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const NavigateCon =
  styled.TouchableOpacity <
  Device >
  `
  background-color: ${(props) =>
   props.os === 'android'
  ? (props.tablet
    ? 'red'
    : 'orange') :
  (props.iPad ?
    'yellow'
    : 'green')};
`;

interface Device {
  tablet: boolean;
  os: String;
}

const Main = () => {
  const isTablet = DeviceInfo.isTablet();
  const os = Platform.OS;
  const isPad = os === 'ios' ? Platform.isPad : false;
  return <NavigateCon tablet={isTablet} os={os} iPad={isPad}></NavigateCon>;
};