react-native-vector-icons Incorrect vertical alignment of material community icons on iOS

Incorrect vertical alignment of material community icons on iOS

Open mjmasn opened this issue 4 years ago • 6 comments

[x] Review the documentation: https://github.com/oblador/react-native-vector-icons
[x] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 1.21 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: ^0.60.5 => 0.60.6

Description

With code like below, on Android the icon is perfectly centered in the View, whereas on iOS the icon is shifted a couple of px up from where it should be. We're mixing this with a custom icon font, so it's really obvious that certain icons are misaligned in a toolbar for example.

import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'

const MyComponent = () => {
  return (
    <View style={{width: 48, height: 48, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red'}}>
      <MaterialIcon name="close" size={24} color="#000" />
    </View>
  )
}

Android	iOS

Ignoring the crappy quality of the screenshot, you can see it's centered perfectly	On iOS there is a small offset

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

See above but let me know if you need a full reproduction repo.

Apr 06 '20 17:04 mjmasn

I have the same problem. Any news?

Apr 10 '20 16:04 yacineblr

hey @mjmasn

While I can see that there is an offset in your screenshots I can't reproduce it on my side. I believe this is something to do with your views?

My screenshot is taken on IOS Simulator iPhone 11. The icon container is in black and the icon itself is white and I could not see any offsets. Screen Shot 2020-04-26 at 13 59 29