Comments (6)
I can add a TextColumn component that you can put text directly into and style as you would the built-in Text component except that it will take props for fontSize, like: smFontSize={12}, mdFontSize={14}, lgFontSize={16} and xlFontSize={18} that correspond to different screen sizes. I'm not sure that's a really well thought out idea but let's think about it...
What do you think? @shukerullah
from react-native-responsive-grid.
I want my view (Images, Texts, ...) to look the same on different (Android & iOS) screen sizes. With help of scaling utils, I am scaling fonts to achieve same look on different screens.
As far as TextColumn component is concerned. I think thats good idea to have different font sizes
but lets wait for someone else views on this issue.
from react-native-responsive-grid.
I see problems with the advice given on S.O.
" use verticalScale on stuff like containers heights." <-- the right way per CSS is to use paddingTop/Bottom as percentage which becomes a percentage of the width. This way the height remains proportional to the width.
As for font, I have a problem with font size being too small on smaller sized devices (not legible) and then growing in size with larger device sizes. Font should simply be legible on all sizes, not unnecessarily bigger or smaller than the comfortable, legible size. But for stylistic purpose, I realize we sometimes need the font to grow and shrink, and the best way may be to auto-detect that child is Text or TextInput and if that's the case then apply one of: smFontSize={n}, mdFontSize={n}, lgFontSize={n} and xlFontSize={n}, where n is the font size value...
Keeping it open as you suggested.
from react-native-responsive-grid.
Still thinking about this...
from react-native-responsive-grid.
Will close this as I actually have no answer and no one else seems to have any interest. When I do, I will announce it, and add to Readme.
from react-native-responsive-grid.
To add my two cents, considering the component size is stepped by breakpoints, not continuous, there should not be a need for font size to be continuous. What I mean is that when going from landscape to portrait the component width shrinks from 100
to 80
, there is no need for intermediate font sizes, just two - one for larger and one for smaller component.
So the smFontSize
etc should work well enough.
Only remark - I would not like to set them always on all of my text components. I'd like some way to inherit them and perhaps even make them %
as in CSS - way up in the layout tree, I'd set base font size and perhaps lgFontSize="120%"
etc. And when I want some specific text to look smaller/bigger, I could override that, but not every text component.
from react-native-responsive-grid.
Related Issues (20)
- Question not an issue HOT 2
- Column heights and row widths HOT 1
- Errors on Column 'fullWidth' and on vAlign['stretch'] HOT 2
- Topic typo: univcersal -> universal HOT 1
- Parameterize cutoff points HOT 1
- 'Hidden' props not working HOT 1
- 'rtl' prop causes children to disappear HOT 5
- React 16.x causes exception with setState on unmounted component HOT 21
- setScreenInfo() recalculates unnecessarily HOT 6
- Bringing Pseudo Elements to RN HOT 5
- Keeping state when Grid is unmounted (for nested Grids) HOT 6
- Feature request: variable sizes HOT 9
- Uncaught TypeError: e.persist is not a function HOT 8
- How to create list of images with different sizes HOT 2
- Elements following the grid are over-writing the gird HOT 5
- web support HOT 2
- Is ImageBackground supported? HOT 1
- helpers.js uses module.exports while Column.js uses imports HOT 10
- Support typescript? HOT 1
- diffrent sizes grid doesn't work good HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-responsive-grid.