I am using React Native and have a form like this :
<Form>
<Text>Password</Text>
<Label>
New Password
</Label>
<Item regular >
<Input />
</Item>
<Label style={styles.label}>
Confirm
</Label>
<Item regular >
<Input/>
</Item>
</Form>
<Button title="Update" onPress={() =>? } ></Button>
I need to check that the values in the input fields are the same, and check some restrictions that can be done using regular expressions.
How do I pass the values in the input fields so that I check in the controller?
I have done this using Angular in the past only.
It's my first time using react native, any guidance of best practice to do is is appreciated.
Thanks.
This problem is so basic that I suggest you to read React docs on forms: https://reactjs.org/docs/forms.html
Tell me if you have problems still when you have read the docs and tried implement the solution yourself :)
Related
I use the <render-mode> tag to include some html in my screen:
<?xml version="1.0" encoding="UTF-8"?>
<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-2.1.xsd"
require-authentication="anonymous-all">
<widgets>
<label type="h1" text="Hello world!"/>
<render-mode>
<text type="html,vuet" location="component://tutorial/template/hello.html"/>
</render-mode>
<label type="h1" text="after Hello world!"/>
</widgets>
</screen>
The incuded hello.html file is shown fine using the "standard UI" or "dynamic Bootstrap UI", but it doesn't show when using the "dynamic Material UI".
Is there a way to enable this? I much prefer the look and navigation of the dynamic Material UI.
Thank you!
The reason it doesn't show under qapps is that qapps uses a new render mode 'qvt' just like vapps uses the render mode 'vuet'. To make it show under /qapps just change:
<text type="html,vuet" ...
to:
<text type="html,vuet,qvt" ...
I hope you can help me to solve my problem.
I am working on a Nativescript-Vue Application and I want to render this conditionally:
<Label if="isRendering" text="This is a text"></Label>
But this does not work.
I already tried it with <v-template if="..."></v-template> but this also does not work.
If i am not mistaken, in Vue.js it is possible to render conditionally with v-if and i am searching for a possibility to make it in Nativescript-Vue.
Thank you
It's the same like in Vue.js.
Instead of using if you should be using v-if.
Playground example
Example:
<Label v-if="isRendering" text="This is a text"></Label>
But if you want to use an if in a ListView it's different.
Example:
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
<v-template if="$odd">
<!-- For items with an odd index, shows the label in red. -->
<Label :text="item.text" color="red" />
</v-template>
</ListView>
But more info about that in the docs
I have a Visio Addin that I have been adding controls to. I have a simple problem but I'm struggling to find an answer to.
I have these four controls in a group. I just added a new one called Query Preference.
I would like to align this in such a way where Modern Shapes shows up under Query Preference in the highlighted area below.
The Xaml code for this group is as follows.
I'm fairly certain there is alignment property, but I can't find for the group tag to do what I want.
Does anyone have experience with this?
<group id="connectionGroup" label="Manage">
<button id="authenticate" label="Configure Connection" size="normal" getImage="GetImage" onAction="OnAction" getEnabled="GetEnabled" supertip="Set the server and authentication information"/>
<button id="stencil" label="Generate Stencil" size="normal" getImage="GetImage" onAction="OnAction" getEnabled="GetEnabled" supertip="Generate a new stencil using the metamodel of the current server"/>
<menu id="modernClassicShapesDropdown" getLabel="GetShapeStyleLabel" getImage="GetShapeStyleImage" getEnabled="GetEnabled" supertip="Determine how new shapes will be rendered">
<button id="modernShapes" label="Modern Shapes" getImage="GetImage" onAction="OnShapeStyleAction"/>
<button id="classicShapes" label="Classic Shapes" getImage="GetImage" onAction="OnShapeStyleAction"/>
</menu>
<menu id="queryPreference" label="Query Preference" getImage="GetImage" getEnabled="GetEnabled" supertip="Determines how much Shape data is queried.">
<button id="Low" label="Low" onAction="OnQueryPreferenceAction" supertip="Only component name and description are queried and available in shape data. Select this option for fastest drawing time."/>
<button id="Medium" label="Medium" onAction="OnQueryPreferenceAction" supertip="Only native component properties are queried. Calculated properties are not initially available in shape data."/>
<button id="High" label="High" onAction="OnQueryPreferenceAction" supertip="All component properties are queried and available in shape data, including calculated properties."/>
</menu>
</group>
Why not just move the "Modern Shapes" menu item to after "Query Preference" and then insert a blank line:
<button id="junk42" label=" " />
I've struggling for two days to styling components on Native Base with <StyleProvider>. I want to change background color of header and add custom style property on the button.
<Container>
<Header /> /*change backgroundColor*/
<Content>
<Button viewDetail block> /*add 'viewDetail' as custom style property */
<Text>Button</Text>
</Button>
</Content>
</Container>
I think, I have the answer for my own question.
Import all components from 'native-base-theme/components/' instead of variables.
The code will be like this
import getTheme from './native-base-theme/components';
and add <StyleProvider>, then add prop style <StyleProvider style={getTheme()}>.
There are many ways of doing this. One way would be to follow the instructions given here. Alternatively, you can change the button theme file and add a similar style property like success shown here.
I hope this will help you,
You must be using NativeBase2
<StyleProvider style={getTheme(commonColor)}>
<Header>
<Left>
<Button transparent>
<Icon name="arrow-back" onPress={() => this.props.routerActions.pop()} />
</Button>
</Left>
<Body>
<Title>Profile</Title>
</Body>
<Right></Right>
</Header>
</StyleProvider>
For ejecting theme,
Just open this link and follow
http://nativebase.io/docs/v2.0.0/customize#themingNativeBaseApp
Now If you want to customise just look for
native-base-theme/components/Header.js
native-base-theme/variables/commonColor.js
Is there an easier way to center a label in Xul then with the following?
<xul:hbox>
<xul:spacer flex="1" />
<xul:label id="myLabel" value="LABEL"/>
<xul:spacer flex="1" />
</xul:hbox>
Yes. Use box packing via the pack attribute.
<hbox pack="center"><label id="myLabel" value="LABEL"/></hbox.
Two alternative ways which also work with multiline labels:
Use <label style="text-align: center"/>
Use <vbox align="center"><label/></vbox>