react-native--scroll-layout.js

import * as ui from 'sansux/ui';

//styles
import css from '../app/css/styles';

class AccountStatement extends Component {
  render() {

    return (
      <ScrollView style={css.screen}>
        <View  style={[css.mastHead, css.mastHeadMini, {height: 'auto'}]}>
          
          <ui.GridRow columns={1} style={{padding:0}}>
            <View  style={[css.cover, {paddingTop: 0, marginTop:0}]}>
              <View style={[css.stageTitle, {borderBottomWidth: 0}]}><Text style={[css.stageTitleText]}>Account Statement</Text></View> 

              {this.props.accountStatement.map((item,index)=>{
                const accStatement = item;
                let c = item.INBStatement === 'DR' ? cssVar.color.dr : cssVar.color.cr;
                return (
                  <View key={index} style={[css.cover, css.stageRowGroup, {paddingTop: 0, marginTop:0, marginBottom:cssVar.gutter}]}>
                    <View style={css.stageRow}>
                      <View style={css.stageRowCon}>
                        <Text style={[css.rowLeft, css.stageRowText]} numberOfLines={1}>Amount</Text>
                        <Icon style={[css.rowRight, css.stageRowText, css.paymentText, {'color': c} ]}><Text>
                        {item.INBStatement==='DR'?'- ':''}
                        <Icon name="inr" size={15}/> {Lib.formatAmount(item.Amount)}</Text></Icon>
                      </View>
                    </View>

                    <View style={css.stageRow}>
                      <View style={css.stageRowCon}>
                        <Text style={[css.rowLeft, css.stageRowText]} numberOfLines={1}>Balance</Text>
                        <Icon style={[css.rowRight, css.stageRowText]}><Text>
                        <Icon name="inr" size={15}/> {Lib.formatAmount(item.Balance)}</Text></Icon>
                      </View>
                    </View>
                    <View style={css.stageRow}>
                      <View style={css.stageRowCon}>
                        <Text style={[css.rowLeft, css.stageRowText]} numberOfLines={1}>Transfer type</Text>
                        <Icon style={[css.rowRight, css.stageRowText]}><Text>
                        {Lib.formatAmount(item.TransferStatement)}</Text></Icon>
                      </View>
                    </View>
                    <View style={css.stageRow}>
                      <View style={css.stageRowCon}>
                        <Text style={[css.rowLeft, css.stageRowText]} numberOfLines={1}>Transaction date</Text>
                        <Icon style={[css.rowRight, css.stageRowText]}><Text>
                          {Lib.formatAmount(item.ValueDate)}</Text></Icon>
                      </View>
                    </View>
                  </View> 
                )
              })}  

            </View>   
          </ui.GridRow>

        </View>
      </ScrollView>
    );
  }
}