I'm trying to align a picker where the user selects a phone country code with a text input where the user enters the phone number. I'm using the NativeBase component but I assume this is similar with the standard React Native component.
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.2 }}>
<Picker note selectedValue={this.state.phoneCountry}
onValueChange={value => {this.setState({ phoneCountry = value })}}>
<Picker.Item label="US +1" value="us" />
// other items ....
</Picker>
</View>
<View style={{ flex: 0.8 }}>
<Input keyboardType='number-pad' onChangeText={text => {this.state.phone = text}} />
</View>
</View>
This is what the output looks like (including the previous input field and labels for better view):
The issue that I have is that in the picker, there is a padding that makes the text not align with the input that's side-by-side to it. It also seems that the text is centered in the picker. I tried changing the styles on both the picker in the items to change the textAlign, padding and margin but none of these seem to be the source of the issue since changing them doesn't move the text within the picker.
To align Text in picker Item, you should use textAlign property of itemStyle like below:
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.2 }}>
<Picker
itemStyle={{ color: 'red', textAlign: 'left' }}
selectedValue={this.state.phoneCountry}
onValueChange={value => { this.setState({ phoneCountry : value }) }}>
<Picker.Item label="US +1" value="us" />
</Picker>
</View>
</View>
just to help you I tried this code and below is the output:
Related
I'm using react-native-floating-label-input package and the label has a background colour if I click on it. Can you help me how I can remove it? I read the documentation and messaged a creator but to no avail.
<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
<FloatingLabelInput
label={'label'}
value={cont}
onChangeText={value => setCont(value)}
/>
</View>
I tried to add backgroudnColor for labelStyle, but as you can see on the second picture the problem is with background colour behind the text.
label={'label'}
value={cont}
onChangeText={value => setCont(value)}
labelStyles={{ backgroundColor: '#ad8b8b', padding: 12 }}
If you check the source code and styling here: https://github.com/Cnilton/react-native-floating-label-input/blob/master/src/index.tsx#L361
you can find that the property labelStyles is merged with global style.
Try to provide labelStyles with the same background colour value as your input.
<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
<FloatingLabelInput
label={'label'}
value={cont}
labelStyles={backgroundColor: '#fff'}
onChangeText={value => setCont(value)}
/>
</View>
I want to add prefix to my text input and I would like to know how to do it.
Text Input Code
<TextInput
style={styles.inputs}
placeholder="Mobile Number"
keyboardType="number-pad"
underlineColorAndroid="transparent"
onChangeText={mobile_number => this.setState({mobile_number})}
/>
Final output I want
You can do it like that:
render() {
return (
<View style={styles.inputContainer}>
<Text style={styles.prefix}>+94</Text>
<TextInput
placeholder="Mobile Number"
keyboardType="number-pad"
underlineColorAndroid="transparent"
onChangeText={mobile_number => this.setState({ mobile_number })}
/>
</View>
)
}
const styles = StyleSheet.create({
inputContainer: {
borderWidth: 1,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
marginHorizontal: 10,
borderRadius: 10
},
prefix: {
paddingHorizontal: 10,
fontWeight: 'bold',
color: 'black'
}
})
If you don't want the prefix to be editable, use a label:
<View>
<Label />
<TextInput />
<View>
You can use a text mask. Try this
https://github.com/react-native-community/react-native-text-input-mask
To handle phone number inputs
https://www.npmjs.com/package/react-phone-number-input
You can do it combination of two textinput. One is for prefix and other is for input text.
like this:
<View>
<TextInput /> // Text or dropdown pick, something else
<TextInput />
<View>
I created a custom dropdown component which has a transparent Scrollview with ToucableOpacity elements. However the onPress on them are not working, even though, zIndex is making them appear on top of everything else.
In the main screen, I created two elements, 1 header containing the Dropdown and 2nd one is the body which contains the rest. Its code is given below:
<View style={styles.body, {zIndex:0}}>
<View style={[styles.header,{zIndex:1}]}>
<Text style={styles.header_text}>Search In </Text>
<Dropdown items={CATEGORIES}/>
</View>
<View style={[styles.main,{zIndex:-1}]}>
<Text style={{backgroundColor:'blue'}}>I am the body</Text>
</View>
<View>
I have included the render event markup of the Dropdown element. Its code is given below:
<View style={styles.container}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Text>-V-</Text>
</TouchableOpacity>
<View style={{zIndex:3}}>
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
<ScrollView style={{height:60,zIndex:4}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{zIndex:5}}
disabled={this.state.disabled}
key={i}
onPress={()=>this.selectItem(i)}>
<Text >{item} {i}</Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
Styles for Dropdown are:
container:{
zIndex:2
},
main_container:{
flexDirection: 'row',zIndex:2
},
text:{
fontFamily: fontStyles.PoppinsRegular,
fontSize: moderateScale(14)
},
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%',
zIndex:3
}
Screenshot is given as. zIndex makes the elements appear on top but i cannot trigger onPress on Toucable opacities.
I am trying to navigate to the same screen from two different place and passing different parameters to show additional contents.
Navigation code
// I am navigating to Worklogs screen from both places.
// In the first case only passing the current date as parameter
// and in the second case one extra parameter showPending
<View style={styles.row}>
// first touchable. don't want to show pending worklogs if navigated using this
<Touchable
style={styles.widgets}
onPress={() => this.navigateToScreen('Worklogs', {date: this.getToday()})}
>
<View style={{ flex: 1}}>
<View style={{ flex: 2, alignItems: 'center' }}>
<Image
source={require('../assets/images/todayworklog.png')}
style={{ resizeMode: 'contain', height: 50}}
/>
</View>
<View style={{ flex: 1 }}>
<Text> Today Worklog </Text>
<Text style={{ alignSelf: 'center', fontSize: 12, color: '#33b0df' }}>{worklogs.total_time} Hours</Text>
</View>
</View>
</Touchable>
// 2nd touchable. show pending worklogs if navigated from here
<Touchable
style={styles.widgets}
onPress={() => this.navigateToScreen('Worklogs', {date: this.getToday(), showPending: true})}
>
<View style={{ flex: 1}}>
<View style={{ flex: 2, alignItems: 'center' }}>
<Image
source={require('../assets/images/pendingworklog.png')}
style={{ resizeMode: 'contain', height: 50}}
/>
</View>
<View style={{ flex: 1 }}>
<Text> Pending Worklog </Text>
</View>
</View>
</Touchable>
</View>
// navigate to screen code
navigateToScreen(screenName, parameters) {
if(this.isEmpty(parameters)) {
this.props.navigation.navigate(screenName);
} else {
this.props.navigation.navigate(screenName, parameters);
}
}
In the render method of Worklogs screen I am checking for the showPending value to render an additional component.
const { params } = this.props.navigation.state;
{ (params && params.showPending)
? <PendingWorklogList pendingWorklogs={this.state.pending_worklogs} />
: <View />
}
Now if I navigate to Worklogs screen by tapping the first <Touchable />, showPending is not in the parameters and <PendingWorklogList /> component is not being rendered. Navigating from the 2nd <Touchable /> adds showPending to the parameters and <PendingWorklogList /> is rendered.
But if I go back and navigate to Worklogs again by tapping the first <Touchable /> the showPending parameter is still present so <PendingWorklogList /> is being rendered. But I would like to render <PendingWorklogList /> only if I navigate from the 2nd <Touchable />.
How do we align a Text to be next to an Input in React Native? In the image below the Text is in the top left but the Picker seems to have padding or margin applied. I tried other solutions with flex but also ran into this problem
This works for me -
<View style={styles.Container}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{flex:.5}}>
<Text>Placeholder</Text>
</View>
<View style={{flex:.5}}>
<Picker>
<Picker.Item label="Java" value="java"/>
<Picker.Item label="JavaScript" value="js"/>
</Picker>
</View>
</View>
</View>
You can change the flex values according to your needs.
I have a similar problem with the picker. Give equal flex for both text and picker(eg: parent have flex: 1 and give flex: 0.5 to both text and picker ). Better to give height and width to the picker according to your screen size. I think you didn't give flexDirection(row) to that the parent View. And also give height and width for items to the picker.
Sample code for giving style to picker:
<Picker
style={styles.picker}
mode="dropdown"
itemStyle={styles.itemStyle}>
<Item label="1 Hr" value="1" />
<Item label="4 Hrs" value="4" />
<Item label="8 Hrs" value="8" />
<Item label="16 Hrs" value="16" />
<Item label="24 Hrs" value="24" />
</Picker>
Styles:
itemStyle: {
fontSize: 15,
height: 75,
color: 'black',
textAlign: 'center',
fontWeight: 'bold'
}
picker: {
width: 100
},
Its working for me.
Thanks.
<View style={styles.Container}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{flex:.5}}>
<Text>Placeholder</Text>
</View>
<View style={{flex:.5}}>
<Picker itemStyle={{textAlign:"left"}}>
<Picker.Item label="Java" value="java"/>
<Picker.Item label="JavaScript" value="js"/>
</Picker>
</View>
</View>
This worked for me.