How can I use react-native-picker to display content on the page depending on the current value of the picker?

Question

I am trying to use react-native-picker in my project and recently came across this Expo Snack: https://snack.expo.dev/HkM_BcGBW

I want to display content on the page depending on the current value of the picker. For instance, some text right below the picker saying "The option you have selected is [text of the currently-selected option in the picker]." How can I do this?

score 1 · Accepted Answer · answered May 23 '22 at 17:29

You can do as the example and use state value to display in the component

import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      language: 'java',
    }
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Unstyled:</Text>
        <Picker
          style={styles.picker} itemStyle={styles.pickerItem}
          selectedValue={this.state.language}
          onValueChange={(itemValue) => this.setState({language: itemValue})}
        >
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="js" />
          <Picker.Item label="Python" value="python" />
          <Picker.Item label="Haxe" value="haxe" />
        </Picker>
        
        <Text>The option you have selected is {this.state.language}</Text>
      </View>
    );
  }
}

But do remember

onValueChange={(itemValue) => this.setState({language: itemValue})}

this stores value rather than the label.

score 0 · Answer 2 · answered May 16 '22 at 11:35

you can use conditional rendering as below:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';

export default class App extends Component {
   constructor(props) {
     super(props)

     this.state = {
       language: 'haxe',
       firstLanguage: 'java',
       secondLanguage: 'js',
     }
   }

   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.title}>{this.state.language}</Text>
         <Picker
           style={styles.picker} itemStyle={styles.pickerItem}
           selectedValue={this.state.language}
           onValueChange={(text) => this.setState({language: text})}
         >
           <Picker.Item label="Java" value="java" />
           <Picker.Item label="JavaScript" value="js" />
           <Picker.Item label="Python" value="python" />
           <Picker.Item label="Haxe" value="haxe" />
         </Picker>
         {this.state.language == "haxe"?
         <Text>Hello Haxa</Text>
         :this.state.language == "js"?
         <Text>Helo JavaScript</Text>
         :this.state.language == "python"?
         <Text>Helo Python</Text>
         :this.state.language == "java"?
         <Text>Helo Java</Text>
         :<Text>Nothing</Text>}
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
     padding: 20,
     backgroundColor: 'white',
   },
   title: {
     fontSize: 18,
     fontWeight: 'bold',
     marginTop: 20,
     marginBottom: 10,
   },
   picker: {
     width: 200,
     backgroundColor: '#FFF0E0',
     borderColor: 'black',
     borderWidth: 1,
   },
   pickerItem: {
     color: 'red'
    },
   onePicker: {
     width: 200,
     height: 44,
     backgroundColor: '#FFF0E0',
     borderColor: 'black',
     borderWidth: 1,
   },
   onePickerItem: {
     height: 44,
     color: 'red'
   },
   twoPickers: {
     width: 200,
     height: 88,
     backgroundColor: '#FFF0E0',
     borderColor: 'black',
     borderWidth: 1,
   },
   twoPickerItems: {
     height: 88,
     color: 'red'
   },
 });

How can I use react-native-picker to display content on the page depending on the current value of the picker?

2 Answers2