I'm trying to style the picker but it doesn't take fontFamily, padding or fontSize. Is there any way to aplply those styles to this text?
I 've attempted using style and itemStyle, but those properties have no effect.
(Tested on Android phone)
<View style={{borderRadius: 20, overflow: 'hidden', marginVertical: 5}}>
<Picker
style={[styles.input, {marginVertical: 0}]}
selectedValue={selectedLanguage}
onValueChange={(itemValue, itemIndex) =>
setSelectedLanguage(itemValue)
}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
styles.input
input: {
backgroundColor: colors.pink,
color: 'white',
width: windowWidth * 0.8,
paddingVertical: 10,
paddingHorizontal: 20,
marginVertical: 5,
borderRadius: 20,
fontSize: 20,
fontFamily: 'Quicksand-Light',
},
Move fontSize, fontFamily, ... to itemStyle and remove it from styles.input, be like:
<View style={{borderRadius: 20, overflow: 'hidden', marginVertical: 5}}>
<Picker
style={[styles.input, {marginVertical: 0}]}
selectedValue={selectedLanguage}
onValueChange={(itemValue, itemIndex) =>
setSelectedLanguage(itemValue)
}
itemStyle={{
fontSize: 20,
fontFamily: 'Quicksand-Light',
}}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
styles.input:
input: {
backgroundColor: colors.pink,
color: 'white',
width: windowWidth * 0.8,
paddingVertical: 10,
paddingHorizontal: 20,
marginVertical: 5,
borderRadius: 20,
},
More information: https://github.com/react-native-picker/picker#itemstyle
Related
How do I get to make React native Picker use Poppins-Medium Font?
Been trying to make it work, but No, Its not responding as expected. I am using Android Studio, just that the font, does not respond as supposed.
Here is my source code snippet.
<View style={{ borderRadius: 5, borderWidth: 1,overflow: "hidden", height: 35, padding: 0,top:10, borderColor:'#00BB23' }}>
{
<Picker
style={{
width: 300,
height: 55,
fontSize: 25,
fontFamily:'Poppins-Medium',
borderBottonWidth: 1,
}}>
<Picker.Item label="Currency" value="accNum" />
<Picker.Item label="NGN" value="NGN" />
</Picker>
}
</View>
Where do i go, or what am I missing?
Use itemStyle props - it's style for text:
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily:'Poppins-Medium',
}}
>
<Picker.Item label="Currency" value="accNum" />
<Picker.Item label="NGN" value="NGN" />
</Picker>
react-native-modal dropdown only displays 9 values than when I select any value and open the dropdown again it shows me remaining values I have tried this solution
stackoverflow.com/q/68266570/10619360 but its not working you can check the images
<ModalDropdown
ref={dropdown}
style={{ width: '100%' }}
showsVerticalScrollIndicator={false}
options={["Lottes", "Stelzer", "Puchtler", "Reichel", "Hühnermobil", "Simplebakery", "Ruckdeschel", "Seidel", "Bloß", "Wunderlich", "Edeka", "Harles"]}
onSelect={(index, val) => (setValue(val), setError(null))}
renderRow={(rowData, rowID) => renderDropDownList(rowData)}
dropdownStyle={{
marginTop: 0.5,
width: '75%',
borderRadius: 10,
borderWidth: 0,
elevation: 3,
overflow: 'hidden',
}}
>
<Pressable
onPress={() => dropdown.current?.show()}
style={{ marginTop: 40 }}>
<View style={{
...globalStyles.input,
justifyContent: 'space-between',
padding: 2
}}>
<TextInput
editable={false}
value={value}
placeholder='Lieferant'
style={{
...FONTS.regular,
height: 40
}} />
<View
style={{
height: "100%",
borderRadius: 10,
width: '14%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.primary,
}}>
<Image
source={icons.dropdown}
resizeMode="contain"
style={{
height: 15,
width: 12,
tintColor: COLORS.secondary,
}}
/>
</View>
</View>
</Pressable>
</ModalDropdown>
const renderDropDownList = (rowData) => {
return <Text style={{
...FONTS.regular,
fontSize: 14,
padding: 10,
}} >{rowData}</Text>
}
I have clear button that I want to show after the user starts typing something. Right now it's showing all the time, even if the TextInput is empty, I'm new to React Native and have no idea how to start
This is my code so far:
<View
style={[
{
flexDirection: 'row',
borderWidth: 1,
borderRadius: 30,
padding: 10,
marginLeft: 20,
marginRight: 20,
// marginTop: Platform.OS === 'ios' ? 0 : -20,
marginBottom: 5,
borderColor: theme.inputBorder,
backgroundColor: theme.insightBg,
},
{color: theme.primaryTextColor},
]}>
<View>
<SearchIcon
style={{left: 2, top: 3, marginRight: 10}}
active={theme.search.inputPlaceholder}
/>
</View>
<TextInput
selectionColor="#25C0D5"
style={[
{
width: '100%',
height: 30,
padding: 6,
color: theme.primaryTextColor,
},
]}
value={props.search}
placeholderTextColor={theme.search.inputPlaceholder}
placeholder="Search Offer Groups"
returnKeyType={'search'}
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing={(e) => props.setSearch(e.nativeEvent.text)}
onChangeText={(text) => props.setSearchValue(text)}
autoFocus={false}
/>
<View style={{position:'absolute', right: 0, padding: 10, top:3}}>
<TouchableOpacity onPress={() => {clearAndRefresh()}}>
<CloseIcon
style={{right: 0, marginRight: 10, }}
active={theme.search.inputPlaceholder}
/>
</TouchableOpacity>
</View>
</View>
All the codes look clear to me, but it says there is some problem which i couldn't find out.
My other question is that I want to have a Text as "+8" in my View, I do it but its not right in the middle.. How could I place it in the middle, exactly?
I wrote where the errors as "//it shows red color here"
Here is App.js
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView } from 'react-native';
import { Circle } from 'react-native-svg';
import Application from "./src/components/icons/application.svg"
import HorizontalCircle from "./src/components/HorizontalCircles";
import HorizontalCircles from './src/components/HorizontalCircles';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.appIcon}>
<Application height={30} width={22} fill={"#1E2439"} />
<View style={{ height: 30, width: 30, backgroundColor:"#DBF1F9", borderRadius:20}}/>
</View>
<TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5"></TextInput>
<View style={{height:100}}>
<ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems:"center"}} horizontal={true}>
<View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight:10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
<HorizontalCircles color={"#CFC8FF"} />
<HorizontalCircles color={"#FFA2BF"} />
<HorizontalCircles color={"#FEE3AA"} />
<HorizontalCircles color={"#FEDFCC"} />
<HorizontalCircles color={"#FFA2BF"} />
<HorizontalCircles color={"#F3A5FF"} />
<HorizontalCircles color={"#EFBCFF"} />
<HorizontalCircles color={"#AFBFCF"} />
<HorizontalCircles color={"#AEDF5F"} />
<HorizontalCircles color={"#DDB825"} />
</ScrollView>
</View>
<Text style={styles.blackText}>Group Discussion On Going</Text>
<View style={styles.discussionOutside}>
<View style={styles.discussionInside}>
<View style={styles.firstDiscussion}>
<View style={{ height: 10, width: 10, backgroundColor: "red", borderRadius: 10, }} />
<Text style={{ marginLeft: 10 }}>Live</Text>
</View>
<View>
<Text style={styles.grayText}>Topic</Text>
<Text style={styles.blackText}>Human Resources Analysis</Text>
<Text style={styles.grayText}>By Emran Emon</Text>
<View style={styles.circles}>
<View style={{ height: 40, width: 40, backgroundColor: "#DDF0F8", borderRadius: 25, marginLeft: 5,borderWidth:1,borderColor:"white" }} />
<View style={{ height: 40, width: 40, backgroundColor: "#CEC7FE", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white" }} />
<View style={{ height: 40, width: 40, backgroundColor: "#FEA2BE", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white" }} />
<View style={{ height: 40, width: 40, backgroundColor: "#FEE3AB", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white" }} />
<View style={{ height: 30, width: 30, backgroundColor: "#FEE3AA", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white" }}>
<Text style={{textAlign:"center"}}>+8</Text>
</View> // it shows red color here
</View>
</View>
</View>
</View>
</SafeAreaView> // it shows red color here, and all the styles part in stylesheet
);
};
const styles = StyleSheet.create({
container: {
flex:1,
padding:30,
backgroundColor:"#FFFFFF",
},
appIcon: {
flexDirection:"row",
justifyContent:"space-between",
alignItems:"center",
},
input: {
height: 40,
borderWidth: .5,
borderRadius: 10,
marginVertical: 10,
backgroundColor: "#F7F6F9",
marginVertical:20,
},
discussionInside: {
backgroundColor: "#FFF9F2",
},
firstDiscussion: {
flexDirection:"row",
alignItems:"center",
borderRadius:20,
padding:20,
marginBottom:20,
},
grayText: {
color:"#A29E97",
fontSize:17,
},
blackText:{
fontSize:20,
fontWeight:"bold",
fontFamily: "Times New Roman",
},
circles: {
flexDirection:"row",
alignItems:"center",
}
});
export default App;
I can't see any problem with your code so I just refresh the app may be it works then, for your second concern of moving +8 in the center you can make the parent view of text like below:
<View style={{ height: 30, width: 30, backgroundColor: "#FEE3AA", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white" , alignItems: 'center', justifyContent: 'center' }}>
<Text style={{textAlign:"center"}}>+8</Text>
</View>
My React Native 0.61.5 app uses Picker from react-native to provide dropdown list selection. After moving to MacOS for IOS version, I notice that the position of values of dropdown selection is way below the text box out of alignment.
The value available for selection should be by the left of Cell.
Here is the related component code:
import { Dimensions, Picker, Button,TextInput,View, StyleSheet, AppRegistry } from 'react-native';
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Username'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('username', val)}
/>
<View style={styles.flexBox}>
<Picker. //<<<==== Picker code
selectedValue={this.state.cell_country_code}
style={styles.inputLeft}
onValueChange={this.pickerValueChange}>
<Picker.Item label="CHINA" value="86" />
<Picker.Item label="USA" value="1" />
</Picker>
<TextInput
style={styles.inputRight}
placeholder='Cell'
keyboardType='number-pad'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('cell', val)}
/>
</View>
<TextInput
style={styles.input}
placeholder='Corp Name'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('corp_name', val)}
/>
<View style={{flexDirection:"row"}}>
<Button
title='Sign Up'
onPress={this.signUp}
/>
<Button
title='Enter Code'
onPress={this.enterCode}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
input: {
width: Dimensions.get('window').width,
height: 55,
backgroundColor: '#42A5F5',
margin: 5,
padding: 8,
color: 'white',
borderRadius: 2,
fontSize: 18,
fontWeight: '500',
},
inputRight: {
flex:5,
height: 55,
backgroundColor: '#42A5F5',
margin: 5,
marginRight:0,
padding: 8,
color: 'white',
borderRadius: 2,
fontSize: 18,
fontWeight: '500',
},
inputLeft: {
flex:2,
height: 55,
backgroundColor: '#42A5F5',
margin: 5,
marginLeft:0,
padding: 8,
color: 'white',
borderRadius: 2,
fontSize: 18,
fontWeight: '500',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding:8,
margin:5
},
flexBox: {
flexDirection: 'row',
width: Dimensions.get('window').width,
height: 55,
justifyContent:"space-evenly",
marginBottom:10
},
segmentContainer: {
marginTop:5,
justifyContent: 'center',
alignItems: 'center'
},
tabContainerStyle: {
marginTop:10,
width: Dimensions.get('window').width,
height: 55,
backgroundColor: '#F2F2F2'
},
})
Using following code you can align your picker selection left of Cell in IOS.Set Picker style to absolute:'position'andzIndex:1.This code is also working on both platform android and IOS.
Please check working expo code:-
https://snack.expo.io/#vishal7008/picker-size-issue
import * as React from 'react';
import {
TouchableOpacity,
Text,
TextInput,
Picker,
Platform,
Button,
View,
Dimensions,
StyleSheet,
} from 'react-native';
export default class App extends React.Component {
state = {
cell_country_code: 'Select code',
isPickerVisible: false,
};
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Username"
autoCapitalize="none"
placeholderTextColor="white"
onChangeText={val => this.onChangeText('username', val)}
/>
<View style={styles.flexBox}>
<View style={{ flex: 2, height: Platform.OS=='ios'?55:50,Platform.OS=='ios'?0:5, marginLeft: 5, marginRight: 5 }}>
{ Platform.OS=='ios' && <TouchableOpacity
style={{ flex: 1 }}
onPress={() => {
this.setState({ isPickerVisible: !this.state.isPickerVisible });
}}>
<TextInput
editable={false}
pointerEvents="none"
style={styles.inputLeft}
placeholder="Username"
autoCapitalize="none"
placeholderTextColor="white"
value={this.state.cell_country_code}
/>
</TouchableOpacity>
}
{this.state.isPickerVisible && Platform.OS=='ios' ?
<Picker //<<<==== Picker code
selectedValue={this.state.cell_country_code}
style={styles.inputLeft1}
itemStyle={{
backgroundColor: '#e9e9e9',
color: 'black',
elevation: 10,
fontSize: 17,
}}
onValueChange={(itemValue, itemIndex) =>
this.setState({ cell_country_code: itemValue })
}>
<Picker.Item label="INDIA" value="+91" />
<Picker.Item label="CHINA" value="+86" />
<Picker.Item label="USA" value="+1" />
</Picker>
:Platform.OS=='android' ? <Picker //<<<==== Picker code
selectedValue={this.state.cell_country_code}
style={styles.inputLeftAndroid}
itemStyle={{
backgroundColor: '#e9e9e9',
color: 'white',
elevation: 10,
fontSize: 15,
}}
onValueChange={(itemValue, itemIndex) =>
this.setState({ cell_country_code: itemValue })
}>
<Picker.Item label="Select Code" value="+91" />
<Picker.Item label="INDIA" value="+91" />
<Picker.Item label="CHINA" value="+86" />
<Picker.Item label="USA" value="+1" />
</Picker>: null}
</View>
<TextInput
style={styles.inputRight}
placeholder="Cell"
keyboardType="number-pad"
autoCapitalize="none"
placeholderTextColor="white"
onChangeText={val => this.onChangeText('cell', val)}
/>
</View>
<TextInput
style={styles.input}
placeholder="Corp Name"
autoCapitalize="none"
placeholderTextColor="white"
onChangeText={val => this.onChangeText('corp_name', val)}
/>
<View style={{ flexDirection: 'row' }}>
<Button title="Sign Up" onPress={this.signUp} />
<Button title="Enter Code" onPress={this.enterCode} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
width: Dimensions.get('window').width - 10,
height: 50,
backgroundColor: '#42A5F5',
margin: 5,
padding: 8,
color: 'white',
borderRadius: 2,
fontSize: 15,
fontWeight: '500',
},
inputRight: {
flex: 5,
height: 50,
backgroundColor: '#42A5F5',
marginTop: 5,
marginRight: 5,
padding: 8,
color: 'white',
borderRadius: 2,
fontSize: 15,
fontWeight: '500',
},
inputLeft: {
flex: 3,
height: 58,
marginTop: 5,
backgroundColor: '#42A5F5',
padding: 8,
color: 'white',
borderRadius: 2,
fontSize: 15,
fontWeight: '500',
},
inputLeft1: {
flex: 0,
height: 0.1,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 8,
margin: 5,
},
flexBox: {
flexDirection: 'row',
width: Dimensions.get('window').width,
height: 50,
absolute: 'position',
zIndex: 1,
justifyContent: 'space-evenly',
marginBottom: 10,
},
});
Output:-