I have mockup in photoshop, resolution of mockup is 1242x2208 and font size 50px.
How can I recalculate for right font size for device?
For example:
enter image description here
Doubtly those are 50px, maybe 50dp, but try as following.
Import this:
import { PixelRatio } from 'react-native'
And try using this:
PixelRatio.getPixelSizeForLayoutSize(200)
Also, have a look at that PixelRatio.
Related
I have a react native project built on expo.
I need to view an image on screen with a style that is based on the width and height of that image.
How can I get the width and height of that image?
let's say the image uri is file:///storage/emulated/0/WhatsApp/Media/WhatsApp%20Images/IMG-20200117-WA0019.jpg
A solution with a code sample is highly appreciated..
React Native Image provide getSize() to get the size of remote images.
Image.getSize('uri', (width, height) => {
this.setState({ width, height });
});
For local images you can use resolveAssetSource()
Image.resolveAssetSource(source).width
Image.resolveAssetSource(source).height
Hope this helps you. Feel free for doubts.
I have expo 30 proyect and the fonts ( fontello icons ) load succesful now 3 months later I reopen the proyect before update expo and fonts does´t load even if I create a new proyect the fonts does´t
(I have already changed the import from
import { Font } from 'expo';
to
import * as Font from 'expo-font';)
here's a snack with the problem https://snack.expo.io/#emmalv/bold-banana
it's curious that in expo-cli when I run the same code and print the state of loading first return false and before true and inmediately show red screen saying that font has not been loaded through Font.loadAsync
I've tried wirtting everything in the app class instead of loading the fonts from another file and the behavior is the same
other thing I've tried is like the new documentation says, use expoAssetId
const expoAssetId = require("assets/fonts/custom-icon-font.ttf");
const Icon = createIconSetFromFontello(fontelloConfig, 'FontName', expoAssetId);
but I get another error
C.replace is not a function. (In 'C.replace(/\.(otf|ttf)$/,'')', 'C.replace' is undefined)
Expected Behavior
the icons load and show correctly
Actual behavior
when load throw an exception 'fontFamily "../assets/fonts/sowaicons" is not a system font and has not been loaded through Font.loadAsync.' and show a square instead of the icon
Enviroment
Windows 10
sdkVersion: 35.0.0,
expo: ^35.0.0",
expo-font: ~7.0.0
I created working example:
https://snack.expo.io/#djalik/custom-fonts
change CustomIcon code:
import { createIconSetFromFontello } from '#expo/vector-icons';
import fontelloConfig from '../assets/fonts/config.json';
// const ttf = require("../assets/fonts/sowaicons.ttf");
// import myfont from "../assets/fonts/sowaicons.ttf";
const Icon = createIconSetFromFontello(fontelloConfig, 'sowaicons');
and replace this.state.setState... to this.setState
I'm writing a React Native reusable component, which in some state needs to display an overlay on the screen. It seems that the way to do this, is using position:absolute. But that does not work very well in my situation, as the component is not child of the root-view and therefore cannot obtain the full screen area.
See this demo example on Snack:
https://snack.expo.io/#dennismadsen/position-absolute-test
In this case the position is obtained based on the position of the AssetExample element.
Here is how the above example looks like:
I would like the overlay to be positioned in the top of the screen like this:
How can I solve this?
Maybe get the width and height from Dimensions? that way you will always get 100%
import { .....,Dimensions,.... } from 'react-native';
const width= Dimensions.get('window').width;
const height= Dimensions.get('window').height;
I solved the problem by using Overlay from react-native-elements.
I'm also stuck with the same problem. I've created ListItem input fields where the DatePicker is inside it.
I have to set a width of a View in term of the current font size. So I am wondering if React Native have an analogue of the Web's 1em?
I have found a solution with PixelRatio:
import { PixelRatio } from 'react-native';
// ...
<View style={{ width: 100 * PixelRatio.getFontScale() }} />
But it is too complicated and obscure, in my opinion.
Is there a more simple and clean way to solve the problem?
Thank you.
After a long search, I eventually found an answer in the React Native API Reference:
width sets the width of this component.
It works similarly to width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
So the getFontScale() is the only possible solution.
Is there a way to programmatically find the height of the Header bar (the one that shows 'Hitchhiking Map' on the following screenshot? I.e. the height from the top of the screen to the bottom of the Header bar.
A cross-platform solution would be ideal.
Edit: I'm using React Navigation which renders the header bar.
Try using TotalNavHeight like so:
import { Navigator } from 'react-native'
// ...
let height = Navigator.NavigationBar.Styles.General.TotalNavHeight