How can I give fontSize to picker (android)? I tried to give but it's not working
<Picker
style={{fontSize:20}}
selectedValue={this.state.language}
onValueChange={(lang) => this.setState({language: lang})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
At the moment, you can't. This is what the official documentation says here
itemStyle itemStylePropType
Style to apply to each of the item labels.
But this only works on iOS
On Android, you'll have to wait for them to implement it (or maybe write a PR for them :))
This does the trick perfectly well. Just change the scale value.
const styles = StyleSheet.create ({
selectInput: {
transform: [
{ scaleX: 0.9 },
{ scaleY: 0.9 },
],
},
})
They didn't add support to change the font size that way. Here is a workaround that I don't like but it seems to be the only thing that works. Here is an example.
<Picker
mode="dropdown"
selectedValue="en"
style={{width: 110, height: 50}}
itemStyle={{height: 50, transform: [{ scaleX: 1 }, { scaleY: 1 }]}}>
<Picker.Item value="en" label="English" />
<Picker.Item value="es" label="Español" />
</Picker>
To anyone still searching,
Here's what I found:-
Enter the 'fontSize' style property individually to every picker.item.
<Picker.Item style={{fontSize:12}} label={'AnyValueLabel'} value={'AnyValueName'}/>
Normal for Android
{drinksArr.map((val, index) => (
<Picker.Item
style={{
fontSize: 30,
backgroundColor: Colors.Black,
}}
fontFamily="font_family"
color={Colors.Gold}
label={val.title}
value={val.title}
key={index}
/>
Under the documentation; all what i found is that:
itemTextStyle={{fontSize: 15}}
activeItemTextStyle={{fontSize: 18, fontWeight: 'bold'}}
Which works for me.
Related
(Edit: I also tried putting overflow: 'visible' in various locations to no avail.)
I'm using a date for the x-axis tick labels so I would like them to be at an angle to prevent overlap. The issue is that they are not being cut off at the bottom, as seen here (the colors are there to show different component edges):
Here is my code:
<View style={{ backgroundColor: 'red', paddingBottom: 50 }}>
<VictoryChart
theme={chartTheme}
width={screenWidth - 10}
animate={{
onLoad: { duration: 100 },
duration: 500,
}}
containerComponent={<VictoryContainer style={{ backgroundColor: 'blue', paddingBottom: 50 }} />} >
<VictoryAxis
label={plotText.xLabel}
style={{ // adding padding here does nothing
tickLabels: { angle: -45, textAnchor: 'end' } // adding padding here does nothing
}}
tickValues={dispRSHistData.ticks}
tickFormat={(t) => getFormattedDate(t)}
/>
<VictoryAxis
dependentAxis
label={plotText.yLabel} />
<VictoryLine
data={dispRSHistData.data}
x="timestamp"
y="percentSuccess"
style={{ data: { stroke: "tomato" } }}
size={10} />
</VictoryChart>
</View>
I've tried setting various heights manually but nothing seems to give space to show the full tick labels.
I didnt find an automatic solution to your problem
but mannualy adding "padding" prop to the chart worked for me
btw this solution is for VictoryNative on react native but I guess something similar works on react.js version too
check the 'padding' prop here
<VictoryChart width={400} theme={VictoryTheme.material}
padding={{bottom:100,right:50,left:50}}
>
<VictoryAxis //the x axis
// axisLabelComponent={<VictoryLabel angle={-90}/>}
tickLabelComponent={<VictoryLabel angle={-90} dy={-7}
textAnchor='end'
// labelPlacement="perpendicular"
/>}
/>
<VictoryAxis dependentAxis //the y axis
/>
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
I'm using the react-native-gifted-chat package for my React Native application.
Somehow there is a space between the composer and the keyboard, although I did not customise the GiftedChat.
Marked orange in the attached screenshot:
I already tried to customise the composer or any other component, with not effect.
i'm also facing same problem after some time i find this solution and it's work for me.
<GiftedChat
isAnimated
messages={this.state.messages}
scrollToBottom={true}
renderUsernameOnMessage={true}
onSend={messages => this.onSend(messages)}
inverted={false}
isLoadingEarlier={true}
messagesContainerStyle={{ color: 'gray' }}
bottomOffset={0} // add this line and space is remove
renderBubble={props => {
return (
<Bubble
{...props}
textStyle={{
right: {
color: 'white',
},
left: {
color: '#24204F',
},
}}
wrapperStyle={{
left: {
backgroundColor: 'white',
},
right: {
backgroundColor: "#ff3b00", // red
},
}}
/>
);
}}
renderInputToolbar={props => {
return (<InputToolbar {...props} containerStyle={{ backgroundColor: '#e2e2e2' }} />);
}}
user={{
_id: 1
}}
/>
hope this willl work for you
bottomOffset={0} // add this line and space is remove
install react-native-iphone-x-helper
and add these lines according to your code.
import { getBottomSpace } from 'react-native-iphone-x-helper';
<GiftedChat
bottomOffset={getBottomSpace()}
...
/>
As found on the docs itself, simply get the insets:
const insets = useSafeAreaInsets();
<GiftedChat
bottomOffset={insets.bottom}
...
/>
This will fix your issue dynamically.
this is my code for react-native picker.
I want to get all values for that json array which is selected.
I want to provide multiple select.
<Picker
mode="dropdown"
style={styles.droplist}
selectedValue={this.state.mode}
onValueChange={this.funcValueChanged}>
<Picker.Item label="Select Company" value="Select Company" />
{
this.state.data.map((item, key) => (
<Picker.Item
label={item.Co_Name + ' (' + item.CompCode + ')'}
value={key}
key={key}
/>
)))
}
</Picker>
You can use for single/multiple selection
import DropDownPicker from 'react-native-dropdown-picker';
<DropDownPicker
items={getAllStates}
searchable={true}
searchablePlaceholder="Search for an item"
searchablePlaceholderTextColor="gray"
placeholder="Select States"
placeholderTextColor={"grey"}
multiple={true}
multipleText="%d items have been selected."
containerStyle={{ marginTop: 8, marginBottom: 8, width:
"92%", alignSelf: "center", }}
onChangeItem={item => {
}
} />
The package used here is #react-native-picker/picker which does not support the multi-selected.
GitHub Issue
Use npm i react-native-multiple-select instead.
this works absolutely fine on android but not on IOS (not displaying value which user select from wheel picker). Check this Link.
https://drive.google.com/file/d/1y_ULGQuvPlzZj2V2zr1RAynrZKpme4Uc/view?usp=sharing
<Picker
style={{ width: 100, height: 80 }}
selectedValue={this.state.selectedHour}
itemStyle={{ color: "black", fontSize: 20 }}
onValueChange={index => this.onPickerHourSelect(index)}
>
{this.state.hourList.map((value, i) => (
<PickerItem label={value} value={i} key={"money" + value} />
))}
onPickerHourSelect(index) {
var hour = this.state.hourList[index];
this.setState({
selectedHour: hour,
}) }
Please suggest me another component or package of picker(Like Spinner Or Wheel Picker)
I've had the same problem! I solved it using selectedValue instead of selectedItem and passing the pickerItem's value.
This is my code:
<Picker style={{flex: 1, width: 150, height: 180}}
itemStyle={{color: 'black', fontSize: 26}}
selectedValue={this.state.minutes[this.state.indexSelected]}
onValueChange={(index) => {this.setState({indexSelected: index})}}>
{this.state.minutes.map((value, i) => (<PickerItem label={value} value={i} key={i}/>))}
</Picker>