search

corymsmith / react-native-icons

Quick and easy icons in React Native
MIT License
1.14k stars 141 forks source link

[TabBarItem] Custom tabbar icons won't work #134

Closed elisei-timofte closed 8 years ago

elisei-timofte commented 8 years ago

Hi. I followed your instructions for getting started with react-native-icons and I've tested a basic icon and it worked.

<Icon
     name='fontawesome|user'
     size={50}
     color='#333333'
     style={{width: 200, height: 200}}
/>

If I try to customize the tabbar I get the following error: [error][tid:com.smixxtape.reactnativeicons][SMXTabBarItemManager.m:55] No icon font named '(null)'

The tabBar code is this: 

<TabBarIOS.Item
  key              = {key}
  title            = {data.title}
  iconName         = {'fontawesome|user'}
  iconSize         = {50}
  selected         = {this.selected(ref)}
  onPress          = {() => this.onPress(ref)}
</TabBarIOS.Item>
corymsmith commented 8 years ago

Can you share more of the code? Would be good to see the requires and declarations

On Wed, Nov 11, 2015 at 4:56 AM, elisei-timofte notifications@github.com wrote:

Hi. I followed your instructions for getting started with react-native-icons and I've tested a basic icon and it worked. <Icon name='fontawesome|user' size={50} color='#333333' style={{width: 200, height: 200}} /> If I try to customize the tabbar I get the following error: [error][tid:com.smixxtape.reactnativeicons][SMXTabBarItemManager.m:55] No icon font named '(null)' The tabBar code is this: `<TabBarIOS.Item key = {key} title = {screenData.short_title} iconName ={'fontawesome|user'} selectedIconName ={'fontawesome|user'} iconSize ={50} selected = {this.selected(ref)} onPress = {() => this.onPress(ref)}

