Currently, my username text appears in the center of the view. I want to change it such that it appears on the exact right of the thumbnail. If I remove the alignItems: 'center',
from the item, it disturbs the whole style. How else can I fix this?
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 tried creating a snack expo but I am unable to use native base in it.