How to add a placeholder in React Native Picker

In this React Native source code example, the source code below illustrate how to add a placeholder in React Native Picker.

You can copy and adopt this source code example to your React Native project without reinventing the wheel.

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native'
import ModalDropdown from 'react-native-modal-dropdown';

export default class App extends Component {
   render() {
      return (
         <View style={styles.container}>
            <ModalDropdown
              defaultValue="Select..."/* Your placeholder here*/
              options={['option 1', 'option 2','option 3','option 4']}
              dropdownTextStyle={{width:300,backgroundColor: '#fff',fontSize:17}}/*Style here*/
              style={{width: '60%', backgroundColor:'#fff',borderRadius: 30,}}
              textStyle={{fontSize: 20,margin: 10,}}
              dropdownStyle={{width: '60%'}}
               />
         </View>
      )
   }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ddd'
  },
})

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.