<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}>
{children}
</Select>,
How to put a drop-down on an antd component?
Related
This is what I have done so far:
I want the text input to extent until reaches end of box.
Here's my code:
<View style={{ flexDirection: 'row' }} >
<Switch style={styles.switch}
trackColor={{true: "#36d79a", false: 'grey'}}
thumbColor={{true: "#36d79a", false: 'grey'}}
/>
<Input right placeholder="Type your custom question here." iconContent=
{<Block />}
/>
</View>
To fill space along the main axis of flexboxes, apply the flex property with a number value to flex children. The number specifies the proportions of how the available space is distributed among the flex children. See the docs on flexbox for details.
In your case, you would specify flex: 1 only for the <Input /> meaning that this component alone is allowed to fill the rest of the space. I've created this React Native & MUI Codesandbox to demonstrate it.
<View style={{ flexDirection: 'row' }} >
<Switch style={styles.switch}
trackColor={{true: "#36d79a", false: 'grey'}}
thumbColor={{true: "#36d79a", false: 'grey'}}
/>
<Input style={{ flex: 1 }} right placeholder="Type your custom question here." iconContent=
{<Block />}
/>
</View>
Add justifyContent: 'space-between' to your main View.
Alternatively, you can always use placeholder views:
<View style={{ flex: 1 }}. You would put that placeholder between the Switch and the Input.
I'm using the native base picker package for react-native.
I want to disable some items but, enable disable params don't work, all elements are still selectable.
I'm testing the app in ios. Here's my code
import { Picker } from 'native-base';
<Picker
iosHeader="VALUES"
mode="dropdown"
style={{ margin: 0, padding: 0 ,width:180,color:"#fff", justifyContent:"center",alignItems:"center" , textAlign:"center" }}
placeholder="Select one"
placeholderStyle={{ color: "#fff" }}
placeholderIconColor="#fff"
headerBackButtonText="Back"
headerStyle={{ backgroundColor: "#ff705a" }}
headerTitleStyle={{ color: "white" }}
headerBackButtonTextStyle={{ color: "white" }}
selectedValue={this.state.selectedVal}
onValueChange={(value) => this.onchange(value)}
textStyle={{ textAlign:"center" }}
textStyle={{color:"#fff"}}
>
<Picker.Item value='' label='Select' />
<Picker.Item label="SELECT ONE" value="34" />
</Picker>
The Picker component was officially replaced with Select in the update of v2 to v3 of NativeBase. Hope this still helps you! I wasnt able to get the Picker component to work on Expo Snack ¯_(ツ)_/¯
Below is an example I found in the docs. By adding the isDisabled prop to <Select.Item /> for C and Java. This prop prevents the ability to choose these options on iOS and Android. In my testing this did not work on Web.
<Select
selectedValue={value}
_selectedItem={{
bg: "red.600",
endIcon: <CheckIcon size={5} />,
}}
>
<Select.Item label="JavaScript" value="js" />
<Select.Item label="TypeScript" value="ts" />
<Select.Item label="C" value="c" isDisabled />
<Select.Item label="Python" value="py" />
<Select.Item label="Java" value="java" isDisabled />
</Select>
Full working code example in Snack here
Is there any way to render components over LottieView like button on top and Lottie animation on background in React Native
<LottieView
style={{ width: 400, height: 600 }}
source={require('../components/user.json')}
autoPlay
loop
>
<Button
onPress={onPressLearnMore}
title='Learn More'
color='#841584'
accessibilityLabel='Learn more about this purple button'
/>
</LottieView>
I use button and text on top and lottieview animation on background by this way:
return(
<View style = {{width:'100%', height:'100%', backgroundColor:'white'}}>
<LottieView source={require('../Animations/74468-rocket.json')} autoPlay loop></LottieView>
<Text style= {{fontSize:32, fontWeight:'bold', marginTop:400}}>hello i am on top</Text>
<Button
title='Learn More'
color='#841584'
accessibilityLabel='Learn more about this purple button'
/>
</View>
)
i hope it will help you..
I need the border lines to be displayed but here only the sides can be seen it is blank in the top and bottom
I have tried this using react native elements
Here is what I wanted to acheive
Here is what I got with this code
<SearchBar
round
lightTheme
icon={{ type: 'font-awesome', name: 'search' }}
placeholder="Buscar producto..."
platform="ios"
containerStyle={{
backgroundColor: 'transparent',
}}
inputStyle={{ backgroundColor: 'white' }}
/>
First you have to find which prop that SearchBar gives you access to is the one you want. inputStyle only styles the TextInput component, while containerStyle styles the whole big SearchBar (which has some extra padding and stuff that we don't want).
The prop you want is inputContainerStyle which will style the container around TextInput and the bits on the left and right. So to give a border you could simply do:
<SearchBar
round
lightTheme
icon={{ type: 'font-awesome', name: 'search' }}
placeholder="Buscar producto..."
platform="ios"
inputContainerStyle={{
backgroundColor: 'white',
borderColor: 'grey',
borderWidth: 1
}}
/>
I am using native base and in this picture you will see stackedLabel form. I'm trying to move it to the center of the screen but it doesn't work with justifyContent and still stays at the top of the screen. Also I am trying to change background color of the whole screen which is also doesn't work.
Here is the code:
<Container>
<Content contentContainerStyle={{
justifyContent:"center",
flex:1,
backgoroundColor: #00A577}}>
<Form style={styles.form}>
<Field name="email"
component={this.renderInput}
validate={[email, required]} />
<Field
name="password"
component={this.renderInput}
validate={[alphaNumeric, minLength8, maxLength15, required]}
/>
</Form>
<Button
full
style={styles.button}
onPress={() => this.signin()}
>
<Text style={{color:"#ffffff"}}>Sign In</Text>
</Button>
</Content>
</Container>
How can I fix these 2 issues?
replace flex:1 by flexGrow:1 in contentContainerStyle
Code
import React, { Component } from 'react';
import { Container, Header, Content, Form, Item, Input, Button, Text } from 'native-base';
export default class App extends Component {
render() {
return (
<Container>
<Content contentContainerStyle={{ justifyContent: "center", flexGrow: 1, backgroundColor: "#00A577" }}>
<Form>
<Input placeholder="e-mail" />
<Input placeholder="password" />
</Form>
<Button full>
<Text style={{ color: "#ffffff" }}>Sign In</Text>
</Button>
</Content>
</Container >
);
}
}
You've a typo on 'backgoroundColor'.