search

EQuimper / twitter-clone-with-graphql-reactnative

164 stars 71 forks source link

badge count in tabbar ? #28

Closed kaiyes closed 7 years ago

kaiyes commented 7 years ago

Hi, Can you do this please ? Notification count in the react navigation tab bar icons. Obviously this will be a subscription. Hooking it with the react navigation tab bar icons is the key.

badge

Or pointing me to the right direction will be huge help as well. Thanks as always

EQuimper commented 7 years ago

yes gonna make a video about it, thank for the idea didn't think of it

kaiyes commented 7 years ago

I think using redux will be simpler.

Found this. https://github.com/react-community/react-navigation/issues/1941

baldurpan commented 7 years ago

I managed to add a badge via tabBarIcon in navigationOptions. Works quite well in iOS but in Android it has some transparency (like opacity 0.7) unless the tab is focused. Very annoying.

kaiyes commented 7 years ago

@baldurpan me too. I was able to add a badge as well. But I wasn't able to add subscription to that badge icon.

EQuimper commented 7 years ago

I think if you need to put that in subscriptions you gonna need to have it as his own component or wrote your own tabbar component. With React-Navigation thats pretty easy. I check this thing tonight maybe I can find something

kaiyes commented 7 years ago

This is what I have right now. But its static.

screenshot 2017-09-27 12 55 21

EQuimper commented 7 years ago

Did you connect the tab for ? I mean this thing can be extends as a component I did on one of my app, and I think you can plug a subscriptions on this on

kaiyes commented 7 years ago

Okay. I was able to implement a custom component in react-navigation's tabBar component. Also, I was able to add redux to change the number of the notification icon. But I have two problems :

  1. Subscription doesn't start if I don't go over to the tab first. In other words, subscription needs to be called from the component first. Otherwise it doesn't work.

  2. I need a way to change the badge icon number to 0/null once the icon has been clicked. (emulating a seen effect)

kaiyes commented 7 years ago

tried another method. Made a notifications collection and fed notification query and subscription to icon component. However, the icon component doesn't take the subscription. Same subscription works in a normal page. However, after going to a page where the component is , the same component in the navbar starts working. @EQuimper what do you think ?

kaiyes commented 7 years ago

Finally was able to make the badge count reactive from the get-go. Answer lies in https://github.com/EQuimper/twitter-clone-with-graphql-reactnative/issues/39