How Can I Create Cross Platform Icon In React Native?

I am building a signup form and I want to add icons but the icon should look different on different platform for example If I use Ionicons it should show ios-person on ios device a

Solution 1:

You could determine the icon based on the platform, like so:

import { Platform } from'react-native';

<Ionicons
  name={Platform.select({
    ios: 'ios-person',
    android: 'md-person',
  })}
/>

If the only difference is ios and md.

<Ionicons 
  name={`${Platform.OS === "ios" ? "ios" : "md"}-person`}
/>

A re-usable component perhaps,

constIcon = ({ name }) => (
  <Ioniconsname={`${Platform.OS === "ios" ? "ios" : "md"}-${name}`}
  />
)

// Usage
<Icon name="person" />

Once more, this assumes the only thing different is ios and md.

Edit

Updating the name and size depending on each platform can be done like so

<Ionicons
  {
    ...Platform.select({
      ios: {
        name: 'ios-person',
        size: 25,
      },
      android: {
        name: 'md-person',
        size: 35
      }
    })
  }
/>