Can we use other UI framework?

[aliqasemzadeh]

Hello,
Can I use other UI framework to build application?

[RohanTalip]

Hi @alighasemzadeh, yes, you can. I'm currently using a mix of the Vue Native basic components (which are really just wrappers around React Native components), Native Base components, components from React Native Elements and other individual components.

So far, I have found that anything that can be used in React Native can also be used with Vue Native, although usually with some translation of the syntax into what Vue / Vue Native expects.

[aliqasemzadeh]

@RohanTalip
Thanke for your answer.
I want to use Vuetify for my UI and for device api use vue-native.
For example using expo for device api
Can you guide me how to do this job?

[RohanTalip]

@alighasemzadeh, you're welcome.

I want to use Vuetify for my UI and for device api use vue-native.

I'm assuming that you want to use Vuetify for your website / web app. I don't see any problem with that. I suspect you will need to have 2 source trees for each app (although you will likely have similar code shared or copied between them).

For example using expo for device api
Can you guide me how to do this job?

I am not using expo, but there appear to be other people using it with Vue Native.

You could start by looking at the documentation for device APIs or search for what you want on your favourite search engine or join the Vue Native Slack community and ask your question there.

Good luck!

[sanketsahu]

You're doing a great job @RohanTalip. Loads of love ❤️ from the Vue Native Team at GeekyAnts

[Syltis]

Hi! I'm trying to use Material Design with Vue Native, but I' getting an error when trying to import and Vue.use(MdMenu):

Unable to resolve module 'vue' from ../source/repos/vuenativetester/node-modules/vue-material/dist/components/MdMenu/index.js' Module 'vue' does not exist in the Haste module map

Any possible solutions on this?

[RohanTalip]

Hi @Syltis,

First of all, the Vue Material project that you linked to provides web UI components, which won't make sense in a Vue Native / React Native mobile development environment (unless you're using the web UI components in a WebView).

Secondly, Vue Native started with a Vue.js core but modified it to act as a bridge between Vue Single File Components (SFCs) and React Native libraries (actually, the SFCs are translated into React Native code). As a result, in a Vue Native project, by default you will no longer import Vue from "vue" but instead from "vue-native-core", and the "vue" module will not be available in your node_modules directory (unless you add it yourself).

To find Material Design libraries or components that will work with Vue Native, I recommend searching for "react native material design" (or similar) on your favourite search engine.

Some libraries/packages I have come across (but don't yet have experience with) include:

• React Native Paper
• React Native Material UI
• React Native Material Kit

There may be others ...

[aliqasemzadeh]

@RohanTalip
Hello,
It looks we can not use web UI for native environment.

[RishabhKarnad]

To summarise, it is possible to use components from React Native component libraries by importing and then declaring them as a child component int the <script> part of your .vue SFC.

<template>
    <view>
        <!-- notice the kebab-case, although you can use PascalCase as well -->
        <some-ui-component />
    </view>
</template>

<script>
// Import the same way as you would in a JS file
import { SomeUiComponent } from 'a-ui-library'

export default {
    components: {
        // Declare the component here. It can't be used otherwise
        SomeUiComponent,
    },
    /* data, props, methods, etc */
}
</script>

Components provided by react-native itself, like View and Text can be used without the need to import.

However, it is not possible to directly use web UI library components, including libraries designed for Vue.js.

[obitux]

What about the dot notation in react native ui libs as Paper ? Can't figure out how to import and use those components ...
Example :

import * as React from 'react';
import { Appbar } from 'react-native-paper';
import { StyleSheet } from 'react-native';

export default class MyComponent extends React.Component {
  render() {
    return (
      <Appbar style={styles.bottom}>
        <Appbar.Action icon="archive" onPress={() => console.log('Pressed archive')} />
        <Appbar.Action icon="mail" onPress={() => console.log('Pressed mail')} />
        <Appbar.Action icon="label" onPress={() => console.log('Pressed label')} />
        <Appbar.Action icon="delete" onPress={() => console.log('Pressed delete')} />
      </Appbar>
    );
  }
}

[RishabhKarnad]

@obitux this should work:

<appbar:action icon="archive" :on-press="() => { console.log('something') }" />