1. Agora, nós vamos prosseguir com os itens da página de hábito, que são os dropdowns e também o time e data picker. Todos são componentes, então vamos criar eles.

  2. Vamos criar a página de componentes do nosso “HabitPage”. Vamos então em “Components → HabitPage → SelectHabit → index.jsx” (Criar todos esses arquivos um dentro do outro)

  3. Agora, vamos instalar ”react-native-dropdown-select-listreact-native-dropdown-select-list”, que será o que usaremos para ter o dropdown de seleção.

    npm i react-native-dropdown-select-list

  4. Com ele instalado, podemos ir no “index.jsx” que acabamos de criar, para criarmos a estrutura do componente, que será o componente usado para escolhermos o hábito. “Components → HabitPage → SelectHabit → index.jsx”

    import React from "react";
import { Image, StyleSheet } from "react-native";
import { SelectList } from "react-native-dropdown-select-list";

export default function SelectHabit({ habit, habitInput }) {
  return (
    <>
      
    </>
  );
};

  5. Nós precisamos criar a base dos hábitos, onde iremos ter todos os hábitos que a pessoa pode selecionar de cada área. Nós iremos criar uma pasta chamada “Database”, dentro de “src”, e dentro dela iremos criar um arquivo chamado “HabitsData.js”. “Src → Database → HabitsData.js”

    const dataMind = [
  {
    key: "Estudar programação por 30 minutos",
    value: "Estudar programação por 30 minutos",
  },
  {
    key: "Estudar programação por 60 minutos ",
    value: "Estudar programação por 60 minutos ",
  },
  {
    key: "Ler um livro por 15 minutos",
    value: "Ler um livro por 15 minutos",
  },
  {
    key: "Ler um livro por 30 minutos",
    value: "Ler um livro por 30 minutos3",
  },
  {
    key: "Trabalhar 30 minutos em um projeto pessoal",
    value: "Trabalhar 30 minutos em um projeto pessoal",
  },
  {
    key: "Trabalhar 60 minutos em um projeto pessoal",
    value: "Trabalhar 60 minutos em um projeto pessoal",
  },
];

const dataMoney = [
  {
    key: "Economizar 10% do salário",
    value: "Economizar 10% do salário",
  },
  {
    key: "Economizar 20% do salário",
    value: "Economizar 20% do salário",
  },
  {
    key: "Enviar 10 propostas de freela",
    value: "Enviar 10 propostas de freela",
  },
  {
    key: "Enviar 20 propostas de freela",
    value: "Enviar 20 propostas de freela",
  },
  {
    key: "Aplicar para 10 vagas de empresas que pagam melhor do que a atual",
    value: "Aplicar para 10 vagas de empresas que pagam melhor do que a atual",
  },
  {
    key: "Aplicar para 20 vagas de empresas que pagam melhor do que a atual",
    value: "Aplicar para 20 vagas de empresas que pagam melhor do que a atual",
  },
];

const dataBody = [
  {
    key: "Ficar no mínimo 45 minutos na academia",
    value: "Ficar no mínimo 45 minutos na academia",
  },
  {
    key: "Fazer 15 minutos de yoga",
    value: "Fazer 15 minutos de yoga",
  },
  {
    key: "Fazer 30 minutos de yoga",
    value: "Fazer 30 minutos de yoga",
  },
  {
    key: "Fazer uma caminhada de 15 minutos",
    value: "Fazer uma caminhada de 15 minutos",
  },
  {
    key: "Fazer uma caminhada de 30 minutos",
    value: "Fazer uma caminhada de 30 minutos",
  },
  {
    key: "Fazer 30 minutos de meditação",
    value: "Fazer 30 minutos de meditação",
  },
];

const dataFun = [
  {
    key: "Jogar video-game por 30 minutos",
    value: "Jogar video-game por 30 minutos",
  },
  {
    key: "Jogar video-game por 60 minutos",
    value: "Jogar video-game por 60 minutos",
  },
  {
    key: "Assistir 30 minutos de séries ou filmes",
    value: "Assistir 30 minutos de séries ou filmes",
  },
  {
    key: "Assistir 60 minutos de séries ou filmes",
    value: "Assistir 60 minutos de séries ou filmes",
  },
  {
    key: "Sair com os amigos",
    value: "Sair com os amigos",
  },
  {
    key: "Tocar algum instrumento",
    value: "Tocar algum instrumento",
  },
];

export default { dataMind, dataMoney, dataBody, dataFun };

  6. Vamos agora voltar a para o componente “SelectHabit”, para que a gente chame o “data” que acabamos de criar, de acordo com a área. Iremos agora criar dois estados, o estado que vai guardar o hábito selecionado pela pessoa de forma temporária e outro que vai guardar a data vindo do arquivo “HabitsData”. “Pages → HabitPage → SelectHabit → index.jsx”

    import React, { useEffect, useState } from "react";

