How to justify (left, right, center) each child independently?

Question

In react native I have:

  {\'<\'}
    
      Fitness &a         


        

Answer 1

One way is to use nested View (flex containers) for 3 different regions and set flex:1 to left and right region

  
    
      {'<'}
    
  
  
    Fitness & Nutrition Tracking
  
  
    
  


const styles = StyleSheet.create({
  navBar: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  leftContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'green'
  },
  rightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  rightIcon: {
    height: 10,
    width: 10,
    resizeMode: 'contain',
    backgroundColor: 'white',
  }
});