airbnb / airbnb/native-navigation

How to resize rightButtons image?

Open
#141 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.