Develop Reference

Getting Outlook profile image in Vue as v-img src

I am trying to create a profile image that changes, depending on who is logged in so I cannot hardcode the email into the url
how would i go about this
html
<v-avatar size="128" absolute color="secondary">
<v-img:src="`https://outlook.office.com/api/v2.0/Users${email}/photo/$value`" />
</v-avatar>
computed
email() {
return this.staffMember.WorkEmail
},
Email is returned as devan#bsuregroup.co.za
but no image is being displayed

According to the API docs URL you need to query for photo looks like this:
GET https://outlook.office.com/api/v2.0/Users('{user_id}')/photo/$value
You need to change your URL in the v-img element:
<v-avatar size="128" absolute color="secondary">
<v-img:src="`https://outlook.office.com/api/v2.0/Users(${email})/photo/$value`" />
</v-avatar>

how to play video file from a url in react-native

I am trying to display this link in react native app running on ios
I'm able to display jpg files using Image tag with no problem at all, however, the array being return from the API also contains video url as well something like this 'https://www.meteorshowers.org/view/iau-7', how can i go about showing it along with Images in a FlatList?
here is a link to what i am getting 'https://www.dropbox.com/s/hphm6natcfp5rey/Screenshot%202018-08-26%2017.47.57.png?dl=0' as you can see it's blank
`<TouchableWithoutFeedback>
<Card
image={{ uri: item.hdurl }}
resizeMode='contain'
imageStyle={{ height: 300, }}
/>
<TouchableWithoutFeedback>`

You can use 'react-native-video' module for this.
import Video from 'react-native-video';
...
<Video source={{uri: 'url_to_your_video'}} />

Is there any equivalent to the HTML anchor tag on Nativescript?

I'm trying to display a simple image or text with a link such as an HTML <a> anchor tag
<ListView [items]="items | async" (itemTap)="onItemTap($event)">
<template let-item="item">
<StackLayout>
<Image [src]="item.imageUrl" ></Image>
<!--<Image [src]="item.imageUrl" href="http://google.com"></Image>-->
</StackLayout>
</template>
</ListView>
It seems the only options is to be using onItemTap and getting the item url and manually setting the url content to be displayed on a separate webview. Are there any tags that would automatically open a separate browser page on the phone and display the URL content of the item?

For your case, you could use openUrl() and on tap Event on some of the components to open the needed page. For example:
export function onTap(args:EventData){
openUrl("https://www.google.com");
}
You could also review the sample project here.

Bottom Navigation bar for android application (NativeScript)

I am trying to create a navigation bar at the bottom of my android application. I am using NativeScript for creating the application. Is there any plugin to do this?
<page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns:widgets="shared/widgets"
xmlns:statusbar="nativescript-statusbar"
xmlns:bottomnav="nativescript-bottomnavigation"
loaded="pageLoaded">
<statusbar:StatusBar ios:barStyle="light" />
<page.actionBar>
<action-bar title="NativeScript">
<navigation-button icon="res://ic_menu" tap="toggleDrawer" ios:visibility="collapsed" />
<action-bar.actionItems>
<ios>
<action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
</ios>
</action-bar.actionItems>
<ActionItem tap="onDelete" ios.systemIcon="16" ios.position="right" text="Delete" android.position="popup"/>
<ActionItem id="logoutButton" tap="logOut" ios.systemIcon="16" ios.position="right" text="LogOut" android.position="popup"/>
</action-bar></page.actionBar>
<drawer:rad-side-drawer id="drawer">
<drawer:rad-side-drawer.mainContent>
<!-- Home page contents -->
<StackLayout loaded="contentLoaded">
<image src="https://i.imgur.com/LY3cb3A.png" id="logo" tap="fun" height="100" margin="20 0 0 0" />
<label text="Welcome to the NativeScript drawer template! This is the home page. Try tapping the logo." margin="20" horizontalAlignment="center" textWrap="true" />
</StackLayout>
</drawer:rad-side-drawer.mainContent>
<drawer:rad-side-drawer.drawerContent>
<widgets:drawer-content />
</drawer:rad-side-drawer.drawerContent>
</drawer:rad-side-drawer>

I did a research about what's the best way to create a bottom navigation.
For me, the easiest approach is to create a GridLayout with two rows: one for the scrolling content and one for the bottom navigation:
<GridLayout rows=*,60">
<ScrollView row="0">
... scrolling content ...
</ScrollView>
<StackLayout row="1">
... navigation buttons ...
</StackLayout>
</GridLayout>
The second row represents the navigation. In my example, I am using 60 dp in height. The first row (the scrolling content) takes the rest of the vertical space available. The star (*) symbol means — take as much space as available.
You can check my experience in the following article: NativeScript: how to create a fixed bottom navigation

Programatically i would advice you write the code without library for easy manipulation and flexibility
consider the following CSS on your app.css
.add-menu-btn {
background-color: #2b2dad;
padding: 10;
color: #fff;
border-radius: 50;
text-align: right;
}
.float-menu-bottom {
vertical-align: bottom;
horizontal-align: right;
padding: 5;
}
Then on your xml file you should have your layouts structured how ever you want but maintain this.
One step layouts, main contents and absolute layouts
<Page>
<GridLayout>
<ScrollView>
...contents here or more layouts
</ScrollView>
<AbsoluteLayout class="float-menu-bottom">
<StackLayout class="add-menu-btn">
<Label text="add" class="mdi mdi-large menu-right"></Label>
</StackLayout>
</AbsoluteLayout>
</GridLayout>
</Page>

Use this library
Solution 1
For better solution you can check here
Solution 2

React-native android Styling textInput

Is there a way to style the textInput in react-native android?
Like change the underlineColor when selected and the cursor color?

As of React Native version 0.21, there is still no way to style the cursor color via view props. I have successfully styled the cursor color by adding a custom style to my app theme.
You will want to place this code in the styles.xml file, which is located in the android folder of your React project, at android/app/src/main/res/values/styles.xml.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- typical material style colors -->
<item name="colorPrimary">#color/kio_turquoise</item>
<item name="colorPrimaryDark">#color/kio_hot_pink</item>
<!-- sets cursor color -->
<item name="colorControlActivated">#android:color/black</item>
</style>
</resources>
Note that this style is global, and will set the cursor color for all Android TextInput views in your React Native app.

For the underline color you can use underlineColorAndroid property: https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L290
See example: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextInputExample.android.js#L222
For cursor color there is no such property exposed at the moment. You can always use custom android theme for your app if you want to change that globally for all textviews in your app (read more here: http://developer.android.com/guide/topics/ui/themes.html)

Besides implementing #Kio Krofovitch solution I also made color.xml file in the same ../res/values folder in which I wrote something like:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="orange">#ff5500</color>
<color name="articlecolor">#3399FF</color>
<color name="article_title">#3399FF</color>
<color name="cachecolor">#8ad0e8</color>
</resources>
and then accordingly edited the styles.xml as follows:
...
<item name="colorControlActivated">#color/orange</item>
</style>
</resources>

There is actually a prop doing this for TextInput :
selectionColor (to change cursor color as well as selection color)
underlineColorAndroid (to change the underline color of textInput in
Android)
<TextInput
underlineColorAndroid="#FF0000"
selectionColor="rgba(0,0,0,0.4)"
/>
Here is the documentation.