Tab navigaation

android/app/build.gradle

@@ -273,7 +273,7 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
-
+    implementation project(path: ':@react-native-picker_picker')
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.fbjni'
     }

android/app/src/main/java/com/mobile/MainApplication.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.picker.RNCPickerPackage;
 import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'mobile'
+include ':@react-native-picker_picker'
+project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-picker/picker/android')
 include ':@react-native-async-storage_async-storage'
 project(':@react-native-async-storage_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-async-storage/async-storage/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

ios/Podfile

@@ -21,6 +21,8 @@ target 'mobile' do
 
   pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage'
 
+  pod 'RNCPicker', :path => '../node_modules/@react-native-picker/picker'
+
   target 'mobileTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.3",
+    "@react-native-picker/picker": "^2.4.1",
     "@react-navigation/bottom-tabs": "^6.3.1",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",

src/assets/languages/tr.json

@@ -16,6 +16,7 @@
         "save": "Kaydet",
         "delete": "Sil",
         "edit": "Düzenle",
+        "search": "Ara",
 
         "password": "Şifre",
         "username": "Kullanıcı Adı",
@@ -33,6 +34,7 @@
             "privacyPolicy": "Gizlilik Sözleşmesini okudum, onaylıyorum",
             "approveEmailMessages": "Bülteninizden ileti almak istiyorum.",
             "forgotPassword": "Şifremi Unuttum"
-        }
+        },
+        "filter": "Filtrele"
     }
 }

