CODEWITHSUNDEEP
react-native
Lethe
Lethe

Reputation: 1

React Native Picker does not stay newly selected option

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

Answers (1)

latanoel
latanoel

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

Related Questions