airbnb / airbnb/native-navigation
How to resize rightButtons image?
- Dominant language
- Java
- Stars
- 3.1k
- Forks
- 173
- PR merge metrics
- No merged PRs in 30d
Description
I need to use buttons with image on the right side of navigation bar, but unable to resize the image, so i initially followed the docs => http://airbnb.io/native-navigation/docs/api/navigator-config.html and tried to do something like this
```
render() {
const img = {
uri:'../Icon/filter.png',
height:23,
width:25
}
const img2 = {
uri:'../Icon/add.png',
height:23,
width:25
}
const btn = {
image:img
}
const btn2 = {
image:img2
}
let buttonArray = [btn, btn2]
return (
this.navBarButtonTapped(index)}
>
);
}
```
but got a JSON value error
then i tried to do this
```
import FilterImage from '../Icon/filter.png'
import AddImage from '../Icon/plus.png'
render() {
let buttonArray = [{image: AddImage}, {}]
return (
this.navBarButtonTapped(index)}
>
{
hasNoPromoAtAll ?
this.renderNoResult()
:
this.renderContent()
}
);
}
```
and it works, the images appear but i unable to resize the image that way, is there a way to do it properly?
**Edit**
my first way above works with uri being the name of the image asset on the native side (xcasset on iOS), but when i tried to define the height and the width, i got this error :`Image source size {60, 60} does not match loaded image size {30, 30}.`
Contributor guide
Research direction
Start with the navigator-config documentation and the rightButtons image definitions shown in the issue. Reproduce the JSON value error and the image-size mismatch using the provided examples; done means rightButtons images can be resized without either error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100