0

I am trying to achieve the following result using flexbox in react native styles:

desired result

The title is in the center relative to the whole container, while being next to the icon. One thought that comes to mind is to use flexbox with flexDirection set to 'row'. But the effect is what you would expect. Every element has its own "subview" and shares a parent container, thus it is not possible to center the child relative to parent container. This is what I am getting instead of the desired result:

enter image description here

Certainly, I can align the elements to the left, and eyeball it with padding, but I would rather use a method that would give me a consistent result across all device screens. Is there a way to achieve the desired result using flexbox? If no, what can I use instead?

Here is the code:

 <View style={styles.phraseContainer}>
   <View style={styles.flagContainer}>
     <Flag code={'US'} style={styles.flag} />
   </View>
   <View style={styles.phraseTextContainer}>
     <Text style={styles.phraseText}>
       {props.data[props.index].phrase}
     </Text>
   </View>
 </View>


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  phraseContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  flagContainer: {
    flex: 1,
  },
  flag: {
    width: 30,
    height: 30,
  },
  phraseTextContainer: {
    flex: 1,
  },
  phraseText: {
    fontSize: 25,
  },
});
Dex
  • 153
  • 1
  • 14
  • 1
    Take the icon out of the document flow by positioning it absolutely in the parent, so it does not affect the flex layout. – Terry Aug 02 '21 at 12:50

1 Answers1

1

try chaging flagContainer like this:

flagContainer: {
    position: 'absolute',
    left: 15
  },
D10S
  • 1,468
  • 2
  • 7
  • 13