Selectbox Example Using React Native

React Native

Nicesnippets

279

16-06-2020


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

, after I will make selectbox using Picker tag in react native.

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...


Recommended Posts