Adding from react-native-elements to bottomTabNavigator shows error

Question

I'm trying to add icons to my bottomTabNavigator using Icons from react-native-elements.

import { createBottomTabNavigator } from "react-navigation"
import { ServicesNavigator } from "./services-navigator"
import { AccountScreen } from "../screens/account-screen/account-screen"
import { Icon } from "react-native-elements"

export const BottomTabNavigator = createBottomTabNavigator({
  services: {
    screen: ServicesNavigator,
    navigationOptions: {
      tabBarLabel:"Services",
      tabBarIcon: ({ tintColor }) => (
        <Icon name="ios-build" type="Ionicon" size={10} />
      )
    },
  },
  account: { screen: AccountScreen },
})

The code above shows the following error in ios: Unexpected token, expected "</>/<=/>=" around the line where <Icon> is. I've tried looking online but I can't seem to fix my problem. Any help would be appreicated!

Nope, still getting the same error – edrichhans Jun 12 '19 at 04:27 — edrichhans, Jun 12 '19 at 04:27

score 0 · Answer 1 · answered Jun 26 '19 at 03:08

0

those settings should not be within the RouteConfigs. Studying https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance you should do more like

export const BottomTabNavigator = createBottomTabNavigator({
    services: ServicesNavigator,
    account: AccountScreen,
  },
  {
    defaultNavigationOptions: () => {
      tabBarIcon: () => <Icon name="ios-build" type="Ionicon" size={10} />
    },
  },
})

answered Jun 26 '19 at 03:08

Harry Moreno

10,231
7
64
116

Nope, still not working. Even using the exact format from the react navigation website is giving me an error. `Type 'RegExp' is missing the following properties from type 'Icon': context, setState, forceUpdate, render, and 3 more.` It seems like the return value should be a react component or something? – edrichhans Jul 22 '19 at 06:56
I finally found the problem. All this time my file's extension was .ts, which does not support jsx, instead of .tsx. Changing the file extension to .tsx did it for me. – edrichhans Jul 22 '19 at 14:49

score 0 · Accepted Answer · answered Jul 22 '19 at 14:49

0

I finally found the problem. All this time my file's extension was .ts, which does not support jsx, instead of .tsx. Changing the file extension to .tsx did it for me.

answered Jul 22 '19 at 14:49

edrichhans

113
1
2
11

Adding from react-native-elements to bottomTabNavigator shows error

2 Answers2