alinz / react-native-tabbar Goto Github PK

I've managed to get icons showing on iOS by including ttf file into ios directory and putting it in info.plist
How do I do same with Android?
In android, it show bunch of chinese words instead of Icons!

I included "react-native-tabbar": "^0.3.4" into my package.json.
And I run 'npm install'.

And I used following code snippets in my application.

import Tabbar from 'react-native-tabbar';

let glypy = glypyMapMaker({
  Home: 'e900',
  Camera: 'e901',
  Stat: 'e902',
  Settings: 'e903',
  Favorite: 'e904',
});

let {
  Tab,
  RawContent,
  IconWithBar,
  glypyMapMaker
} = Tabbar;


// this block has error of 'undefined' function
let glypy = glypyMapMaker({
  Home: 'e900',
  Camera: 'e901',
  Stat: 'e902',
  Settings: 'e903',
  Favorite: 'e904',
});

But I get error of 'undefined' function.
Looking for your help.
Thanks

I have read closed Issues, But still I can't style the tabbar.
I want a tab bar without a border. and also want to change the color of font when it is selected.
How can I change these parameters?
const color = selected? onActiveColor : onInactiveColor
const barColor = selected? onActiveColorBar : onInactiveColorBar;
const borderWidth = selected? 2 : 1;
const padding = selected? 0 : 1;

When I rotate the phone Tabbar would not extend to fill the screen. I attached the screenshot.

not entirely sure if that's related to tabbar, but when I run it on iOS I get tons of assertion errors when scrolling in the view.. short snipped:

Aug  4 14:15:39 Davids-MacBook-Air routined[29572] <Error>: CoreLocation: Error occurred while trying to retrieve motion state update: CMErrorDomain Code:104
Aug  4 14:15:41 Davids-MacBook-Air assertiond[29587] <Error>: assertion failed: 15A278b 13E230: assertiond + 15801 [3C808658-78EC-3950-A264-79A64E0E463B]: 0x1
Aug  4 14:15:41 Davids-MacBook-Air Unknown[29587] <Error>: 
Aug  4 14:15:41 Davids-MacBook-Air assertiond[29587] <Error>: assertion failed: 15A278b 13E230: assertiond + 15801 [3C808658-78EC-3950-A264-79A64E0E463B]: 0x1
Aug  4 14:15:41 Davids-MacBook-Air Unknown[29587] <Error>: 

still active?

As title, thanks .

I started playing around with this component but couldn't get it running on Android. Here is my render() function:

render: function() {
    var state = this.state;
    return (
      <Tabbar
        selected={state.selectedTab}
        onTabItemPress={this.onTabItemPress}
      >
        <Tabbar.Item name="shop">
          <Tabbar.Item.Content>
            <View style={{ flex: 1, backgroundColor: 'blue' }}>Asd</View>
          </Tabbar.Item.Content>
          <Tabbar.Item.Icon>
            <Text>Icon1</Text>
          </Tabbar.Item.Icon>
        </Tabbar.Item>
      </Tabbar>
    );
  },

When I try to run this, I get the red screen of death saying Trying to add unknown view tag: 8 detail: View tag:7

how to specify icon in different font-family?
waiting for your docs ....

thanks.

how to use this tabbar.. I dont seem to find a proper documentation for this.

How to load the content of each tab when the tab is active. Is there a way to load the tab content on demand, when the tab is clicked.

The same code is working perfectly fine iOS though. Also please note that the code which has been commented out also works fine. What might I be doing wrong? Thanks.

How can I change things like backgroundColor for the Tabbar and maybe the color of the Icons, depending on wether they are active or not?

EDIT: OK for changing Items based on active state I can simply access this.state.selectedTab, but it remains unclear to me how to change the general Tabbar styles (background color, ect) and the individual Item styles (might want to have a different background color for the selected item).

Hi, alinz.
How to catch the TabBarItem on clicked event? Is there a callback function?

I used this Tabbar perfectly on my iOS Version, but trying to use it for my Android App crashes. Does it only work on iOS? I saw that in the Readme it is mentioned that it would work technically on Android, did someone get it working?

Best Regards

i have made tabbar at the bottom of screen but i need it at top of the screen. Will it be possible?

Hi ,

Just running the SimpleTabbar example on an android emulator.

I've looked over the styling, and it's not immediately clear what the problem is. It's a very similar styling setup to react-native-tabs, but the react-native-tabs does not have the animations stuff.

Could fix this by adding a bottom to the styling, but that's not elegant.

I tried this on a few emulators on API platforms 22 and 23. Running Ubuntu 16.04.

Cheers!

Hi, I've installed your module and it is present in my node_modules folder. However when I am trying to require it I have this error message in the appication: Requiring unknown module "react-native-tabbar/jsx/index.js".

Is there something I am missing?

Thanks,
Paul

Hi
How can I run the example code without copy/pase Codes?
Thanks

Could you please add this example to the readme? Thanks!

I'm creating bilingual android application (English/Arabic)
And I want when user select Arabic language the first tab display in the right side instead of left side
What is the best way to do that?

Hi there,
Is there a way to highlight or change the image shown when a tab is selected?
I checked the examples, couldn't see anything in there.

Thanks.

Is there a way to avoid this?

Ps. This is great. It works on Android, out-of-the-box, too.
Thanks @alinz !

If you were to have the following:

Tab1 : Navigator 1 with Component A as initial stack item
Tab2 : Navigator 2 with Component B as initial stack item
Tab3 : Empty View

Clicking between Tabs 1 and 2 will not change the content, but clicking to tab3 then back to either Tab1 or 2 will update the content correctly (albeit it having lost its previous 'state').

Hi,
How can I use another class as the content of one of my tabs?
Let's say I have a test.js, and in it I have a text box. Instead of:
content = This is the content 1

I want to use that class to render one of my tabs. Is that possible here?

Thanks for your help in advance.

now the text's font size is hard coded as 12,

      <View style={{ paddingTop: 5 }}>
        <Text style={{ fontSize: 12, color: color }}>{label}</Text>
      </View>

I think it's better to add a prop for the text style.

I like what you've done with the new PR. Any chance I could get some help here?

I'm wondering how to do the highlighted line above the selected text...

any help would be appreciated

I'm getting very slow response times testing on a device. Takes a few seconds to switch tabs. Sometimes unresponsive. Need to look into whats causing it but thought I would raise it here. Made sure my bundle is not in dev mode and app is compiled in release mode.

Device is iPhone 4S iOS 7.1

Is it possible to use react-native-vector-icons with IconWithBar ?

https://github.com/oblador/react-native-vector-icons

Any suggestion are appreciated.

Thank you for a great tab bar!

Which files using code 'screenPhysicalPixels.width'?

I get the following error trying to run the WithIcons examples project:

RCTWebSocketModule.connect was called with 4 arguments, but expects 2

Currently, when a tab bar item is pressed, there is no feedback at all. It would be great to be able to customize the tab bar item (change icon color, background of the item, etc, much like how buttons have a pressed state).