React-native-router-flux: Change TabIcon from the scene

[Amurmurmur]

Version

Tell us which versions you are using:

• react-native-router-flux v3.35.0
• react-native v0.33.0

Is there a way to change the tabicon to an image when the scene has rendered and parsed the data from the api.

Or is it possible to do it at the stage when router is created?

The scenario is I want to display the profile picture in the tab once the url of the image is loaded from the backend.

Thank you very much in advance!

[Amurmurmur]

Has anyone ever tried to accomplish it ? Its sort of similar to icon badges.

[mlevkovsky]

trying to achieve the same effect. I want to add an icon badge to a tab icon, but only after I get an API response

[Amurmurmur]

I've thought about a workaround, basically I think one of the ways, is to connect tabbar to the store, and load image from the store when state changes after an api request has been completed successfully.

[mlevkovsky]

That's exactly what I am trying now lol.
It's just weird because it seems that custom props don't trigger the component will receive props methods in the icon :/

[Amurmurmur]

Well doesnt matter, if you connect the tabbar properly, it should receive all the props anyway that you map in mapStateToProps. Let me know if you get it working, I'll try it as soon as I finish other components.

[mlevkovsky]

@Amurmurmur ya that solution worked just fine.
I connected the tab icon to the store and handled everything in there

[Amurmurmur]

Sweet, if you could provide any example code where tabicon is replaced with a badge number or an image, just to make double sure, we are thinking about the same approach.
Thank you very much in advance!

[mlevkovsky]

sure thing. Just give me a bit

[iossocket]

@mlevkovsky Hi, I meet the same problem, adding a badge from response. could you please share some example code? Thanks a lot.

[Amurmurmur]

@iossocket
Yes, just create a custom TabIcon component and pass it to the scene like so:

import MyCustomTabIconComponent from './TabIcon'
<Scene
title="MyScene"
name="MyScene"
key="MyScene"
icon={MyCustomTabIconComponent} />

In your TabIcon, connect it to the store like so:

import { connect } from 'react-redux'

function mapStateToProps(state, props) {
    return {
        profilePicture: state.yourProfilePic,
    }
}

class MyCustomTabIconComponent extends Component {
  render() {
   return(
<View style={{styles.tabbarIconContainerStyle}}>
        <Image source={{ uri: this.props.profilePicture }} style={{
                                    width: 24,
                                    height: 24,
                                    borderRadius: 12,
                                    backgroundColor: 'transparent',
                                }} />
      </View>
   )
  }
}

export default connect(mapStateToProps)(MyCustomTabIconComponent);

Hope this helps 👍

[iossocket]

@Amurmurmur Thanks a lot 👍 👍 👍

[Amurmurmur]

@iossocket Glad to help, I guess we can close it 👍