export default function SelectHabit ({ habit, habitInput }) {
	const [selected, setSelected] = useState(
    habit?.habitName ? habit?.habitName : "-"
  );
  const [data, setData] = useState();

  return (
    <>
     
    </>
  );
};

  7. Agora iremos criar um useEffect que vai pegar do arquivo criado a data que queremos exibir. Ou seja, se o nossa área for a mente, iremos exibir os hábitos que criamos da mente. “Components → HabitPage → SelectHabit → index.jsx”

    export default function SelectHabit ({ habit, habitInput }) {
  const [selected, setSelected] = useState(habit?.habitName ? habit?.habitName : "-");
  const [data, setData] = useState();

	useEffect(() => {
    if (habit?.habitArea === "Mente") {
      setData(HabitsData.dataMind);
    }
    if (habit?.habitArea === "Financeiro") {
      setData(HabitsData.dataMoney);
    }
    if (habit?.habitArea === "Corpo") {
      setData(HabitsData.dataBody);
    }
    if (habit?.habitArea === "Humor") {
      setData(HabitsData.dataFun);
    }
    habitInput(habit?.habitName ? habit?.habitName : undefined);
  }, []);

  return (
    <>
     
    </>
  );
};

  8. Agora podemos colocar o dropdown de fato, junto com o seu estilo.

    import React, { useEffect, useState } from "react";
import { Image, StyleSheet } from "react-native";
import { SelectList } from "react-native-dropdown-select-list";
import HabitsData from "../../../Database/HabitsData";

export default function SelectHabit ({ habit, habitInput }) {
  const [selected, setSelected] = useState(habit?.habitName ? habit?.habitName : "-");
  const [data, setData] = useState();

  useEffect(() => {
    if (area === "Mente") {
      setData(HabitsData.dataMind);
    }
    if (area === "Financeiro") {
      setData(HabitsData.dataMoney);
    }
    if (area === "Corpo") {
      setData(HabitsData.dataBody);
    }
    if (area === "Humor") {
      setData(HabitsData.dataFun);
    }

    habitInput(habit?.habitName ? habit?.habitName : undefined);
  }, []);

  return (
    <>
      <SelectList
        setSelected={setSelected}
        data={data}
        search={false}
        onSelect={() => {
          habitInput(selected);
        }}
        placeholder={selected}
        boxStyles={styles.boxStyle}
        inputStyles={styles.inputStyle}
        dropdownStyles={styles.dropdownStyle}
        dropdownItemStyles={styles.dropdownItemStyle}
        dropdownTextStyles={styles.dropdownTextStyle}
        arrowicon={
          <Image
            source={require("../../../assets/icons/arrowDropdown.png")}
            style={styles.arrow}
          />
        }
      />
    </>
  );
};

const styles = StyleSheet.create({
  boxStyle: {
    borderWidth: 1,
    borderColor: "white",
    paddingHorizontal: 20,
    paddingVertical: 15,
  },
  inputStyle: {
    color: "white",
  },
  dropdownStyle: {
    borderWidth: 0,
  },
  dropdownItemStyle: {
    borderWidth: 1,
    borderColor: "#BBBB",
    borderRadius: 10,
    marginBottom: 15,
  },
  dropdownTextStyle: {
    color: "#BBBBBB",
  },
  arrow: {
    width: 20,
    height: 20,
  },
});

  9. Agora iremos importar esse componente para podermos visualizar ele. Iremos importar em “HabitPage”. “Pages → HabitPage → index.jsx”

    import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";

import { useNavigation } from "@react-navigation/native";

import SelectHabit from "../../components/HabitPage/SelectHabit";

export default function HabitPage({ route }) {
	const navigation = useNavigation();
	const [habitInput, setHabitInput] = useState();

	const { create, habit } = route.params;

  return (
    <View style={styles.container}>
      <ScrollView>
        <View>
          <TouchableOpacity
            style={styles.bakcPageBtn}
            onPress={() => navigation.goBack()}
          >
            <Image
              source={require("../../assets/icons/arrowBack.png")}
              style={styles.arrowBack}
            />
          </TouchableOpacity>
          <View style={styles.mainContent}>
            <Text style={styles.title}>Configurações {"\\n"} de hábito</Text>
            <Text style={styles.inputText}>Área</Text>
            <View style={styles.inputContainer}>
              <Text style={styles.area}>{habit?.habitArea}</Text>
            </View>

            <Text style={styles.inputText}>Hábito</Text>
            <SelectHabit habit={habit} habitInput={setHabitInput} />
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(21, 21, 21, 0.98)",
  },
  bakcPageBtn: {
    width: 40,
    height: 40,
    margin: 25,
  },
  arrowBack: {
    width: 40,
    height: 40,
  },
  mainContent: {
    width: 250,
    alignSelf: "center",
  },
  title: {
    fontWeight: "bold",
    textAlign: "center",
    color: "white",
    fontSize: 30,
  },
  inputText: {
    color: "white",
    fontSize: 16,
    marginTop: 35,
    marginBottom: 10,
    marginLeft: 5,
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: "#FFFFFF",
    borderRadius: 10,
    paddingHorizontal: 20,
    paddingVertical: 15,
  },
  area: {
    color: "#BBBBBB",
    fontSize: 15,
  },
});