Adding states and cities to register screen

src/app/components/SearchablePicker.js

@@ -5,8 +5,15 @@ import colors from "../config/colors";
 import DropDownPicker from "react-native-dropdown-picker";
 import { Shadow } from "react-native-shadow-2";
 
-
-function DropDown({ value, setValue, items, setItems, formPlaceholder, searchPlaceholder }) {
+function DropDown({
+  value,
+  setValue,
+  items,
+  setItems,
+  formPlaceholder,
+  searchPlaceholder,
+  nothingToShow,
+}) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -23,7 +30,7 @@ function DropDown({ value, setValue, items, setItems, formPlaceholder, searchPla
         PLACEHOLDER: formPlaceholder,
         SEARCH_PLACEHOLDER: searchPlaceholder,
         SELECTED_ITEMS_COUNT_TEXT: "Item selecionado",
-        NOTHING_TO_SHOW: "Não encontramos nada com esse termo"
+        NOTHING_TO_SHOW: nothingToShow,
       }}
       style={{
         backgroundColor: colors.white,
@@ -46,8 +53,15 @@ function DropDown({ value, setValue, items, setItems, formPlaceholder, searchPla
   );
 }
 
-function SearchablePicker({ value, setValue, items, setItems, formPlaceholder, searchPlaceholder  }) {
-  console.log(items )
+function SearchablePicker({
+  value,
+  setValue,
+  items,
+  setItems,
+  formPlaceholder,
+  searchPlaceholder,
+  nothingToShow = "Não encontramos nada com esse termo",
+}) {
   return (
     <View style={styles.location}>
       <Shadow
@@ -64,6 +78,7 @@ function SearchablePicker({ value, setValue, items, setItems, formPlaceholder, s
           setItems={setItems}
           formPlaceholder={formPlaceholder}
           searchPlaceholder={searchPlaceholder}
+          nothingToShow={nothingToShow}
         />
       </Shadow>
     </View>

src/app/screens/RegisterScreen.js

@@ -4,15 +4,11 @@ import {
   FormField,
   ErrorMessage,
 } from "../components/forms";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
 import Screen from "../components/Screen";
 import { dimensions } from "../config/dimensions";
-import {
-  FontAwesome5,
-  FontAwesome,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import * as Yup from "yup";
@@ -20,6 +16,7 @@ import FormDatePicker from "../components/forms/FormDatePicker";
 import moment from "moment";
 import { Shadow } from "react-native-shadow-2";
 import SearchablePicker from "../components/SearchablePicker";
+import { states, statesToCities } from "../assets/cities_states";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -111,7 +108,7 @@ function GenderPicker({ value, setValue }) {
 }
 
 function StatePicker({ value, setValue }) {
-  const [items, setItems] = useState([{value: "a", label: "a"}]);
+  const [items, setItems] = useState(states);
   return (
     <SearchablePicker
       value={value}
@@ -124,9 +121,31 @@ function StatePicker({ value, setValue }) {
   );
 }
 
+function CityPicker({ value, setValue, state }) {
+  console.log(state)
+  
+  useEffect(() => {
+    state && setItems(statesToCities[state].cities)
+  }, [state])
+  
+  const [items, setItems] = useState([]);
+  return (
+    <SearchablePicker
+      value={value}
+      setValue={setValue}
+      items={items}
+      setItems={setItems}
+      formPlaceholder={"Selecione a sua cidade"}
+      nothingToShow={state ? "Não encontramos nada com esse termo" : "Selecione o Estado primeiro"}
+      searchPlaceholder={"Busca..."}
+    />
+  );
+}
+
 export default function RegisterScreen(props) {
   const [gender, setGender] = useState("");
-  const [state, setState] = useState("")
+  const [state, setState] = useState("");
+  const [city, setCity] = useState("");
 
   const _moment = moment();
   const [date, setDate] = useState(_moment);
@@ -266,7 +285,15 @@ export default function RegisterScreen(props) {
               <StatePicker value={state} setValue={setState} />
             </View>
 
-
+            <Text style={styles.labelStyle}>Cidade*:</Text>
+            <View style={[styles.iconField]}>
+              <MaterialCommunityIcons
+                name="map-marker"
+                size={25}
+                color={colors.primary}
+              />
+              <CityPicker value={city} setValue={setCity} state={state} />
+            </View>
 
             <SubmitButton
               title="cadastrar"

utils/cities_to_JSON.py

@@ -0,0 +1,35 @@
+import pandas as pd
+
+SEP = " "
+NEW_LINE = "\n"
+O_OBJ = "{"
+C_OBJ = "}"
+
+def main():
+    df = pd.read_csv("./cities.csv")
+
+    uf_to_city = df.groupby(["state_code", "state"])
+    JSON = "const states = [\n"
+    for name, _ in uf_to_city:
+        UF, state_name = name
+        JSON += "\t\t"+O_OBJ+ " value: \"" +UF+"\", " + "label: \"" + f"{state_name} ({UF})" + "\" " + C_OBJ + ",\n"
+
+    JSON += "];"
+
+    JSON += """\n\n\nconst statesToCities = {\n"""
+
+
+    for name, group in uf_to_city:
+        UF, state_name = name
+        JSON += "\t" + f"{UF} : " + O_OBJ + "\n\t\t" + "state_name: " + "\""+state_name+"\"," + NEW_LINE + "\t\tcities: [\n"
+
+        for city in group.name:
+            JSON += "\t\t\t"+O_OBJ+ " value: \"" +city+"\", " + "label: \"" + city + "\" " + C_OBJ + ",\n"
+
+        JSON += "\t\t]\n\t},\n"
+    JSON += "\n};"
+    JSON += "export {states, statesToCities}"
+
+    print(JSON)
+
+main()