Community Libraries

If you want to use a third party library refer to react-native packages instead of vuejs especially if the library uses render function or is dependent on html since vue-native does not work on html.

There are several contributions from the community that can be used in Vue-native and some of them are listed below :

Icons

Usage of icons in Vue Native.

• Import and use the already available icons from the @expo/vector-icons for CRNA projects or react-native-vector-icons for non-crna projects (remember to link).
• Use PNGs as icons to get your own customized icons running.

We will be showing both these methods here.

@expo/vector-icons

First install the React Native Elements package using the following command:

npm install @expo/vector-icons

Then you simply import it inside your script section like this:

import { Ionicons } from "react-native-elements";

Also add the Ionicons imported in the components block.

<script>
import { Ionicons } from "@expo/vector-icons";
export default {
components: {Ionicons},
}
</script>

If you want to use the imported Ionicons globally, you will have to import the Vue component from the vue-native-core library which is already there if you created your project using the vue-native-cli.

Use the Vue.component function in your root file App.vue to specify the component that will be used globally.

import Vue from "vue-native-core";
Vue.component("ionicons", Ionicons);

Now you are ready to use the kebab-case equivalent of the import in your template with the desired icon.

<template>
<view class="container">
<ionicons name="md-checkmark-circle" size=92 color="green" />
</view>
</template>




Icon images

If you know how to use the React Native <Image> component this will be a breeze.

<template>
<view class="container">
<image
:source="require('./logo.png')"
class="imagestyle"
/>
</view>
</template>
<script>
.imagestyle{
width: 100;
height: 100;
}
</script>

Maps

A Map component that uses Apple Maps or Google Maps on iOS and Google Maps on Android.

For non-crna Vue-Native projects, use the react-native-maps and link them.

For Vue-Native projects created with Crna, mapView from expo can be diretly used as shown below :

<template>
<view class="container">
<map-view class="container"
:initial-region="coordinates"
/>
</view>
</template>

<script>
import { MapView } from "expo";
export default {
data: function() {
return {
coordinates: {
latitude: 12.91074,
longitude: 77.5996363,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}
};
},
components: {
MapView
}
};
</script>
<style>
.container {
flex: 1;
}
</style>




Lottie

Lottie is the animation library from AirBnB and Expo has the default support it.

<view class="container">
<lottie
ref="lottieAnimation"
:style="{
width: 400,
height: 400,
backgroundColor: '#eee',
}"
:source="animation ? animation : {}"
/>
<view class="button-container">
<button title="Start Animation" :on-press="playAnimation" />
</view>
</view>
<script>
import lottieAnimationJson from "./lottieAnimation.json";
import { DangerZone } from "expo";
const { Lottie } = DangerZone;

export default {
components: { Lottie },
data: function() {
return {
animation: null
};
},
methods: {
async loadAnimationAsync() {
try {
const lottieAnimationJsonResponse = await fetch(
"https://cdn.rawgit.com/airbnb/lottie-react-native/635163550b9689529bfffb77e489e4174516f1c0/example/animations/Watermelon.json"
);
const parsedJson = await lottieAnimationJsonResponse.json();
this.animation = parsedJson;

this.playAnimation();
} catch (error) {
console.log(
"%c some inside loadAnimationAsync ",
"background: salmon; color: black",
error
);
}
},
playAnimation() {
if (!this.animation) {
this.loadAnimationAsync();
} else if (this.$refs.lottieAnimation) {
this.$refs.lottieAnimation.reset();
this.$refs.lottieAnimation.play();
}
}
},
mounted() {
this.playAnimation();
},
beforeUpdate() {
this.playAnimation();
}
};
</script>
<style>
.container {
background-color: #fff;
align-items: center;
justify-content: center;
flex: 1;
}
.button-container {
padding-top: 20;
}
</style>




Native base

Refer here to know how to use Native Base in Vue-native.

GraphQl

We can use ApolloProvider and Query Component from react-apollo to implement graphQl in vue-native. The vue-apollo cannot be used since it’s based on dynamic render function.

<template>
<view class="container">
<apollo-provider :client="client">
<query :query="cquery">
<view render-prop-fn="children">
<text v-if="args.loading">Loading...</text>
<text v-else-if="args.error">An error occured</text>
<view v-if="args.data && args.data.lookup">
<text v-for="album in args.data.lookup.artist.releaseGroups.edges">
{{album.node.title}}
</text>
</view>
</view>
</query>
</apollo-provider>
</view>
</template>
<script>
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider, Query } from 'react-apollo';

const client = new ApolloClient({
link: new HttpLink({ uri: 'https://graphbrainz.herokuapp.com/' }),
cache: new InMemoryCache()
});

import { GET_NAMES } from "./queries.js";
export default {
data: {
client: client,
cquery: GET_NAMES
},
components: { ApolloProvider, Query }
};
</script>

queries.js

import { gql } from "apollo-boost";

export const GET_NAMES = gql`
query NirvanaAlbumSingles {
lookup {
artist(mbid: "5b11f4ce-a62d-471e-81fc-a69a8278c7da") {
name
releaseGroups(type: ALBUM) {
edges {
node {
title
firstReleaseDate
}
}
}
}
}
}
`;