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>
Related
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
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>
I want to use my own icon group in native-base.i read this post How to add custom Icons to NativeBase
bu nothing to show. this is my code I want to use, in first Item after added icon placeholder remove:
<View style={styles.view}>
<Item floatingLabel style={{ width: w / 1.9, height: w / 7, borderColor: '#507783', marginBottom: 0, }} >
<Icon><MyIcon name="ico_user" style={{ color: "#fff" }}/></Icon>
<Input returnKeyType='next' autoCapitalize="none" onChangeText={text => setUsername(text)} style={{ paddingBottom: 0, color: '#fff', textAlign: 'left', fontFamily: 'IRANSansMobile', fontSize: 12, marginLeft: 8, }} placeholderTextColor="#507783" placeholder='نام کاربری' />
</Item>
<Item floatingLabel secureTextEntry={true} style={{ width: w / 1.9, height: w / 7, borderColor: '#507783' }} >
<Icon type="Fontisto" name="locked" fontSize={25} style={{ color: "#fff" }} />
<Input returnKeyType='next' autoCapitalize="none" onChangeText={text => setUsername(text)} style={{ color: '#fff', textAlign: 'left', fontFamily: 'IRANSansMobile', fontSize: 12, marginLeft: 8, }} placeholderTextColor="#507783" placeholder='رمز عبور' />
</Item>
<Button block style={{ width: w / 1.9, height: 40, backgroundColor: '#59c5b9', marginTop: 56 }} onPress={() => internet.isConnected ? _goLogin() : Alert.alert('لطفا اتصال به اینترنت خود را بررسی نمایید')}>
<Text style={styles.btntext}>ورود</Text>
</Button>
</View>
and this is my icon-fon.js:
import {createIconSetFromFontello} from 'react-native-vector-icons';
import fontelloConfig from './ecfco.json';
const Icon = createIconSetFromFontello(fontelloConfig,'ecfco');
export default Icon;
and i check this directory in android:android/app/src/main/assets/fonts font correctly added.
and check ios version evry think is ok but not working.
and native-base version : "native-base": "^2.13.12",
UPDATE:
when using MyIcon outside of Item work perfectly but when used an icon for Input nothing to show
thank for helping solve this problem.
I solved it. read this post on gihub : Trying to add an Image on the right of a Label. It's working fine with stackedlabel but floating label is making the image
change my way, replace Icon to Thumbnail and correct code below:
<Item floatingLabel >
<Thumbnail square source={require('../../assets/Newimage/Login/ico_user.png')} resizeMode='center' />
<Label>نام کاربری</Label>
<Input returnKeyType='next' autoCapitalize="none" onChangeText={text => setUsername(text)} />
</Item>
I want to start showing the text inside the picker component from the start without any padding applied. I researched but couldn't find a solution. I'm debugging in android.
My code:
<View style={[styles.pickerContainer]}>
<Picker
selectedValue={this.state.phoneCountryCode}
style={[styles.pickerText(text),{backgroundColor:'transparent', width: 80 }]}
itemStyle={{padding:0, backgroundColor:'yellow'}}
mode="dropdown"
onValueChange={(itemValue, itemIndex) =>
this.setState({ phoneCountryCode: itemValue })
}>
{Constants.CountryCodes.map((item, index) => (
<Picker.Item key={item} label={item.label} value={item.value} />
))}
</Picker>
</View>
Style:
pickerContainer:{
marginTop: 10,
position: 'absolute', left:0, bottom:0, zIndex:10,
},
pickerText:(text)=>({
color:'gray',
height: 40,
textAlign: 'left',
padding:0,
margin: 0,
}),
I had same issue with Picker component, it's quite tricky to style it correctly, I'm leaving some of my findings.
use negative marginLeft to remove padding on the left.
use width and wrapper view to manage padding on right.
use height to fix vertical padding.
Just in case you can afford one dependency check some third-party components like
this
it's highly customizable
PS: You may have figured it by now, but I'm still leaving a remark for anyone else.
Disclaimer: Works for Android and I do not know if it works for IOS.
In my case it was sufficient to set margin to -16 (as padding is set to 16 for picker) and to wrap picker into view with following things set in style: overflow: 'hidden', justifyContent: 'center', display: 'flex'.
Now it is possible to set up padding by setting up padding on view. BTW setting height on view also works for picker.
<View
style={{
width: '70%',
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'black',
height: 20,
padding: 6,
overflow: 'hidden',
justifyContent: 'center',
display: 'flex',
}}>
<Picker
mode="dropdown"
style={{
backgroundColor: 'yellow',
margin: -16,
}}
onValueChange={(itemValue, itemIndex) => {}}>
<Picker.Item label="Java" value="java" style={{fontSize: 10}} />
<Picker.Item label="JavaScript" value="js" style={{fontSize: 10}} />
</Picker>
</View>
When my Picker is embedded in Modal, it doesn't appear on screen (only tested for android)
renderModal() {
return (
<Modal
transparent={true}
visible={this.state.showModal}
onRequestClose={() => this.setState({ modalIsVisible: false })}
animationType={'fade'}>
<View
style={{ backgroundColor:'rgba(0, 0, 0, 0.7)', flex: 1, justifyContent: 'center', padding: 20, height:100 }}>
<View style={{ borderRadius:10, alignItems: 'center', backgroundColor: '#fff', padding: 20 }}>
<Text>
Choisissez la priorité de cet emplacement
</Text>
<Picker
selectedValue={this.state.storagePriority}
onValueChange={(priority) => this.setState({storagePriority: priority})}>
<Picker.Item label="Basse" value="LOW" />
<Picker.Item label="Normale" value="MEDIAN" />
<Picker.Item label="Haute" value="HIGH" />
<Picker.Item label="Réserve" value="STOCK" />
</Picker>
</View>
</View>
</Modal>
);
}
Any suggestion?
Give proper styling for picker and run it.
Here is a sample code for styling picker.
<Picker
style={styles.picker}
mode="dropdown"
itemStyle={styles.itemStyle}>
<Item label="Basse" value="LOW" />
<Item label="Normale" value="MEDIAN" />
</Picker>
styles:
itemStyle: {
fontSize: 15,
height: 75,
color: 'black',
textAlign: 'center',
fontWeight: 'bold'
}
picker: {
width: 100
},
Setting a style={{ width: 100 }} for Picker solved it