Selectbox Example Using React Native

Hi Guys,

In this blog, I will explain you how to create selectbox in react native. You can easily create selectbox in react native. First i will import namespace Picker

Here, I will give you full example for simply display selectbox using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init SelectBox 

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";

export default function App() {
  const [selectedValue, setSelectedValue] = useState("java");
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150}}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}>
        <Picker.Item label="Html" value="html" />
        <Picker.Item label="Css" value="css" />
        <Picker.Item label="Bootstrap" value="bootstrap" />
        <Picker.Item label="Php" value="php" />
      </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center"
  }
});

Step 3 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...