search

oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.44k stars 2.12k forks source link

Incorrect vertical alignment of material community icons on iOS #1163

Open mjmasn opened 4 years ago

mjmasn commented 4 years ago

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
material-icon-android material-icon-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.

yacineblr commented 4 years ago

I have the same problem. Any news?

szholdiyarov commented 4 years ago

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
mjmasn commented 4 years ago

@szholdiyarov there's 8px above the X and 10px below it in your image. It's clearer if you zoom in.

Screenshot 2020-04-27 at 14 56 43
Relax594 commented 4 years ago

I have the same issues. Android is fine, its just iOS.

Android: perfectly centered grafik

iOS: not centered grafik

zabojad commented 2 years ago

Same issue with Ionicons on ios only. Has anyone found a solution?

Relax594 commented 2 years ago

@zabojad I fixed it by adding additional paddingTop and paddingLeft on iOS only grafik