Reputation: 1
I have two Picker to select translate language to language. One of them is for input other one is for output to change the language. But I have a problem with the second picker (output language picker). I drag down from the first option to other language options, the picker immediately returns to the first label option. I want the selector to stay at the newly scrolled-to option. First Picker does not have a problem.
import React, { Component, useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, TouchableOpacity, Image, ScrollView } from 'react-native';
import {Picker} from '
@react-native-community
/picker';
var dil1 = 'tr';
var dil2 = 'en';
const Translator = () => {
var [selectedValue, setSelectedValue] = useState("dil1");
var [selectedValue1, setSelectedValue1] = useState("dil2");
const [inputText, setText] = useState('');
const [responseText, setResponse] = useState('');
function postTranslateService(text) {
fetch('https://translate.yandex.net/api/v1.5/tr.json/translate?key=='+ dil1 +'-'+ dil2 +'&text=' + text)
.then((res) => res.json())
.then((res) => {
console.log(res.text)
setResponse(res.text)
})
.catch((error) => {
console.log(error)
});
};
return (
<ScrollView
contentInsetAdjustmentBehavior="automatic">
<View style = {styles.container}>
<Text > </Text>
<View style={styles.input}>
<TextInput
numberOfLines={5}
multiline={true}
placeholder="Metni Gir"
style={{ height: 55, width: 275, borderColor: 'gray', }}
onChangeText={text => setText(text)}
/>
</View>
// FİRST PİCKER
<View style={styles.tpick}>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 125 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(dil1=itemValue)}
>
<Picker.Item label="Turkish" value="tr" />
<Picker.Item label="English" value="en" />
<Picker.Item label="Bulgarian" value="bg" />
<Picker.Item label="German" value="de" />
<Picker.Item label="French" value="fr" />
<Picker.Item label="Spanish" value="es" />
<Picker.Item label="Russian" value="ru" />
</Picker>
</View>
<View style={styles.tbutton}>
<Button
title="Translate"
color="#ff6600"
onPress={() => postTranslateService(inputText)}
/>
</View>
<View style={styles.output}>
<Text style = {styles.ceviri}>{' ' +responseText}</Text>
</View>
// SECOND PİCKER
<View style={styles.tpick}>
<Picker
selectedValue1={selectedValue1}
style={{ height: 50, width: 125 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue1(dil2=itemValue)}
>
<Picker.Item label="Turkish" value="tr" />
<Picker.Item label="English" value="en" />
<Picker.Item label="Bulgarian" value="bg" />
<Picker.Item label="German" value="de" />
<Picker.Item label="French" value="fr" />
<Picker.Item label="Spanish" value="es" />
<Picker.Item label="Russian" value="ru" />
</Picker>
</View>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
input: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderWidth: .6,
borderRadius: 5 ,
margin: 5,
},
output: {
justifyContent: 'flex-start',
alignItems: 'flex-start',
borderWidth: .6,
borderColor: 'gray',
borderRadius: 5 ,
margin: 5,
height: 55,
top:5,
},
ceviri: {
fontSize: 15,
color: 'gray',
textAlign: 'center',
fontWeight: 'bold',
marginTop: 12,
},
tbutton: {
left:5,
width: 331,
borderRadius: 5,
marginTop: 7,
top:-75,
},
tpick: {
flex:1,
left:25,
bottom:140,
paddingTop: 40,
alignItems: "center"
},
});
export default Translator;
Upvotes: 0
Views: 618
Reputation: 46
I'd like to assist based on my experience with similar issue.
But first, you need to understand that the Picker is a controlled component based on state.
Here is what you should do
Step 1: set your initial states to earlier defined variables by removing quotes. This will reference "tr" which corresponds to an option in your picker... not "dil1". Like this
var [selectedValue, setSelectedValue] = useState(dil1);
var [selectedValue1, setSelectedValue1] = useState(dil2);
Step 2: remove expressions in onValueChange
callback functions to values.
setSelectedValue(itemValue) // picker 1
setSelectedValue1(itemValue) // picker 2
Step 3: change invalid prop in Picker 2
<Picker
selectedValue1={selectedValue1}
...
>
to
<Picker
selectedValue={selectedValue1}
...
>
Step 4: update ajax URL by replacing dil1
and dil2
with selectedValue
and selectedValue1
respectively.
'https://translate.yandex.net/api/v1.5/tr.json/translate?key=='+ selectedValue +'-'+ selectedValue1 +'&text=' + text
Upvotes: 0