Bdtjtk

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.

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,



     }

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);