search

akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.26k stars 951 forks source link

Text, Icon and maybe other components are not responsive. #1634

Open TechSaq opened 2 years ago

TechSaq commented 2 years ago

Text and Icon are not responsive according to different devices.

In iPad, Text looks small and if I add responsive font size to Text then Icon beside Text doesn't looks good.

Tablet - Normal UI image

Tablet - UI after adding responsive text image

Is there a way to make UI Kitten components to be responsive?

I thought to add device type checks for styling like width, height, fontSize but it didn't feel good to me. I would like to know what is the best approach to achieve responsiveness.

Please provide the suggestions or any resources, it will be really helpful.

Thanks.

greenfrvr commented 1 year ago

@TechSaq do I understand correctly, that the issue appears, when changing font size on a system level? (e.i. Larger Text on iOS, Font Size on Android)

ev3nst commented 1 year ago

Hello @greenfrvr,

I experienced similar if not the same issue. You can view the issue just by implementing demo ui-kitten ap and running on different sized devices. While text sizes looks perfectly normal on my android phone it looks too small in iOS (iPhone 14) simulator.

Does ui-kitten handle scaling/responsiveness in font-sizes ? Or should we use something like this instead --> https://github.com/nirsky/react-native-size-matters

Edit: When i clicked on Simulator -> Window -> Point Accurate simulator showed better results. Im not sure anymore. In any case it would be better to have more pre-defined text sizes. For example bigger versions of p1 and to be able to edit input label sizes as well they are especially small.