RN: Выровняйте элементы в ряду слева и справа

Я полагаю, вы хотели бы что-то вроде этого:

Вы можете сделать это, добавив большой контейнер для строки и добавив:

justifyContent: 'space-between'

Оберните исходный код и исправьте его под свои нужды или посмотрите рабочую закуску: закуска.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,
  },
});

Если у вас есть какие-либо вопросы, дайте мне знать!

Обновление после комментария автора вопроса

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

Было бы легко просто обернуть левый значок в

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

то это будет выглядеть так:

Смотрите обновленную закуску: закуска.expo.io/@abranhe/stackoverflow-56638124-обновлено

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

Затем добавьте следующий стиль:

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