Button text with custom font does not center vertically

[EdmundMai]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Current behavior: My button text does not center vertically

Expected behavior: I expect the text to be centered vertically

Steps to reproduce: Download this font: http://fontsgeek.com/fonts/Adobe-Caslon-Pro-Regular Put the .TFF file in src/assets/fonts/AdobeCaslonPro-Regular.ttf

App.js:

import * as Font from "expo-font";
import { Button } from "react-native-ui-kitten";
import { mapping, light as lightTheme } from "@eva-design/eva";

const App = () => {
  useEffect(() => {
    Font.loadAsync({
      "adobe-caslon-pro-regular": require("./src/assets/fonts/AdobeCaslonPro-Regular.ttf"),
    });
  }, []);

  return (
            <ApplicationProvider mapping={mapping} theme={lightTheme}>
                    <Button
                      textStyle={{ fontFamily: "adobe-caslon-pro-regular" }}
                      onPress={console.log}>
                      CREATE ACCOUNT
                    </Button>
            </ApplicationProvider>
  );
};

Result:

Related code:

insert short code snippets here

Other information:

OS, device, package version

    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",

[artyorsh]

Hi @EdmundMai This is because Eva Design System configured to use OpenSans fonts. Try switching to use them or try using another lineHeight style property. That's already known issue which we're unable to fix currently

Thanks

[artyorsh]

Btw I have the same issue on our another internal project, and I can share you solution if I find it

[EdmundMai]

@artyorsh Would you mind showing your solution? That would be really helpful

[artyorsh]

Would be glad to do this when I have it :)

[artyorsh]

@EdmundMai Sorry for the late reply. Did you resolve this? I found out that not every font is optimized to look well on Apple devices. Based on my needs, I was able to follow this answer and edit font values to make it look good on iPhone devices. This doesn't affect Android as it centers text by default