Picker Style in React Native

MD Aminul Islam Feb 15, 2024
Picker Style in React Native

Sometimes when designing a form in our app, we need to provide a multiple-choice option to the user. In this article, we’ll learn about implementing Picker in a React-Native app and style it in our way.

To make the topic easier, we will examine an example with an explanation.

Picker Style in React Native

In React-Native, we use Picker. Picker is a UI component used to select a single item from multiple items, similar to the Dropdown menu.

When we place a Picker in our app, it styles in its default style. We can also change the style of a picker easily.

In our below code example, we will demonstrate how we can implement Picker in our React-Native app and style it in our way. The code snippet for our example will be as follows.

// importing necessary packages
import {Picker} from '@react-native-picker/picker';
import {StatusBar} from 'expo-status-bar';
import {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  const [selectedValue, SetSelectedValue] = useState('java');

  return (  // Including the image
    <View style={styles.container}>
      <Picker
       selectedValue={selectedValue}
       style={
    { height: 50, width: 150 }}
       onValueChange={(itemValue, itemIndex) => SetSelectedValue(itemValue)}>
       <Picker.Item label='Java' value='java' />
       <Picker.Item label='Python' value='python' />
       <Picker.Item label='JavaScript' value='js' />
    </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  // Providing style.
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We already commanded the purpose of all necessary lines regarding the steps shared above in the example.

Through the line const [selectedValue, SetSelectedValue] = useState("java"); we the initial value of the picker to Java.

We created the Picker using the tag <Picker></Picker>, and below are the properties inside the tag.

Properties/Code Lines Definition
selectedValue={selectedValue} Sets the initial value.
style={{ height: 50, width: 150 }} Provides basic styles to the picker.
onValueChange={(itemValue, itemIndex) => SetSelectedValue(itemValue)}> Provides an action when a user selects an item.
<Picker.Item label="Java" value="java" /> Creates an item.
<Picker.Item label="Python" value="python" /> Creates an item.
<Picker.Item label="JavaScript" value="js" /> Creates an item.

When you run the app, you’ll get the output below.

Output:

react native picker style

react native picker style

Note that the code shared above is created in React-Native, and we used the Expo-CLI to run the app. Also, you need the latest version of Node.js.

If you don’t have Expo-CLI in your environment, install it first.

MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn

Related Article - React Native