Get icons to work with Vue native / React Native - createMaterialBottomTabNavigator - react-native

Question

I'm trying to get the bottom tab navigator to show the icons for Vue Native.
I'm new to coding, and it's a little bit confusing for me to understand some bits how Vue native and React native syntax works. I searched the internet hi and low to find the information that I needed.
I did find some information on the official React Native website.
The Vue native official website doesn't contain so much detailed information regarding this.
So, my question is how do I get this to work? The code below spits out an error code when I try to execute it.
Thanks in advance for the help :)
// Chris
I leave some code snippets below:
<template>
<app-navigator></app-navigator>
</template>
<script>
import {
createAppContainer,
createMaterialBottomTabNavigator,
createStackNavigator,
} from "vue-native-router";
import Icon from '../node_modules/react-native-vector-icons/dist/FontAwesome.js';
import Home from "./screens/HomeScreen.vue";
import Message from "./screens/Message.vue"
const StackNavigator = createMaterialBottomTabNavigator({
Hem: Home,
Message: {
screen: Message,
navigationOptions: {
title: 'woop',
tabBarIcon: ({tintColor})=>{
<Icon name="ios-home" color={tintColor} size={25}/>
}
},
},
});
const AppNavigator = createAppContainer(StackNavigator);
export default {
components: { Root, AppNavigator },
}
</script>
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.19.0",
"expo": "~36.0.2",
"expo-font": "~8.0.0",
"native-base": "^2.13.8",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.5.2",
"react-native-paper": "^3.4.0",
"react-native-reanimated": "^1.4.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-navigation-material-bottom-tabs": "^2.1.5",
"vue-axios": "^2.1.5",
"vue-native-core": "^0.1.4",
"vue-native-helper": "^0.1.4",
"vue-native-router": "^0.1.1"
},
"devDependencies": {
"#babel/core": "^7.7.7",
"babel-preset-expo": "~8.0.0",
"vue-native-scripts": "^0.1.4"
},
"private": true
}

Answer 1

I got it working by adding this:
import * as React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
Message: {
screen: Message,
navigationOptions: {
tabBarLabel: 'Meddelanden',
tabBarIcon: <Icon name="rocket" size={25}/>,
}
}