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