How to align View component to left and right equally in react-native

Question

I am building a cross platform mobile application using react-native. I am implementing a functionality where I am displaying the data in Accordion. I want the data to be aligned to the left and right in the Accordion Header and Accordion Body but I am not able to achieve that.

Here is my code-

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

import * as Animatable from 'react-native-animatable';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
const axios = require('axios');
import moment from 'moment'
import Dialog, { SlideAnimation, DialogContent } from 'react-native-popup-dialog';

export default class AccordionScreen extends Component {
    constructor (){
        super();
        this.state = {
            activeSections: [],
            collapsed: true,
            multipleSelect: false,
            newData:[],
            visible: false
          };
    }


  componentDidMount(){
      this.fetchData();
  }

  fetchData() {
    axios({
        method: "POST",
        url: "URL",
        headers: {
            "Content-Type": "application/json",
            "Authorization": this.props.navigation.getParam('authorizationToken', undefined)
        },
        data: {}
    })
    .then (response => {
        if (response.status === 200 ){
            if (response.data.newData.length > 0 ){
                this.setState({ 
                    newData: response.data.newData
                });
                //console.log(activeSections);
            }
            else {
                return <h1>No Data!</h1>
            }
        }
        else{
            throw "Request resulted in NOT 200";
        }
    })
    .catch(error => {
        console.log(error);
    });
}

  _renderSectionTitle = section => {
    return (
      <View style={styles.titleHeader}>
        <Text>{moment(section.eventDate).format('ll')}</Text>
      </View>
    );
  };

  toggleExpanded = () => {
    this.setState({ collapsed: !this.state.collapsed });
  };

  setSections = sections => {
    this.setState({
      activeSections: sections.includes(undefined) ? [] : sections,
    });
  };
  _renderHeader(section, index, isActive, sections) {
    return (
      <Animatable.View

      duration={400}
      style={[styles.header, isActive ? styles.active : styles.inactive]}
      transition="backgroundColor">
      {
        isActive ?
        <Image source={require('../assets/images/upArrow.png')}
              style={{width: 15, height: 15, alignSelf: 'flex-end'}}
            />
            :
        <Image source={require('../assets/images/downArrow.png')}
            style={{width: 15, height: 15 , alignSelf: 'flex-end'}}
        />
      }
        <Animatable.View style={styles.leftContainer}>
            <Animatable.Text style={styles.headerCont}>Name </Animatable.Text>
            <Animatable.Text>{section.name} </Animatable.Text>
        </Animatable.View>
        <Animatable.View style={styles.rightContainer} >
            <Animatable.Text style={styles.headerCont}>City</Animatable.Text>  
            <Animatable.Text>{section.firstName} {section.lastName}  </Animatable.Text>  
        </Animatable.View>   
      </Animatable.View>

    );
  }

_renderContent(section, i, isActive, sections) {
    return (
      <Animatable.View
        duration={300}
        transition="backgroundColor"
        style={[styles.accordionCont, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor"
        >
        <Animatable.Text
          style={styles.headerCont}
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          Insurer Address
        </Animatable.Text>
        <Animatable.Text
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
         {section.addressStreet}
        </Animatable.Text>

        <Animatable.Text
          style={styles.headerCont}
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          Policy Number
        </Animatable.Text>

        <Animatable.Text
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          {section.policyNumber}
        </Animatable.Text>

        <Animatable.Text
          style={styles.headerCont}
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          Additional Details
        </Animatable.Text>
      </Animatable.View>
    );
  }

  _updateSections = activeSections => {
    this.setState({ activeSections });
  };

  render() {
    const { multipleSelect, activeSections, poiHistoryData } = this.state;
    return (
        <View style={styles.container}>
            <ScrollView contentContainerStyle={{ paddingTop: 30 }}>
            <TouchableOpacity onPress={this.toggleExpanded}>
            <View style={styles.header}>
              <Text style={styles.headerText}>View Data</Text>
            </View>
          </TouchableOpacity>
                <Accordion 
                sections={newData}
                activeSections={activeSections}
                touchableComponent={TouchableOpacity}
                expandMultiple={multipleSelect}
                renderSectionTitle={this._renderSectionTitle}
                renderHeader={this._renderHeader}
                renderContent={this._renderContent}
                duration={400}
                onChange={this._updateSections}
                />
            </ScrollView>
        </View>

     ) }
}

If you see the Heading 'Name' and 'City', these are the headings and I am displaying the value just below it. But right now everything is stacked and aligned to the left. I want 'Other Insurer' and its value to be appear on the left of the screen and 'Other Insured' and its value to be aligned to the right of the screen.

CSS that I am using-

      headerCont: {
        fontWeight:'bold'
      },
      leftContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start'
      },
      rightContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
      },
      header: {
       backgroundColor: '#24abc1',
       padding: 5,
       marginLeft:5,
       marginRight:5,
       flex: 1,
       flexDirection: 'row'
     }

Screenshot- Can someone please suggest me how can I handle this gracefully. Thanks in advance.

Answer 1

hopefully this is work for you

  import React, { Component } from 'react';
    import { AppRegistry, View,Text } from 'react-native';

    export default class FlexDirectionBasics extends Component {
      render() {
        return (
          // Try setting `flexDirection` to `column`.
          <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{flex:1, alignItems:'center',  backgroundColor: 'steelblue'}} >
              <Text>Name</Text>
              <Text>ABC</Text>
            </View>
            <View style={{flex:1, alignItems:'center',  backgroundColor: 'red'}} >
              <Text>Name</Text>
              <Text>ABC</Text>
            </View>
          </View>
        );
      }
    };

    // skip this line if using Create React Native App
    AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

Answer 2

Replace your Animatable view this

 <Animatable.View

      duration={400}
      style={[styles.header, isActive ? styles.active : styles.inactive]}
      transition="backgroundColor">
      {
        isActive ?
        <Image source={require('../assets/images/upArrow.png')}
              style={{width: 15, height: 15, alignSelf: 'flex-end'}}
            />
            :
        <Image source={require('../assets/images/downArrow.png')}
            style={{width: 15, height: 15 , alignSelf: 'flex-end'}}
        />
      }
    <View style={styles.viewContainer}>
        <Animatable.View style={styles.leftContainer}>
            <Animatable.Text style={styles.headerCont}>Name </Animatable.Text>
            <Animatable.Text>{section.name} </Animatable.Text>
        </Animatable.View>
        <Animatable.View style={styles.rightContainer} >
            <Animatable.Text style={styles.headerCont}>City</Animatable.Text>  
            <Animatable.Text>{section.firstName} {section.lastName}  </Animatable.Text>  
        </Animatable.View>
</View>   
      </Animatable.View>

And your css

     headerCont: {
        fontWeight:'bold',
      },
      leftContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
alignItems:'flex-start'
      },
      rightContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-end'
      },
viewContainer:{
 flex: 1,
       flexDirection: 'row'
},
      header: {
       backgroundColor: '#24abc1',
       padding: 5,
       marginLeft:5,
       marginRight:5,

     }