create bus route screen.js

digibus/src/screen/bus_route_screen/busroutescreen.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 DropDownPicker from 'react-native-dropdown-picker';
+import { Actions } from 'react-native-router-flux';
+import axios from 'axios';
+
+const BusRoteScreen = () => {
+
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(null);
+    const [routeList, setRouteList] = useState([
+        { label: 'Malabe', value: 'malabe' },
+        { label: 'Kaduwela', value: 'kaduwela' },
+        { label: 'Koswatte', value: 'koswatte' },
+        { label: 'Baththramulla', value: 'baththramulla' },
+        { label: 'Kotte', value: 'kotte' },
+        { label: 'Rajagiriya', value: 'rajagiriya' },
+        { label: 'Boralla', value: 'boralla' }
+    ]);
+    const [open2, setOpen2] = useState(false);
+    const [value2, setValue2] = useState(null);
+    const [routeList2, setRouteList2] = useState([
+        { label: 'Malabe', value: 'malabe' },
+        { label: 'Kaduwela', value: 'kaduwela' },
+        { label: 'Koswatte', value: 'koswatte' },
+        { label: 'Baththramulla', value: 'baththramulla' },
+        { label: 'Kotte', value: 'kotte' },
+        { label: 'Rajagiriya', value: 'rajagiriya' },
+        { label: 'Boralla', value: 'boralla' }
+    ]);
+
+    
+    
+    const OnFromOpen = useCallback(() => {
+        setOpen2(false);
+    }, []);
+
+    const OnToOpen = useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    useEffect(() => {
+
+    });
+
+
+    
+    const RouteToList = () => {
+        Actions.busList();
+    }
+
+
+    return (
+        <View style={styles.body}>
+            <View style={styles.container}>
+                <View style={styles.routeHolder}>
+                    <View style={styles.routeContainer}>
+                        <View style={styles.cardViews}>
+                            <View style={styles.titelHolder}>
+                                <Text style={styles.titelText}>From</Text>
+                            </View>
+                            <View style={[styles.dropDownView, { zIndex: 2 }]}>
+                                <DropDownPicker
+                                    schema={{
+                                        label: 'label',
+                                        value: 'value'
+                                    }}
+                                    open={open}
+                                    value={value}
+                                    items={routeList}
+                                    onOpen={OnFromOpen}
+                                    setOpen={setOpen}
+                                    setValue={setValue}
+                                    setItems={setRouteList}
+                                    labelProps={"From"}
+                                    style={{ backgroundColor: '#fff', }}
+                                    labelStyle={{ color: '#000' }}
+                                    zIndex={3000}
+                                    zIndexInverse={1000}
+                                    placeholder="Select From"
+                                />
+                            </View>
+                            <View style={styles.titelHolder}>
+                                <Text style={styles.titelText}>To</Text>
+                            </View>
+                            <View style={[styles.dropDownView, { zIndex: 1 }]}>
+                                <DropDownPicker
+                                    schema={{
+                                        label: 'label',
+                                        value: 'value'
+                                    }}
+                                    open={open2}
+                                    value={value2}
+                                    items={routeList2}
+                                    onOpen={OnToOpen}
+                                    setOpen={setOpen2}
+                                    setValue={setValue2}
+                                    setItems={setRouteList2}
+                                    labelProps={"To"}
+                                    style={{ backgroundColor: '#fff' }}
+                                    labelStyle={{ color: '#000' }}
+                                    zIndex={2000}
+                                    zIndexInverse={2000}
+                                    placeholder="Select To"
+                                />
+                            </View>
+
+                            <View style={styles.bittonStyle}>
+                                <TouchableOpacity onPress={RouteToList}>
+                                    <View style={styles.btns}>
+                                        <Text style={styles.btnText}>Next</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+
+}
+
+const styles = StyleSheet.create({
+    body: {
+        flex: 1,
+        backgroundColor: '#fff'
+    },
+    container: {
+        height: hp('100%'),
+        width: wp('100%'),
+        alignItems: 'center',
+        justifyContent: 'center',
+
+    },
+    routeHolder: {
+        height: hp('60%'),
+        width: wp('100%'),
+        alignItems: 'center'
+    },
+    routeContainer: {
+        height: hp('60%'),
+        width: wp('94%'),
+        alignItems: 'center',
+    },
+    cardViews: {
+        height: hp('60%'),
+        width: wp('94%'),
+        borderWidth: wp('0.1%'),
+        borderRadius: wp('5%'),
+        backgroundColor: '#00186C',
+        borderColor: '#00186C',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    dropDownView: {
+        height: hp('5%'),
+        width: wp('80%'),
+        borderWidth: wp('0.1%'),
+        borderRadius: wp('5%'),
+        backgroundColor: '#00186C',
+        borderColor : '#00186C',
+        marginBottom: 40,
+    },
+    bittonStyle: {
+        height: hp('8%'),
+        width: wp('60%'),
+        borderWidth: wp('0.1%'),
+        borderRadius: wp('5%'),
+        backgroundColor: '#F3890C',
+        borderColor:'#F3890C',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 50
+    },
+    btns: {
+        height: hp('8%'),
+        width: wp('60%'),
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    btnText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#fff'
+    },
+    titelHolder: {
+        height: hp('10%'),
+        width: wp('60%'),
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    titelText: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#fff'
+    },
+
+
+
+});
+
+export default BusRoteScreen;
\ No newline at end of file