src/navigations/FilterStack.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import FilterScreen from "../screens/FilterScreen"
+import NetworkScreen from "../screens/post/NetworkScreen"
+import ROUTES from "./Routes"
+import Stack from './Stack'
+
+const FilterStack:React.FC<any> = () => {
+    return (
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
+            <Stack.Screen name={ROUTES.Filter} component={FilterScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default FilterStack

src/navigations/Navigator.tsx

@@ -12,6 +12,7 @@ import { setUser } from "../store/user";
 import { UserModel } from "../types/userModel";
 import AuthStack from "./AuthStack";
 import DiscoverStack from "./DiscoverStack";
+import FilterStack from "./FilterStack";
 import HomeStack from "./HomeStack";
 import NetworkStack from "./NetworkNavigator";
 import ProfileStack from "./profileStack";
@@ -49,7 +50,7 @@ const Navigator: React.FC<any> = () => {
                     />
                     <Tab.Screen
                         name="Ara"
-                        component={DiscoverStack}
+                        component={FilterStack}
                         options={{
                             tabBarIcon: (props) => (
                                 <Icon name="search1" {...props} />

src/navigations/Routes.ts

@@ -26,6 +26,7 @@ enum ROUTES {
     ForgotPassword = 'ForgotPassword',
     ResetPassword = 'ResetPassword',
     VerifyEmail = 'VerifyEmail',
+    Filter = "Filter",
 }
 
 export default ROUTES;

src/screens/FilterScreen.tsx

@@ -0,0 +1,121 @@
+import { Formik } from 'formik'
+import { Button, Input, Text } from 'galio-framework'
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import Icon from 'react-native-vector-icons/AntDesign'
+import colors from '../themes/colors'
+import i18n from '../assets/languages/i18n'
+import { Picker } from '@react-native-picker/picker';
+import { RootState } from '../store'
+import { useSelector } from 'react-redux'
+import { LocationService } from '../services/locationService'
+import { useDispatch } from 'react-redux'
+import { setLocationTypes } from '../store/locations'
+import { LocationType } from '../types/LocationTypeModel'
+import { CityService } from '../services/cityService'
+import { City } from '../types/CityModel'
+import { setCities } from '../store/cities'
+const FilterScreen: React.FC<any> = ({ navigation }) => {
+    const dispatch = useDispatch()
+    const { locationTypes } = useSelector((state: RootState) => state.locations)
+    const { cities } = useSelector((state: RootState) => state.cities)
+
+    const [selectedCity, setSelectedCity] = useState<string>()
+    const [selectedType, setSelectedType] = useState<string>()
+
+    useEffect(() => {
+        if (!locationTypes || locationTypes.length == 0) {
+            new LocationService().getAllTypes().then(res => {
+                const types = res.data.data as LocationType[]
+                dispatch(setLocationTypes(types))
+            })
+        }
+        if(!cities || cities.length == 0){
+            new CityService().getAll().then(res => {
+                const _cities = res.data.data as City[]
+                dispatch(setCities(_cities))
+            })
+        }
+    }, [])
+
+    return (
+        <View style={styles.root}>
+            <View>
+                <View style={styles.top}>
+                    <TouchableOpacity activeOpacity={0.5} style={{ width: 50 }} onPress={() => navigation.goBack()}>
+                        <Icon name="arrowleft" size={30} color="black" />
+                    </TouchableOpacity>
+                    <Text bold h6>Filtrele</Text>
+                    <View style={{ width: 50 }} />
+                </View>
+            </View>
+            <View style={{ paddingVertical: 20 }}>
+                <View style={styles.input}>
+                    <Input
+                        borderless
+                        placeholder={i18n.t("search")}
+                        placeholderTextColor={colors.MUTED}
+                    />
+                </View>
+                <View style={styles.input}>
+                    <Text bold>Seyehat Türünü Seçiniz</Text>
+                    <Picker
+                        style={styles.select}
+                        selectedValue={selectedType}
+                        onValueChange={(itemValue, itemIndex) =>
+                            setSelectedType(itemValue)
+                        }>
+                        {locationTypes.map((type, index) => (
+                            <Picker.Item label={type.name} value={type._id} />
+                        ))}
+                    </Picker>
+                </View>
+                <View style={styles.input}>
+                    <Text bold>Şehir Seçiniz</Text>
+                    <Picker
+                        style={styles.select}
+                        selectedValue={selectedCity}
+                        onValueChange={(itemValue, itemIndex) =>
+                            setSelectedCity(itemValue)
+                        }>
+                        {cities.map((city, index) => (
+                            <Picker.Item label={city.cityName} value={city._id} />
+                        ))}
+                    </Picker>
+                </View>
+
+                <Button color='#2E1BA5' style={styles.button}>
+                    {i18n.t("filter") + ""}
+                </Button>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    root: {
+        paddingTop: 20,
+        paddingBottom: 15,
+        paddingHorizontal: 20,
+    },
+    top: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    select: {
+        backgroundColor: "#fff",
+        borderRadius: 50,
+    },
+    input: {
+        marginBottom: 20,
+    },
+    button: {
+        width: "100%",
+        borderRadius: 10,
+        marginTop: 20,
+        marginBottom: 20,
+    }
+})
+
+export default FilterScreen

src/services/cityService.ts

@@ -0,0 +1,10 @@
+import { AxiosResponse } from "axios";
+import api from "./api";
+
+const endpoint = "cities/"
+
+export class CityService {
+    public async getAll(): Promise<AxiosResponse<any, any>> {
+        return api().get(endpoint);
+    }
+}

src/services/locationService.ts

@@ -7,4 +7,8 @@ export class LocationService {
     public async getAll(): Promise<AxiosResponse<any, any>> {
         return api().get(endpoint);
     }
+
+    public async getAllTypes(): Promise<AxiosResponse<any, any>> {
+        return api().get("location-types/");
+    }
 }

src/store/cities.ts

@@ -0,0 +1,18 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { City } from '../types/CityModel';
+
+const citySlice = createSlice({
+  name: 'cities',
+  initialState: {
+    cities: [] as City[],
+  },
+  reducers: {
+    setCities: (state, action: PayloadAction<City[]>) => {
+      state.cities = action.payload;
+    }
+  },
+});
+
+export const {setCities} = citySlice.actions;
+
+export default citySlice.reducer;

src/store/index.ts

@@ -1,11 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
+import cities from './cities';
 import locations from './locations';
 import user from './user';
 
 export const store = configureStore({
   reducer: {
     user: user,
-    locations: locations
+    locations: locations,
+    cities: cities,
   }
 });
 

src/store/locations.ts

@@ -1,19 +1,24 @@
+import { LocationType } from './../types/LocationTypeModel';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import Location from '../types/LocationModel';
 
 const locaitonSlice = createSlice({
   name: 'locations',
   initialState: {
     locations: [] as Location[],
+    locationTypes: [] as LocationType[],
   },
   reducers: {
     setLocations: (state, action: PayloadAction<Location[]>) => {
       state.locations = action.payload;
+    },
+    setLocationTypes: (state, action: PayloadAction<LocationType[]>) => {
+      state.locationTypes = action.payload;
     }
   },
 });
 
-export const {setLocations} = locaitonSlice.actions;
+export const {setLocations, setLocationTypes} = locaitonSlice.actions;
 
 export default locaitonSlice.reducer;