RN: Align items in a row both left and right

Question

Here is RN (0.59) component using sectionList to display an event name in a row. The renderItem renders 3 items in a row, starting with a head image (left image), then event name, ending with another head image (right image).

render() {
       return (
        <View  style={styles.container}>
          <SectionList
              sections={this.state.activeEvents} 
              renderItem={({item, section}) => {return (
                                                <View style={styles.container}>
                                                  <Image style={styles.image} source={{uri: item.image}}/>
                                                  <TouchableOpacity onPress={() => {this._onPress(item.id)}} >
                                                    <Text style={styles.item} key={item.id}>{item.name}</Text>
                                                  </TouchableOpacity>
                                                  <View style={styles.containerRight}>
                                                    <Image style={styles.image} source={{uri: "https://bootdey.com/img/Content/avatar/avatar1.png"}}/>
                                                  </View>
                                                </View>)}}

              renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
              keyExtractor={(item, index) => item + index}
            />
        </View>
      ); 

      }

}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 22,
      paddingVertical: 12,
      flexDirection: 'row',
      alignItems: 'flex-start',
      flexDirection: 'row',
      alignItems: 'flex-start'
    },
    containerRight: {
      flex: 1,
      paddingTop: 22,
      paddingVertical: 12,
      flexDirection: 'row',
      alignItems: 'flex-end',
      flexDirection: 'row',
      alignItems: 'flex-end' 
    },
    sectionHeader1: {
      paddingTop: 2,
      paddingLeft: 10,
      paddingRight: 10,
      paddingBottom: 2,
      fontSize: 14,
      fontWeight: 'bold',
      backgroundColor: 'rgba(247,247,247,1.0)',
    },
    sectionHeader:{
      backgroundColor : '#64B5F6',
      fontSize : 20,
      padding: 5,
      color: '#fff',
      fontWeight: 'bold'
   },
    item: {
      padding: 10,
      fontSize: 18,
      height: 44,
    },
    image:{
      width:45,
      height:45,
      borderRadius:20,
      marginLeft:20
    },
    imageRight:{
      width:45,
      height:45,
      borderRadius:20,
      marginRight:20
    },
  }) 

Here is the output of the above render:

All row items (left image, event name, right image) should be vertically aligned. The left image and event name are properly aligned to the left side of the row, but the right image should be horizontally aligned to the right side of the row. How can I change my jsx and styling to achieve this UI?

Answer 1

I suppose you'd like something like this:

You can accomplish this by adding a big container for the row and adding:

justifyContent: 'space-between'

Wrap the source code and fix it to your needs or see a working snack: snack.expo.io/@abranhe/stackoverflow-56638124

import React, { Component } from 'react';
import {
  SectionList,
  Text,
  Image,
  View,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

const events = [
  {
    title: '2019-04-03',
    data: [
      {
        name: 'Event 1',
        imageLeft: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar1.png',
        },
        imageRight: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar2.png',
        },
      },
      {
        name: 'Event 2',
        imageLeft: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar3.png',
        },
        imageRight: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar4.png',
        },
      },
    ],
  },
  {
    title: '2019-04-07',
    data: [
      {
        name: 'Event 2',
        imageLeft: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar5.png',
        },
        imageRight: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar6.png',
        },
      },
    ],
  },
];

export default class App extends Component {
  onPressEvent = id => {
    alert(eventName);
  };

  render() {
    return (
      <SectionList
        style={styles.selectionList}
        sections={events}
        renderItem={({ item: event, section }) => {
          return (
            <View style={styles.container}>
              <View style={styles.content}>
                <Image style={styles.image} source={event.imageLeft} />
                <TouchableOpacity onPress={() => this.onPressEvent(event.name)}>
                  <Text>{event.name}</Text>
                </TouchableOpacity>
                <Image style={styles.image} source={event.imageRight} />
              </View>
            </View>
          );
        }}
        renderSectionHeader={({ section }) => (
          <Text style={styles.sectionHeader}>{section.title}</Text>
        )}
        keyExtractor={(item, index) => item + index}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  content: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  selectionList: {
    marginTop: 22,
  },
  sectionHeader: {
    backgroundColor: '#64B5F6',
    fontSize: 20,
    padding: 5,
    color: '#fff',
    fontWeight: 'bold',
  },
  image: {
    width: 45,
    height: 45,
    borderRadius: 20,
    margin: 20,
  },
});

If you have any questions let me know!

Update after a comment by the question author

It looks close. But I was not able to do any test since my post because of an error related to AndroidX. Can you move the event.name to the left right after the left image? For the icon on the right, it may be changed to a hamburger menu

It would be easy just wrap the left icon into a

<View>
  <Image/>
  <Text>Some Text</Text>
</View>

then it would look like this:

See the updated snack: snack.expo.io/@abranhe/stackoverflow-56638124-updated

<View style={styles.leftIcon}>
  <Image style={styles.image} source={event.imageLeft} />
  <TouchableOpacity onPress={() => this.onPressEvent(event.name)}>
    <Text>{event.name}</Text>
  </TouchableOpacity>
</View>

And then add the following style:

leftIcon: {
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
}