I am trying to align vertically TextInput with Icons and I tried various style rules, but it doesn't work. In iOS, layout is correct, but in Android elements are not aligned vertically.
<View style={styles.headerContainer}>
<TextInput
style={styles.input}
autoCorrect={false}
onChangeText={(value) => this.setState({ searchTextInputVal: value })}
returnKeyType="search"
placeholder="Type Here..."
value={this.state.searchTextInputVal}
underlineColorAndroid="transparent"
/>
<Icon
size={25}
style={[styles.icon, styles.searchIcon]}
name="search"
color={Colors.grey}
/>
<Icon
size={25}
style={[styles.icon, styles.clearIcon]}
name="close"
onPress={this.onClearTextInput.bind(this)}
color={Colors.grey}
/>
</View>
input: {
paddingLeft: 35,
paddingRight: 19,
margin: 8,
borderRadius: 3,
overflow: 'hidden',
borderColor: Colors.grey,
borderWidth: 1,
fontSize: 16,
color: Colors.darkBlue,
height: 40,
...Platform.select({
ios: {
height: 40,
},
android: {
borderWidth: 0,
},
}),
},
searchIcon: {
left: 16,
color: Colors.grey,
},
clearIcon: {
right: 16,
color: Colors.grey,
},
The TextInput component in android has by default some paddings & margins, that are added to the ones that you set in the input style. If you use Toggle Inspector option, you might see them.
I didn't notice I had another style:
icon: {
backgroundColor: 'transparent',
position: 'absolute',
color: 'white',
top: 15.5,
...Platform.select({
android: {
top: 20,
},
}),
},
When I removed:
top: 15.5,
...Platform.select({
android: {
top: 20,
},
}),
and added: justifyContent: 'center', it works now.
Related
My Android app built using React Native doesn't allow one to scroll a DropDownPicker (github.com/hossein-zare/react-native-dropdown-picker). What can be changed in the below code to fix this? The parent components and relevant styles can be found below. The code itself is also wrapped in a flex 1 container view.
<View style = {styles.dropdownContainerIn}>
<TextInput
keyboardType = "number-pad"
style = {styles.toAmount}
placeholder="Amount"
placeholderTextColor="white"
value = {text}
editable = {false}
maxLength = {18}
/>
<DropDownPicker
placeholder={from}
open={openFrom}
items={baseCurrencies}
setOpen={setOpenFrom}
onOpen={() => setOpenTo(false)}
setItems={setBases}
onSelectItem={(from) => {setFrom(from.label)}}
style={styles.dropdown}
textStyle={styles.dropdownText}
dropDownContainerStyle={styles.dropdownOption}
searchable = {true}
searchPlaceholder="Search"
/>
</View>
dropdown:{
backgroundColor: "transparent",
borderColor: 'white',
borderWidth: 3,
width: 120,
height: 60,
borderRadius: 3,
flex: 1
},
dropdownText:{
fontSize: 15,
fontWeight: 'bold',
color: 'white',
},
dropdownOption:{
backgroundColor: '#123',
borderColor: 'white',
borderWidth: 2,
width: 340,
transform: [{translateX: -220}],
},
dropdownContainerIn:{
flexDirection: 'row',
transform: [{translateX: 140}, {translateY: 160}],
marginRight: 20,
},
toAmount:{
width: 220,
height: 60,
borderColor: 'white',
borderWidth: 3,
borderRadiusLeft: 3,
borderRightWidth: 0,
color: 'white',
fontSize: 20,
paddingLeft: 15,
},
For those encountering this issue add this line of code underneath the import statements: DropDownPicker.setListMode("MODAL")
I'm quite new to React Native and React in general, and I'm stuck on this particular problem:
I followed some tutorials and other answers on other posts there on StackOverflow, but I can't manage to see the border Shadow I set on these "cards". The shadow isn't displayed on my phone.
I hope so of you old wizards of the internet can help me find a solution to this problem, I'd be really grateful.
export class Boss extends Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
hp: props.hp,
ap: props.ap,
};
}
render(){
return(
<View style={styles.cardContainer}>
<View style={[styles.cardBackground , this.state.hp > 0 ?
{ backgroundColor: 'gold' }
: { backgroundColor: 'red' }]}>
<View style={styles.cardFrame}>
<Text style={styles.cardName}>{this.props.name}</Text>
<View style={styles.bossLifeWrapper}>
<Button title={'+'} onPress={this.incrementeHP}></Button>
<Text style={styles.bossHP}>{this.state.hp}</Text>
<Button title={'-'} onPress={this.decrementeHP}></Button>
</View>
<Text style={styles.bossAP}>{this.state.ap}</Text>
<Text style={styles.bossPowerLabel}>{this.props.passive}</Text>
<View style={styles.cardTextBox}>
<Text style={styles.bossPowerLabel}>Pouvoir: {this.props.powerLabel}</Text>
<Text style={styles.bossEnrageLabel}>Enrage: {this.props.enrageLabel}</Text>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
cardContainer: {
width: '80%',
height: 450,
backgroundColor: "#171314",
alignItems:"center",
borderStyle: "solid",
borderColor: "black",
borderWidth: 1,
margin: '10%',
borderRadius: 10,
padding: 10,
shadowColor: "white",
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.44,
shadowRadius: 10.32,
elevation: 16,
},
cardBackground: {
backgroundColor: '#171314',
borderRadius: 5,
padding: 10,
zIndex: 0
},
cardFrame: {
zIndex: 1,
position: 'relative',
height: '98%',
maxWidth: '97%',
left: '1%',
top: '0.5%',
display: 'flex',
flexDirection: 'column',
backgroundColor: 'white'
},
cardName: {
flex: 1,
backgroundColor: 'red',
alignItems:"center",
borderStyle: "solid",
borderBottomColor: "grey",
borderBottomWidth: 5,
margin: 5,
marginHorizontal: 5,
fontSize: 20,
height: 10
},
bossHP: {
width: '100%',
color: 'blue'
},
bossAP: {
width: '100%',
color: 'red'
},
bossLifeWrapper: {
flex: 1,
flexDirection: "column"
},
});
have you tried elevate in box styles? ex: elevate:10,
My layout with two inputs and a button works well without the keyboard. But as soon as I clicked the input box the keyboard appears and changes the height of the screen. Then things align wrong . I already tried using keyboard avoiding view. But the error is still there.
import {
StyleSheet,
Text,
View,
TextInput,
Button,
KeyboardAvoidingView,
} from 'react-native';
import { Formik} from 'formik';
import React, { Component } from 'react';
class Demo extends Component {
render(){
return (
<KeyboardAvoidingView style={styles.container} behavior= "position , padding , height">
<View style={styles.container}>
<Text style={styles.titleText}>Profile settings</Text>
<View style={styles.card}>
<Formik
initialValues={{
name: '',
mobile: '',
}}
onSubmit={(values) => {
console.log(JSON.stringify(values));
}}>
{(props) => (
<View>
<TextInput
placeholder={'name'}
onChangeText={props.handleChange('name')}
value={props.values.name}
style={styles.cardTextSmall}
/>
<TextInput
placeholder={'email'}
onChangeText={props.handleChange('mobile')}
value={props.values.mobile}
style={styles.cardTextSmall}
/>
<Button
title={'submit'}
/>
</View>
)}
</Formik>
<View style={styles.centerButton}></View>
</View>
</View>
</KeyboardAvoidingView>
);
};
}
const styles = StyleSheet.create({
centerButton: {
top: '1%',
alignContent: 'center',
alignItems: 'center',
},
titleText: {
fontFamily: 'Segoe UI',
fontSize: 30,
position: 'relative',
left: '7%',
top: 72,
},
cardContent: {
paddingHorizontal: '10%',
marginHorizontal: 10,
},
cardTextLarge: {
paddingTop: '15%',
fontSize: 18,
color: '#A6A6A6',
fontFamily: 'Segoe UI',
},
cardTextSmall: {
borderBottomColor: 'black',
borderBottomWidth: 1,
fontFamily: 'Segoe UI',
fontSize: 18,
color: '#404040',
},
cardTextModule: {
paddingLeft: '15%',
paddingTop: '2%',
fontFamily: 'Segoe UI',
fontSize: 18,
width: '100%',
color: '#404040',
},
card: {
borderRadius: 6,
backgroundColor: 'red',
shadowOpacity: 0.3,
shadowOffset: {width: 1, height: 1},
marginHorizontal: 4,
left: '6.5%',
top: '19%',
height: '78%',
width: '85%',
margin: 'auto',
position: 'relative',
zIndex: -1,
},
});
export default Demo;
I'm a beginner here. If you could please give me some explanation. thanks!
This is happening because you have used KeyboardAvoidingView with one of the behavior as padding. So whenever you click on TextInput it adds bottom padding to the view and view moves towards the top.
If you don't want it to happen, use View tag instead of KeyboardAvoidingView.
I have the following component:
export default class StoreComponent extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.scroll}>
<StoreCarouselComponent />
<StoreDiscountComponent />
<StoreDetailsComponent />
</ScrollView>
</View>
);
}
}
with this style
import { StyleSheet, Dimensions, } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
scroll: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center'
},
image: {
width: Dimensions.get('window').width,
height: 350,
},
box: {
width: Dimensions.get('window').width - 30,
position: 'absolute',
shadowColor: '#000000',
shadowOpacity: 0.34,
shadowRadius: 5,
shadowOffset: {
width: 0,
height: 10
},
elevation: 10,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
borderColor: 'lightgrey',
backgroundColor: '#ffffff',
padding: 10,
marginTop: 410,
},
boxDiscount: {
width: Dimensions.get('window').width - 30,
position: 'absolute',
shadowColor: '#000000',
shadowOpacity: 0.34,
shadowRadius: 5,
shadowOffset: {
width: 0,
height: 10
},
elevation: 10,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
borderColor: 'lightgrey',
backgroundColor: '#253241',
padding: 10,
marginTop: 320,
},
title: {
fontSize: 30
},
distance: {
fontSize: 20,
color: '#767676'
},
distanceElement: {
fontSize: 20,
color: '#44D9E6'
},
address: {
fontSize: 20,
color: '#767676'
},
category: {
fontSize: 20,
color: '#767676',
},
categoryElement: {
fontSize: 20,
color: '#44D9E6',
},
hr: {
borderBottomColor: 'lightgrey',
borderBottomWidth: 1,
},
icons: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}
});
export default styles;
my scrollview works on ios but on android don't and I don't understand why
here a an image of the app and as you can see I need to scroll on android:
try to import from
import { ScrollView } from 'react-native-gesture-handler';
instead of from
'react native'
Use flexGrow : 1 inside your styles.scroll instead of flex:1
use flex: 1 inside style={styles.container} and delete it from .scroll
I had a similar issue. The culprit turned out to be contentContainerStyle={{flex: 1}} on my ScrollView. Removing that (It turned out to be unnecessary, anyway.) fixed the problem on Android.
the styles on your scroll contentContainerStyle is uneccessary
try to remove : styles.scroll
and just give padding or margin on component if you to center it
if its row add props horizontal = true on ScrollView.
I too had the similar structure as mentioned in question. I had 3 direct children View inside ScrollView and it wasn't scrolling. I tried all above solutions with flex, flexGrow etc. Nothing worked for me.
What worked for me is wrapping all 3 direct children to another View, so for ScrollView there's only one direct children.
// THIS DOES NOT SCROLL
<ScrollView>
<View>// 1st direct children</View>
<View>// 2nd direct children</View>
<View>// 3rd direct children</View>
</ScrollView>
// THIS WILL SCROLL, As now ScrollView has only one direct children
<ScrollView>
<View>
<View>// 1st children</View>
<View>// 2nd children</View>
<View>// 3rd children</View>
</View>
</ScrollView>
I'm using react-navigation for navigate between screen.
In ios it display on center and working properly but in android it display left side and space between back button and title.
I want to remove space between back button and title on android.
My Code
class Detail extends Component {
.
.
.
static navigationOptions = ({ navigation }) => {
const {state} = navigation;
return {
headerTitle: "title",
headerStyle: {
borderBottomColor: 'transparent',
borderBottomWidth: 0,
backgroundColor: 'transparent',
elevation: 0 ,
shadowOpacity: 0,
shadowColor: 'transparent',
shadowRadius: 0,
shadowOffset: {
width: 0,
height: 0
}
},
headerTitleStyle: {
color: 'white',
width: width-72,
},
headerBackTitleStyle: {
color: 'white',
},
headerTintColor: 'white',
headerBackground: (
<LinearGradient
colors={[MyConstants.colorNavbarStart, MyConstants.colorNavbarEnd]}
style={{ flex: 1 ,padding: 0}}
start={{x: 0, y: 0.5}}
end={{x: 1, y: 0.5}} />
),
headerRight: (
<TouchableOpacity>
<View style={{padding: 8}}>
<Image source={MyConstants.imgShareArrow} style={{height:20, width: 20}} />
</View>
</TouchableOpacity>
),
headerLeft: (
<TouchableOpacity onPress={ () => {navigation.pop()}}>
<View style={{padding: 8}}>
<Image source={MyConstants.imgBackArrow} style={MyStyle.backButton} />
</View>
</TouchableOpacity>
)
};
};
}
In above code width is screen width and i'm using -72 because left and right button width.
I'm also using marginLeft in minus but it cut the title.
to remove space between back button and title you can use:
headerTitleContainerStyle: {
left: 0,
},
After Some change It's Working
Change headerTitle in above code
headerTitle:<Text numberOfLines={1} style={[MyStyle.appFontStyle1, {color: 'white', width: width- (Platform.OS==='ios'?72:118), fontSize: 20}]}>Title</Text>