I'm trying to display a ToolbarAndroid with a hamburger icon. I'musing the code:
_buildToolbar (msg) {
const navIcon = require("../../icons/menu.png");
return (
<ToolbarAndroid
title={msg}
style={{
height: 56,
alignSelf: "stretch",
}}
onIconClicked={this.props.openDrawer}
navIcon={navIcon}
/>);
}
The toolbar displays, but the nav icon doesn't. I get the warning Failed prop type: Invalid prop navIcon supplied to ToolbarAndroid. The file does exist, and looking under a debugger navIcon is defined. Looking for any help here. Using an Icon based toolbar is probably not a workable solution, as due to some of our customization features getting the right font would become difficult.
Edit:
Changing to:
<ToolbarAndroid
title={msg}
style={{
height: 56,
alignSelf: "stretch",
}}
onIconClicked={this.props.openDrawer}
navIcon={
{ uri: navIcon }}
/>);
Got rid of the warning but did not fix the display issue.
Edit2:
It looks like something with our build system here (which uses the same stack as our web build system, not the normal RN tools) is loading the files as a different data type- its loading them as data uris. I'm not sure what they normally are. But when the ToolbarAndroid is passed a uri, it assumes it will be a file, an http/https url, or a name of a drawable in our drawable folder. So it looks like we're going to need to debug our build system, or hard code this image (which being a hamburger icon isn't the end of the world).
The navIcon format seems to be specific:
Action Bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished action bar icon dimensions, corresponding to a given generalized screen density, are shown in the table below.
18 x 18 px
24 x 24 px
36 x 36 px
48 x 48 px
https://developer.android.com/guide/practices/ui_guidelines/icon_design_action_bar
Also you can use Icon.ToolbarAndroid from react-native-vector-icons :
https://github.com/oblador/react-native-vector-icons
This (ES6) code works on my app:
import navIcon from '../Images/navIcon.png'
...
<ToolbarAndroid
title={'test'}
style={{
height: 56,
alignSelf: 'stretch',
}}
onIconClicked={this.props.openDrawer}
navIcon={navIcon}
/>
The navIcon file:
Related
Default Source image is distorted on android release app.
Actual placeholder image size is 100x100 that is below.
<Image
style={{ height: 50, width: 50, borderWidth: 2, borderColor: '#fc6060' }}
source={ { uri: "https://host/static/08_l.jpg" }}
defaultSource={require('./../../assets/image/default_avtar_placeholder.png')}
resizeMode={"contain"} />
Why image is Distorted?
How to resolve this issue?
i know its very late .
Recently i also get stuck in this issue , what would i do just wrap Image Component into a View with some style like height and width and defaultSource is working fine according my requirements.
I had the same problem and by deleting the border styles I got it solved.
I am just trying to implement "edge light" Ref in react native.
I have this below code to achieve it.
<Layout style={{ flex: 1, paddingTop: 18, paddingBottom: 18, paddingLeft: 28, paddingRight: 28, borderWidth: 10, borderColor: '#36ABA5', justifyContent: 'center', backgroundColor: '#000', color: '#fff' }}> // All my code </Layout>
This seems to be working fine for the mobiles which are having straigh screens. But I am facing 2 issues,
The same is not working when the mobile has notch or the mobile's softkeys are enabled.
In Honor 8x the border itself is not coming when softkeys are disabled, when those are enabled, the border comes above the softkeys.
I tried calculating the window height, screen height and put the border. It seems to be not happening.
In Straight phone
In Notch phone:
In Softkeys enabled:
In Softkeys disabled:
Wanted similar to this, but not colorful/ Expected Results:
It's likely that Layout element from whatever library you are using automatically adjusts paddings to avoid unsafe areas (like notches and navigation bars). So don't use it, use a simple View with flex: 1
After that, if you are still not able to draw behind status bar and navigation bar, edit styles.xml (android/app/src/main/res/values/styles.xml), to add these 2 entires to <style name="AppTheme" ...> tag:
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
Answering my own question. I did not find any solution to trigger the inbuilt border lights from react-native or any other solution to replicate it.
I did an alternative solution, made the status bar colored and softkeys colored.
When i use tintColor property it fills the whole image to the color i specified to the tintColor property. Is i am using it wrong or its job is the same what i get? Can anyone tell for what purpose this property is used for <Image/> component and what is the proper use of this property? A little example will be more appreciated. Thanks !!!
Reference link
<Image
tintColor='#2d3436'
style={{width: 20, height: 15,margin:10}}
source={{uri: 'backsignup'}}
/>
This works fine for android but not in ios
If you want it to work on ios as well go with this ie. passing tint color with style instead of passing it as a props
<Image
style={{ width: 20,height: 23,margin: 10,tintColor: "#2d3436"}}
source={{ uri: "pdficon" }}
/>
Using tintColor in <Image> is not working.
Using it in the style of <Image> works.
Ref: https://github.com/facebook/react-native/issues/17124
As per the documentation, tintColor changes the color of all the non-transparent pixels to the tintColor (taken word for word).
So for example, in one of my React Native packages, I use have an increment asset - https://github.com/hannigand/react-native-ui-stepper/blob/master/assets/increment.png - which has a blue + sign. Using tintColor, another User can recolour the blue (non-transparent pixel) to any colour they desire.
I think this will clear out your confusion for tintColor property of Image.
React Native Styling Cheat Sheet - https://github.com/vhpoet/react-native-styling-cheat-sheet#image
When I run my React Native App on Android (real device or Simulator) the screens are to big somehow and get cut off at the bottom (looks almost like as if the missing part is as high as the status bar, but I don't know if it has something to do with it, check the last screenshot)
The parent view is a simple View with flex: 1 and the rest is relative to that.
Am I missing something on Android? It's my first Android App, I've only done iOS before.
I have the following code to test it:
return (
<View
style={{
backgroundColor: 'red',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height - 24, // 24 = status bar???
}}
>
<Text>{Dimensions.get('window').height}</Text>
</View>
);
I have figured out that it's exactly 24 to high - is this because of the status bar? If so, is it safe to use 24 or does it vary?
In the picture below I have inspected the same Text-component as rendered on Android on the left and iOS on the right. It seems that iOS renders the font in top of the Text-container.
I'm using the same TTF font-file for both Android and iOS. (I found an online reference to the font I'm using here.)
Any ideas how to make the font render the same for both Android and iOS?
Just to be clear, the difference is not caused by any styling (margin, font size, etc.). It's exactly the same.
I found a fix but it doesn't feel right. I think you should find another font that renders the same on each device.
You can play around with the lineHeight, padding and margin to get the same vertical alignment for your text components :
Ios:
instructions: {
fontFamily: 'Metric-Regular',
fontSize: 50,
lineHeight: 50,
paddingTop: 25,
marginBottom: -35,
marginTop: 35
}
Problem is with lineGap and ascender .ttf font file parameters. Fix them using ftxdumperfuser tool. Check https://medium.com/#martin_adamko/consistent-font-line-height-rendering-42068cc2957d