Q:

Adding  from react-native-elements to bottomTabNavigator shows error

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!

A:

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.

