Necesito de vuestra ayuda, estoy realizando una aplicación que consulta a una API de Clima, es bastante sencilla y esta basada en un curso, la única diferencia es que estoy usando Yarn y Expo porque debo integrarla a otra aplicación. Luce así:
Actualmente me tira 2 errores, cuando quiero seleccionar el país me dice "guardarBusqueda" is not a function" ver en la imagen siguiente:
El otro error lo hace al hacer click en buscar cuando no se ha definido ciudad, ya que es un requerimiento que este campo no este vacío: "pais is undefined". ver la imagen siguiente:
El Código esta tal cual el curso y no encuentro el error (estoy empezando con React-Native). El Código es el siguiente:
import React, { useState } from "react";
import {StyleSheet,Text, View,TextInput, TouchableWithoutFeedback, Animated, Alert} from "react-native";
import {Picker} from '@react-native-picker/picker'
const Formulario = ( busqueda, guardarBusqueda) => {
const {pais, ciudad} = busqueda;
const [animacionboton] = useState(new Animated.Value(1));
const consultarClima = () => {
if(pais.trim() === '' || ciudad.trim() === ''){
mostrarAlerta();
return;
}
}
const mostrarAlerta = () => {
Alert.alert(
'Error',
'Agrega una ciudad y país para la búsqueda',
[{ text: ' Entendido '}]
)
}
const animacionEntrada = () => {
Animated.spring(animacionboton,{
toValue: .75,
useNativeDriver: true
}).start();
}
const animacionSalida = () => {
Animated.spring(animacionboton,{
toValue: 1,
friction: 2,
tension: 30,
useNativeDriver: true
}).start();
}
const estiloAnimacion = {
transform:[{scale: animacionboton}]
}
return(
<>
<View style={styles.formulario}>
<View>
<TextInput
value={ciudad}
style={styles.input}
onChangeText={ ciudad => guardarBusqueda({ ...busqueda, ciudad}) }
placeholder="Ciudad"
placeholderTextColor="#666"
/>
</View>
<View>
<Picker
selectedValue={pais}
itemStyle={{height: 120, backgroundColor:'#FFF'}}
onValueChange={ pais => guardarBusqueda({ ...busqueda, pais}) }
>
<Picker.Item label="-- Seleccione un país --" value="" />
<Picker.Item label="Estados Unidos" value="US" />
<Picker.Item label="México" value="MX" />
<Picker.Item label="Argentina" value="AR" />
<Picker.Item label="Colombia" value="CO" />
<Picker.Item label="Costa Rica" value="CR" />
<Picker.Item label="España" value="ES" />
<Picker.Item label="Peru" value="PE" />
</Picker>
</View>
<TouchableWithoutFeedback
onPressIn={() => animacionEntrada() }
onPressOut={() => animacionSalida() }
onPress={ () => consultarClima() }
>
<Animated.View
style={[ styles.btnBuscar, estiloAnimacion ]}
>
<Text
style={styles.textoBuscar}
>
Buscar Clima
</Text>
</Animated.View>
</TouchableWithoutFeedback>
</View>
</>
);
}
})
export default Formulario;