I have some icon buttons inside a view which is pushed to the right of the container by flex direction row on the parent. Currently I cannot align them vertically in the middle of the container. Here is the code I have:
JSX:
<View style={styles.groupContainer}>
<View style={styles.groupTextContainer}>
<Text style={styles.groupText}>{title.toUpperCase()}</Text>
</View>
<View style={styles.groupButtonsContainer}>
<Icon
key={name + type}
onPress={onPress}
style={{marginLeft: 8}}
name={name}
type={type}
color='silver' />
<Icon
key={name + type}
onPress={onPress}
style={{marginLeft: 8}}
name={name}
type={type}
color='silver' />
</View>
</View>
styles:
groupContainer: {
backgroundColor: '#ddd',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
groupText: {
fontWeight: 'bold',
color: '#808080',
},
groupTextContainer: {
padding: 10,
alignSelf: 'flex-start',
},
groupButtonsContainer: {
alignSelf: 'flex-end',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}
UPDATE
Forgot to mention that Icon is a react-native-elements component.
I need it to look like this:
But I get this:
<View style={styles.groupContainer}>
<View style={styles.groupButtonsContainer}>
<Text style={styles.groupText}>{title.toUpperCase()}</Text>
<Icon
key={name + type}
onPress={onPress}
style={{marginLeft: 8}}
name={name}
type={type}
color='silver' />
</View>
</View>
mybe you can follow this code and you restyle from text
Related
I have a hidden animated view that displays when you click on the specific account name. Currently, when you click an account name, the animated hidden view displays for all the children in the .map() function. I tried adding the key and id to the animated view as well but that does not work either. Still shows the hidden animated view for all the children in the map.
<ScrollView style={{flex: 1}} showsVerticalScrollIndicator={true}>
{accounts.map(account => (
<View key={account.id} id={account.id}>
<View
style={{
width: '100%',
backgroundColor: colors.primary,
borderRadius: 10,
padding: 10,
marginBottom: 10,
marginTop: 10,
zIndex: 1,
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
}}>
<Text
onPress={() => setHidden(!hidden)}
style={{
fontSize: 30,
textAlign: 'left',
flex: 1,
marginTop: 'auto',
marginBottom: 'auto',
}}>
{account.name}
</Text>
<View>
<Text
style={{
fontSize: 30,
textAlign: 'right',
flex: 1,
marginBottom: 10,
}}>
{account.amount}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
}}>
<DeleteAccount account={account.name} />
<Icon name="wrench" size={25} color="#000000" />
</View>
</View>
</View>
</View>
{hidden ? (
<Animated.View
key={account.id}
id={account.id}
style={[
styles.subView,
{transform: [{translateY: bounceValue}]},
]}>
<Text>{account.name}</Text>
</Animated.View>
) : null}
</View>
))}
</ScrollView>```
I have a screen that looks like this:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
</View>
</View>
</SafeAreaView>
);
Its Stlyes are as like this:
export const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
topContainer: {
height: moderateScale(750),
},
topTextContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: moderateScale(15),
height: moderateScale(30),
paddingLeft: moderateScale(30),
paddingRight: moderateScale(30),
},
topMiddleContainer: {
alignItems: 'center',
},
topMiddleText: {
justifyContent: 'center',
paddingBottom: 40,
},
searchFieldContainer: {
alignItems: 'center',
height: moderateScale(120),
},
button: {
width: moderateScale(120),
borderRadius: moderateScale(20),
alignItems: 'center',
alignContent: 'center',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
},
searchField: {
width: moderateScale(300, 0.3),
height: verticalScale(40),
marginVertical: moderateScale(3),
borderRadius: verticalScale(10),
},
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
}
});
When I write something in the first input field, I get search results through the LocationsFound component. However, the search results start to hide behind the second input field. I want it to simply overlap and come on top of the second field until one of them is selected. Is that possible?
Have you tried zIndex?
dropdown:{
position: 'absolute',
top: 200,
zIndex: 10,
backgroundColor: '#fff'
}
It works for me I gave negative zIndex to the View which was showing on my dropdown list.
<View>
<DropDownPicker ... />
</View>
<View style={{ zIndex : -5 }}>
<Button ... />
<Button ... />
</View>
The first thing you could try is to change the order of your DOM objects and be sure to add your result as last item:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
</View>
</View>
</SafeAreaView>
);
Another solution could be to add a z-index to your dropDown:
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
zIndex: 1 // ... or more
}
I fixed this issue by adding dropDownDirection="TOP" props into dropdown component which render dropdown container upside.
<DropDownPicker
dropDownDirection="TOP"
...
/>
is there a way to put the text "cancel" and "ok" below the avatar button? I mean that the avatar and the text need to be pressable when click.
I can't put the text below to every button and I don't understand what is my mistake.
this is what I get now
but I need the text below to every button and also must be also pressable same the image (it should be part of the button)
this is my example of code :
const OrderInformationScreen = props => {
return (
<View
style={{
backgroundColor: '#00BFFF',
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
flexDirection: "row",
justifyContent: 'space-evenly'
}}
>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("cancel!")}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
<Avatar
size='large'
activeOpacity={0.2}
rounded
source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("Works!")}
/>
<View>
<Text style={{ fontSize: 30 }}>ok</Text>
</View>
</View>
);
};
I think the best option is wrapping the avatar and the text by TouchableOpacity.
<TouchableOpacity onPress={() => console.log("cancel!")}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
</TouchableOpacity>
I recommend to write your own styles by using basic react native elements. Try to use least number of 3rd party plugins. Good luck.
It is like that because of the styles you have given to view. You have given a flex direction row which will place all your elements in a row. You have given four elements in your root view which has style flex-direction row so all four elements in that view (2 Avatar component and 2 text) will be placed side by side in a row.
if you want text below image i thin you should put avatar and text box in a view and give that a view a flex-direction column like:
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<TouchableOpacity onPress={() => console.log("cancel!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("works!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<View>
hope this helps in someway :)
The best option is Wrapping the avatar and text with TouchableOpacity. and Add some more Styles like below
<TouchableOpacity style={{
backgroundColor: '#00BFFF',
display : "flex",
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
}} onPress={() => {}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel || ok</Text>
</View>
</TouchableOpacity>
I'm trying to adjust the homepage but I don't know how to change the position of the Text.
I have this code:
return (
<View style={style.container}>
<View style={style.page}>
<Icon
name="user-circle"
color="#56cbbe"
size={70}
onPress={() => Actions.visualizzaprofilo({ cf: Username })}
/>
<Text
style={{
paddingBottom: 15,
textAlign: "center",
fontSize: 15,
color: "#56cbbe",
fontWeight: "bold"
}}
onPress={() => Actions.visualizzaprofilo({})}
>
Visualizza il Profilo
</Text>
<Text style={{ textAlign: "center", fontSize: 20 }}>
{"Benvenuto"}
</Text>
<Text
style={{
textAlign: "center",
fontSize: 20,
color: "#56cbbe",
fontWeight: "bold"
}}
>
<TouchableOpacity
style={[style.button, style.buttonOK]}
onPress={() => this.checkFunction()}
>
<Text style={style.buttonTesto}>Inizia</Text>
</TouchableOpacity>
{this.modProfilo({ })}
{this.eliminaProfilo({ })}
{this.sensorCheck()}
{this.logout()}
</View>
</View>
Where for example modProfilo (and also the other have the same style):
modProfilo({}) {
<Text
style={{ color: "#56cbbe", paddingTop: 20 }}
onPress={() => Actions.modificaprofilo({ })}
>
MODIFICA PROFILO
</Text>
I need to transform the first image in the second one, how can i Do??
Enclose them in a view with flexDirection set to row and justifyContent set to space-between:
return (
<View style={style.container}>
...
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
{this.modProfilo({ })}
{this.eliminaProfilo({ })}
{this.sensorCheck()}
{this.logout()}
</View>
...
</View>
flexDirection: 'row'
This will do the required job. BY default the flex direction is vertical. U just need to change into horizontal.
Added a View (let id be OuterView) and add button inside it. Add below styles in your code:
OuterView: {
flex: 1,
flexDirection: 'row',
},
buttonsStyle: {
flex: 1,
}
Within a popup dialog I want to buttons to be placed on the same line but now I'm getting like this https://i.stack.imgur.com/sJ30p.png.Following is the style given.
<PopupDialog
ref={popupDialog => {
this.popupDialog = popupDialog;
}}
dialogStyle={{ backgroundColor: "#ddd", height: 200, width:320, border:10,padding:10}}
overlayBackgroundColor="#fff"
dismissOnTouchOutside={true}
>
<View style={styles.dialogContentView}>
<Text style={{fontSize:18}}>Are you sure you want to submit?</Text>
<View style={styles.button_1}>
<Button
title="Yes"
onPress={() => {
console.log('clicked')
}}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
onPress={() => {
console.log('clicked')
}}
/>
</View>
</View>
</PopupDialog>
.....
....
dialogContentView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
},
button_1:{
width: '40%',
height: 30,
}
Add View parent to both Button component with style flexDirection: 'row' after </Text>
<View style={{ flexDirection: 'row' }}>
<View style={styles.button_1}>
<Button
title="Yes"
onPress={() => {
console.log('clicked');
}}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
onPress={() => {
console.log('clicked');
}}
/>
</View>
</View>
You can try this snack
Try this for full width without any spaces or margin JUST COPY PASTE
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 1 }}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9' }} onPress={() => { onSavePress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Save</Text>
</TouchableOpacity>
</View>
<View style={{borderLeftWidth: 1,borderLeftColor: 'white'}}/>
<View style={{ flex: 1}}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9'}} onPress={() => { onCancelPress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Cancel</Text>
</TouchableOpacity>
</View>
</View>
To do that, I usually create a view, set its flexDirection to 'row' and put the button components inside of it. So, your code would look like this:
<View style={{ flexDirection: 'row' }}>
<Button title='Button 1'/>
<Button title='Button 2'/>
</View>
I hope it helps.