</TabBarIOS.Item>`

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/134

elisei-timofte commented 8 years ago

Sure. This are my requires:

var React = require('react-native');

var {
  StyleSheet,
  View,
  ScrollView,
  Text,
  Navigator,
} = React;

var { TabBarIOS, } = require('react-native-icons');

I have to mention that if use the react native TabBarIOS (not the one from react-native-icons) the error disappears

corymsmith commented 8 years ago

I'd remove the first TabBarIOS from the React require as it may be conflicting. Also, do you only have 1 tab item? If not can you share the code for the other tab items. The code you've posted looks like it should work

On Wed, Nov 11, 2015 at 7:20 AM, elisei-timofte notifications@github.com wrote:

Sure. This is my requires:

var React = require('react-native');
var {
  StyleSheet,
  View,
  ScrollView,
  Text,
  Navigator,
  TabBarIOS,
} = React;
var { TabBarIOS, } = require('react-native-icons');

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/134#issuecomment-155795220

elisei-timofte commented 8 years ago

You gave me an idea with your question. I had one TabBarItem that used systemIcon:

<TabBarIOS.Item
              systemIcon="search"
              selected={this.state.selectedTab == "tabSearch"}
              onPress={ () => this.setState({selectedTab: 'tabSearch'}) } >
</TabBarIOS.Item>

And I realized that it is possible that this one to break. And it was indeed. I've added custom icons for that one also and now it is working

elisei-timofte commented 8 years ago

From this I understand that systemIcons are no longer available, aren't they?

corymsmith commented 8 years ago

This particular tab bar only allows icon fonts for icons, would be great to support system icons but don't have the time to add support at the moment. I'd gladly accept a PR for it though :)

On Wed, Nov 11, 2015 at 8:06 AM, elisei-timofte notifications@github.com wrote:

From this I understand that systemIcons are no longer available, aren't they?

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/134#issuecomment-155806043

kalyan4 commented 8 years ago

I want BOOK MY SHOW APP like tabbar item change feature in objective - c and tried this one -> it's applicable for only one item Plz help me to overcome

import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

corymsmith commented 8 years ago

I have no idea what you are trying to do, can you explain?

On Fri, Nov 13, 2015 at 5:48 AM, kalyan4 notifications@github.com wrote:

I want BOOK MY SHOW APP like tabbar item change feature in objective - c and tried this one -> it's applicable for only one item Plz help me to overcome

import "ViewController.h"

@interface ViewController () @end @implementation ViewController

  • (void)viewDidLoad { [super viewDidLoad];

    UITabBar tabbar = self.tabBarController.tabBar; UIPanGestureRecognizer pangesture=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pananimation1:)]; [pangesture setDelegate:self]; fixedPos =0; tbItems = [NSMutableArray arrayWithCapacity:[tabbar.items count]]; for (UIView sview in tabbar.subviews) { if ([sview isKindOfClass:NSClassFromString(@"UITabBarButton") ]) { [tbItems addObject:sview]; } } [tabbar addGestureRecognizer:pangesture]; } -(void)pananimation1:(UIPanGestureRecognizer )pan { CGPoint touchlocation; [pan locationInView:self.view];

    if (tabbarview == nil) { tabbarview =[tbItems objectAtIndex:self.tabBarController.selectedIndex]; [[NSUserDefaults standardUserDefaults]setObject:@"UITabBarButton" forKey:[NSString stringWithFormat:@"%lu",self.tabBarController.selectedIndex]]; [[NSUserDefaults standardUserDefaults]synchronize]; [self.tabBarController.view addSubview:tabbarview]; } if (fixedPos == 0) { fixedPos=touchlocation.x; } [tabbarview removeFromSuperview]; tabbarview.center = touchlocation; if (pan.state == UIGestureRecognizerStateEnded) { // [tabbarview removefromsuperview] [tabbarview removeFromSuperview]; if (([[NSUserDefaults standardUserDefaults]objectForKey:[NSString stringWithFormat:@"%lu",self.tabBarController.selectedIndex]]<=0)) { NSMutableArray tvcs=[[self.tabBarController viewControllers]mutableCopy]; id tempvc=[tvcs objectAtIndex:self.tabBarController.selectedIndex]; [tvcs removeObject:tempvc]; [tvcs insertObject:tempvc atIndex:1]; [self.tabBarController setViewControllers:tvcs animated:YES]; }else if ([[NSUserDefaults standardUserDefaults]objectForKey:@"UITabBarButton"]>=0) { NSMutableArray tvcs=[[self.tabBarController viewControllers]mutableCopy]; id tempvc=[tvcs objectAtIndex:self.tabBarController.selectedIndex]; [tvcs removeObject:tempvc]; [tvcs insertObject:tempvc atIndex:3]; [self.tabBarController setViewControllers:tvcs animated:YES]; }else if (([[NSUserDefaults standardUserDefaults]objectForKey:[NSString stringWithFormat:@"%lu",self.tabBarController.selectedIndex]]>=0)){ NSMutableArray tvcs=[[self.tabBarController viewControllers]mutableCopy]; id tempvc=[tvcs objectAtIndex:self.tabBarController.selectedIndex]; [tvcs removeObject:tempvc]; [tvcs insertObject:tempvc atIndex:2]; [self.tabBarController setViewControllers:tvcs animated:YES]; }else if ([[NSUserDefaults standardUserDefaults]objectForKey:@"UITabBarButton"]<=0) { NSMutableArray tvcs=[[self.tabBarController viewControllers]mutableCopy]; id tempvc=[tvcs objectAtIndex:self.tabBarController.selectedIndex]; [tvcs removeObject:tempvc]; [tvcs insertObject:tempvc atIndex:4]; [self.tabBarController setViewControllers:tvcs animated:YES]; } } }

    /* Thanks in advance

    Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/134#issuecomment-156424029

kalyan4 commented 8 years ago

Can You Observe Bookmyshow Application? Like that i have to change the tabbaritem positions(index) according to user convenience Plz help me out reach that. Thanks in advance