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?

Do you want to have space between the two images ? In other words, Do you want to align the left image to the left and the right image to the right? — mahan, Jun 17 '19 at 20:02
yes, left image to the left and right image to the right! Event name is right after the left image. — user938363, Jun 17 '19 at 20:06
https://stackoverflow.com/questions/36008969/how-to-justify-left-right-center-each-child-independently Looks like `alignItems: "flex-end"` does not work. Have you tried using another content instead of the right image? — mahan, Jun 17 '19 at 20:37
No, I didn't try to use another content. I may use something like an icon or a hamburg menu.The solution posted may work here. — user938363, Jun 17 '19 at 22:16

Abraham · Accepted Answer · 2019-06-19T06:58:26.433

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',
}

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 hamburg menu. — user938363, Jun 18 '19 at 23:03
Yes, to move it to the left you just need to put it inside a view with the left logo, I am doing and snack to show you, see the update in the post — Abraham, Jun 19 '19 at 06:52

RN: Align items in a row both left and right

1 Answers1

Update after a comment by the question author