In the current setup, my username text is positioned in the center of the view. I want to reconfigure it so that it displays directly to the right of the thumbnail. However, removing the alignItems: 'center', property from the item disrupts the entire style. Are there any alternative solutions to address this issue?
import { StyleSheet, Alert } from 'react-native';
import { View, Text, Button, Thumbnail } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import { moderateScale } from 'react-native-size-matters';
import { TouchableOpacity } from 'react-native-gesture-handler';
return (
<View style={styles.item}>
<TouchableOpacity>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}
/>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>USER NAME</Text>
</View>
<Button
rounded
style={styles.deleteButton}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
);
};
const styles = StyleSheet.create({
item: {
backgroundColor: 'pink',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(70),
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
thumbnail: {
height: 70,
width: 70,
position: 'relative',
},
nameContainer: {
//flex: 1,
// alignItems: 'center',
// textAlign: 'center',
},
userName: {
paddingRight: moderateScale(55),
paddingLeft: moderateScale(20),
//textAlign: 'center',
color: 'white',
fontWeight: '900'
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
horizontalLine: {
marginTop: moderateScale(30),
width: '87%',
height: moderateScale(1),
backgroundColor: 'grey',
alignSelf: 'center',
},
});
I attempted to create a snack expo project but encountered difficulties using native base within it.