create bus_list.js

digibus/src/screen/bus_list_screen/buslistscreen.js

+import React, { PropTypes, Component, useState, useEffect, useCallback } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import { Actions } from 'react-native-router-flux';
+
+const BusInfo = ({ busNum, onBord, avlaibe, price }) => {
+
+    function viewOnMap() {
+        Actions.mapScreen();
+    }
+    return (
+        <View style={style.busCardHodler}>
+            <View style={style.busCardContainer}>
+                <View style={style.busInfo_holder}>
+                    <View style={style.busInfo_01}>
+                        <Text style={style.busInfo_tite}>{'Bus Number ' + `${busNum}`}</Text>
+                    </View>
+                    <View style={style.busInfo_02}>
+                        <View style={style.businfoContainer_row01}>
+                            <Text style={style.busInfo_info1}>{'Passenger on Bord ' + `${onBord}`}</Text>
+                            <Text style={[style.busInfo_info1, { color: '#d00000' }]}>{'Avaliabe Seat ' + `${avlaibe}`}</Text>
+                        </View>
+                        <View style={style.businfoContainer_row02}>
+                            <Text style={style.busInfo_info2}>{'Rs ' + `${price}` + '.00'}</Text>
+                        </View>
+
+                    </View>
+                </View>
+                <View style={style.busMap}>
+                    <TouchableOpacity onPress={() => { viewOnMap(); }}>
+                        <View style={style.busMapholder}>
+                            <Text style={[style.busInfo_tite, { fontWeight: '400' }]}>View On Map</Text>
+                        </View>
+                    </TouchableOpacity>
+
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const BusListScreen = () => {
+
+    const [busList, setBusList] = useState([
+        { "id": 1, "busNum": "LL-7756", "onBord": 33, "avlable": 21, "price": 150 },
+        // { "id": 2, "busNum": "LG-6511", "onBord": 10, "avlable": 44, "price": 150 },
+        // { "id": 3, "busNum": "NB-9623", "onBord": 3, "avlable": 51, "price": 150 },
+    ]);
+
+    return (
+        <View style={style.main}>
+            <View style={style.container}>
+                {
+                    busList.map((bus) => {
+                        return (
+                            <BusInfo busNum={bus.busNum} avlaibe={bus.avlable} onBord={bus.onBord} price={bus.price} />
+                        )
+                    })
+                }
+
+            </View>
+        </View>
+    )
+}
+
+const style = StyleSheet.create({
+    main: {
+        flex: 1,
+        backgroundColor: '#fff'
+    },
+    container: {
+        height: hp('100%'),
+        width: wp('100%'),
+        alignItems: 'center',
+    },
+    busCardHodler: {
+        height: hp('25%'),
+        width: wp('96%'),
+        alignItems: 'center',
+        borderRadius: wp('5%'),
+        backgroundColor: '#fff',
+        marginTop: hp('1.5%'),
+    },
+    busCardContainer: {
+        height: hp('20%'),
+        width: wp('94%'),
+        alignItems: 'center',
+    },
+    busInfo_holder: {
+        height: hp('18%'),
+        width: wp('94%'),
+        alignItems: 'center',
+        backgroundColor: '#00186C',
+        borderRadius: wp('5%'),
+    },
+    busInfo_01: {
+        height: hp('4%'),
+        width: wp('94%'),
+        alignItems: 'center',
+    },
+    busInfo_tite: {
+        fontSize: 20,
+        fontWeight: '500',
+        color: '#fff'
+    },
+    busInfo_02: {
+        height: hp('8%'),
+        width: wp('94%'),
+        alignItems: 'flex-start',
+        flexDirection: 'row',
+
+    },
+    businfoContainer_row01: {
+        height: hp('8%'),
+        width: wp('58%'),
+        alignItems: 'center',
+        backgroundColor: '#fff',
+        justifyContent: 'center',
+        marginRight: wp('2%'),
+        marginLeft:wp('2%'),
+        borderRadius: wp('3%')
+
+    },
+    businfoContainer_row02: {
+        height: hp('8%'),
+        width: wp('28%'),
+        alignItems: 'center',
+        backgroundColor: '#C4C4C4',
+        marginLeft: wp('2%'),
+        justifyContent: 'center',
+        borderRadius: wp('3%')
+    },
+    busMap: {
+        height: hp('8%'),
+        width: wp('94%'),
+        alignItems: 'center',
+
+    },
+    busMapholder: {
+        height: hp('6%'),
+        width: wp('94%'),
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fc7802',
+        borderRadius: wp('5%')
+
+    },
+    busInfo_info1: {
+        fontSize: 20,
+        fontWeight: '400',
+        color: '#000'
+    },
+    busInfo_info2: {
+        fontSize: 20,
+        fontWeight: '400',
+        color: '#001d3d'
+    },
+
+
+
+});
+
+export default BusListScreen;
\ No newline at end of file