Agora, nós vamos criar a parte de selecionar a frequência do hábito, se ele será mensal, semanal ou diário. Nós vamos criar do mesmo estilo que foi criado o “SelectHabit” “Components → HabitPage → SelectFrequency → index.jsx”

Iremos criar a estrutura da página, que é bem semelhante a do SelectHabit, então podemos acelerar a nossa criação.

import React from "react";
import { Image, View, StyleSheet } from "react-native";

export default function SelectFrequency ({ habitFrequency, frequencyInput }) {
  return (
    <View>
      
    </View>
  );
};

O nosso data aqui, como são apenas 3 valores, podemos colocar dentro da própria página. Não será necessário criar um arquivo externo que nem fizemos no selectHabit.

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

export default function SelectFrequency ({ habitFrequency, frequencyInput }) {
  const [selected, setSelected] = useState(
    habitFrequency ? habitFrequency : "-"
  );

  const data = [
    { key: "Diário", value: "Diário" },
    { key: "Semanal", value: "Semanal" },
    { key: "Mensal", value: "Mensal" },
  ];

  useEffect(() => {
    frequencyInput(habitFrequency ? habitFrequency : undefined);
  }, []);

  return (
    <View>
      
    </View>
  );
};

Agora basta colocarmos o dropdown. Iremos colocar uma margin inline nele, para que ele fique espaçado do componente de baixo.

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

export default function SelectFrequency ({ habitFrequency, frequencyInput }) {
  const [selected, setSelected] = useState(
    habitFrequency ? habitFrequency : "-"
  );

  const data = [
    { key: "Diário", value: "Diário" },
    { key: "Semanal", value: "Semanal" },
    { key: "Mensal", value: "Mensal" },
  ];

  useEffect(() => {
    frequencyInput(habitFrequency ? habitFrequency : undefined);
  }, []);

  return (
    <View style={{ marginBottom: 20 }}>
      <SelectList
        data={data}
        search={false}
        setSelected={setSelected}
        onSelect={() => {
          alert(selected);
          frequencyInput(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}
          />
        }
      />
    </View>
  );
};

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,
  },
});

Agora vamos colocar ele dentro do arquivo de “HabitPage”, para que possamos chamar esse dropdown também. “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 [frequencyInput, setFrequencyInput] = 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} />

						<Text style={styles.inputText}>Frequência</Text>
            <SelectFrequency
              habitFrequency={habit?.habitFrequency}
              frequencyInput={setFrequencyInput}
            />
          </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,
  },
});

Podemos verificar que ao clicar nele, vamos ter as frequências para selecionarmos.