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.
Related
In ios it is ok however when i click input in android, button appears over keyboard and it seems so bad. how can i handle that ? this is my code:
<>
<SafeAreaView style={styles.container}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
keyboardShouldPersistTaps="handled"
style={styles.scrollviewStyle}
>
<FormInput label="1" />
<FormInput label="2" />
<FormInput label="3" />
<FormInput label="4" />
<FormInput label="5" icon={true} />
<Text
style={{
color: '#938E8E',
marginLeft: 30,
fontSize: 14,
fontWeight: '400',
}}
>
text
</Text>
<Dropdown />
<View style={styles.agreementContainer}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CheckBox onPress={chekboxButton} checked={toggleCheckBox} />
<TouchableOpacity>
<Text style={styles.acceptagreementStyle}>
text
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
</SafeAreaView>
</>
this button comes over keyboard:
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
If I understood your question correctly, you can easily fix this problem using
<KeyboardAvoidingView> https://reactnative.dev/docs/keyboardavoidingview
and wrapping your component with that.
this is because android:windowSoftInputMode property in AndroidManifest.xml which is set to adjustResize by default
you have 2 solutions
1 : change your android/app/src/main/AndroidManifest.xml
<activity
....
android:windowSoftInputMode="adjustPan">
2 : use react-native-android-keyboard-adjust
import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
.....
AndroidKeyboardAdjust.setAdjustPan();
I started using React native and React native Elements. I'm trying to have buttons one under another with some space between buttons and left and right side.
<View style={styles.container}>
<ThemeProvider>
<Button
buttonStyle={styles.btnStyle}
icon={
<Icon
name="arrow-right"
size={15}
color="white"
/>
}
title="My BTN 1"
/>
<Button
buttonStyle={styles.btnStyle}
icon={
<Icon
name="arrow-right"
size={15}
color="white"
/>
}
title="My BTN 2"
/>
<Button
buttonStyle={styles.btnStyle}
icon={
<Icon
name="arrow-right"
size={15}
color="white"
/>
}
title="My BTN 3"
/>
</ThemeProvider>
</View>
And the styles:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
btnStyle: {
marginBottom: 5,
width: '90%'
}
});
It is displaying one beside another and not respecting the size of the mobile device.
Thanks
You need to remove this one from your stylesheet
flexDirection: 'row'
Or, simply change it into
flexDirection: 'column'
Scroll view not scrolling
Example that I'm trying on Expo:
<View style={{flex: 1}}>
<ScrollView
contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
</View>
</ScrollView>
</View>
The problem is that in Android other touchable steals user’s touch event that's why you can not scroll the ScrollView but many times it works as expected on IOS platform. I guess you just need to add onStartShouldSetResponder={() => true} to the View which wraps the intended ScrollView. Can you please try below code:
<View onStartShouldSetResponder={() => true}>
<ScrollView>
<View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
</View>
</ScrollView>
</View>
I hope this helps!
Maybe you can add flex: 1 on ScrollView
If doesnt work you can try make something like this:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';
export default class App extends Component {
render() {
return (
<ScrollView>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
welcome: {
flex: 1,
margin: 20,
backgroundColor: 'orange',
margin: 10,
textAlign: 'center',
fontSize: 20,
paddingTop: 70,
}
});
Can you try this?
<View style={{flex: 1}}>
<ScrollView
style={{ flex: 1 }}>
<View style={{flexDirection: 'row', flexWrap: 'wrap' }}>
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
</View>
</ScrollView>
</View>
If the content total height is greater than the scroll view, then only the scroll view will scroll.
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:
I have two buttons that look like this
This is the code
render = () => (
<Image
source={require('../../images/login.jpg')}
style={[AppStyles.containerCentered, AppStyles.container, styles.background]}
>
<Image
source={require('../../images/logo.png')}
style={[styles.logo]}
/>
<Spacer size={200} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Login'}
icon={{ name: 'lock' }}
onPress={Actions.login}
/>
</View>
</View>
<Spacer size={10} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Sign up'}
backgroundColor={'#FB6567'}
icon={{ name: 'face' }}
onPress={Actions.signUp}
/>
</View>
</View>
</Image>
)
I want the buttons to occupy one row and possibly share 40% - 40% of the space with the rest of the 20% going to the padding. How can i have them occupy one row?.
You'd need to define a container with flexDirection set to row and use justifyContent depending on where you want your padding:
render() {
return (
<View style={styles.container}>
<View style={styles.button} />
<View style={styles.button} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
button: {
backgroundColor: 'green',
width: '40%',
height: 40
}
});
Change space-between to space-around if you want the padding to be distributed to the sides too. (Demo)