-2

Olá, estou desenvolvendo um app para o estagio e o supervisor pediu para que no campo de busca, o usuario tenha a opção de escolher por qual campo pesquisar. Pensei em fazer um modal com as opções de busca. Porem, quando eu vou exibir as opções(que vem dentro de um array) ele não mostra. Tentei usar forEach e map e mesmo assim ele não mostra.

modal.js:

import React from 'react';

import {
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

export default ({showModal, toggle, options, changeSearchField}) => {
  const changeField = (option, i) => {
    changeSearchField({option, i});
  };

  return (
    <View style={styles.centeredView}>
      <Modal animationType="slide" transparent={true} visible={showModal}>
        <View style={{...styles.centeredView, backgroundColor: '#000000aa'}}>
          <View style={styles.modalView}>
            {options.forEach((option, i) => {
              <TouchableOpacity onPress={changeField(option, i)}>
                <Text>{option}</Text>
              </TouchableOpacity>;
            })}
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    width: 200,
    height: 200,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: '#000000',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

patient.js:

import React, {useEffect, useState} from 'react';
import {RefreshControl} from 'react-native';
import {useNavigation} from '@react-navigation/native';

import {
  Container,
  Scroller,
  HeaderArea,
  SearchButton,
  HeaderTitle,
  SearchArea,
  SearchInput,
  ListArea,
  ChooseField,
} from './styles';
import SearchIcon from '../../../assets/icons/search.svg';
import ChooseFieldIcon from '../../../assets/icons/chooseField.svg';
import {SearchIconColor} from '../../../assets/styles';
import Card from '../../../components/PatientCard';
import LoadingComponent from '../../../components/Loading';
import EmptyDataCard from '../../../components/EmptyDataCard';
import {showMessage} from 'react-native-flash-message';
import DataErrorCard from '../../../components/DataErrorCard';
import {checkState} from '../../../assets/functions';
import Api from '../../../services/patient';
import Modal from '../../../components/Modal';

export default () => {
  const navigation = useNavigation();

  const [searchText, setSearchText] = useState('');
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const [emptyData, setEmptyData] = useState(false);
  const [dataError, setDataError] = useState(false);
  const [searchField, setSearchField] = useState('');
  const [modalVisible, setModalVisible] = useState(false);
  const [options, setOptions] = useState(['prontuario', 'nome', 'celular']);

  const search = async () => {
    if (emptyData) {
      setEmptyData(false);
    }

    if (dataError) {
      setDataError(false);
    }

    if (searchText == '') {
      setEmptyData(!checkState(list));
      showMessage({
        message: 'Digite o prontuario do paciente',
        type: 'warning',
        icon: 'warning',
      });
    } else {
      setLoading(true);

      let response = await Api.getByProntuario(searchText);

      if (response != 'error') {
        if (Object.keys(response).length === 0) {
          setLoading(false);
          setEmptyData(true);
          setList(response);
        } else {
          setLoading(false);
          setList(response);
        }
      } else {
        showMessage({
          message: 'Erro ao tentar listar',
          type: 'danger',
          icon: 'danger',
        });
        setLoading(false);
        setDataError(true);
        setList([]);
      }
    }
  };

  const getData = async () => {
    setLoading(true);
    let response = await Api.getAll();

    if (response != 'error') {
      if (Object.keys(response).length === 0) {
        setLoading(false);
        setEmptyData(true);
        setList(response);
      } else {
        setLoading(false);
        setList(response);
      }
    } else {
      setLoading(false);
      showMessage({
        message: 'Erro ao tentar listar',
        type: 'danger',
        icon: 'danger',
      });
      setDataError(true);
    }
  };

  const onRefresh = () => {
    if (emptyData) {
      setEmptyData(false);
    }

    if (dataError) {
      setDataError(false);
    }

    setRefreshing(false);
    getData();
    setSearchText();
  };

  useEffect(() => {
    getData();
  }, []);

  const handleClick = (id) => {
    navigation.navigate('PatientDetails', {id});
  };

  const selectSearchField = () => {
    setModalVisible(!modalVisible);
  };

  const changeSearchField = (option) => {
    console.log(option);
  };

  return (
    <Container>
      {!loading && (
        <Scroller
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
          }>
          <Modal
            showModal={modalVisible}
            toggle={selectSearchField}
            options={options}
            changeSearchField={changeSearchField}
          />
          <HeaderArea>
            <HeaderTitle>Pacientes</HeaderTitle>
          </HeaderArea>
          <SearchArea>
            <SearchInput
              placeholder="Digite o prontuario do paciente"
              placeholderTextColor="#000000"
              value={searchText}
              onChangeText={(t) => {
                setSearchText(t);
              }}
              keyboardType="numeric"
            />
            <SearchButton onPress={search}>
              <SearchIcon with="24" height="24" fill={SearchIconColor} />
            </SearchButton>

            <ChooseField onPress={selectSearchField}>
              <ChooseFieldIcon fill={SearchIconColor} />
            </ChooseField>
          </SearchArea>

          {emptyData && (
            <EmptyDataCard
              message="Nenhum paciente encontrado"
              subMessage="Arraste para baixo para baixo para atualizar a tela"
            />
          )}

          {dataError && (
            <DataErrorCard
              message="Ocorreu um erro ao tentar listar as informações"
              subMessage="Arraste para baixo para baixo para atualizar a tela"
            />
          )}

          {!loading && (
            <ListArea>
              {list.map((item, k) => (
                <Card
                  key={k}
                  data={item}
                  onPress={() => handleClick(item.id)}
                />
              ))}
            </ListArea>
          )}
        </Scroller>
      )}
      {loading && <LoadingComponent />}
    </Container>
  );
};

2 Respostas 2

0

Talvez seja isso aqui, ta sem o return.

{options.forEach((option, i) => {
     return (
              <TouchableOpacity onPress={() => changeField(option, i)}>
                <Text>{option}</Text>
              </TouchableOpacity>;
     )
 })}
2
  • Olá sara, obrigado pela resposta! Primeiramente, me desculpa a demora no feedback, tive uns problemas com meu computado :/. Então, eu coloquei a sua solução, mas mesmo assim não obtive sucesso.
    – joao vitor
    Commented 6/11/2020 às 20:18
  • Olá sarah, consegui resolver meu problema utilizando o map. Obrigado pela ajuda!
    – joao vitor
    Commented 6/11/2020 às 20:35
0

Consegui resolver o meu problema utilizando o map. Segue o codigo:

{options.map((option, i) => (
  <TouchableOpacity key={i} onPress={() => changeField(option, i)}>
    <Text>{option}</Text>
  </TouchableOpacity>
 ))}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .