Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

place text next to thumbnail instead of center

$
0
0

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.

enter image description here


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>