lawnstarter / react-native-picker-select Goto Github PK

I would like to know if there is a way to create a horizontal scroll for a long select times. By default, the pickers show the (...) for the long characters

I try to customize the placeholder color, but I get this error:

StyleSheet placeholderColor: "#eeeeee"
Valid style props: [
  "alignContent",
  "alignItems",
  "alignSelf",
  "aspectRatio",
  "backfaceVisibility",
  "backgroundColor",
  "borderBottomColor",
  "borderBottomEndRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStartRadius",
  "borderBottomWidth",
  "borderColor",
  "borderEndColor",
  "borderEndWidth",
  "borderLeftColor",
  "borderLeftWidth",
  "borderRadius",
  "borderRightColor",
  "borderRightWidth",
  "borderStartColor",
  "borderStartWidth",
  "borderStyle",
  "borderTopColor",
  "borderTopEndRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStartRadius",
  "borderTopWidth",
  "borderWidth",
  "bottom",
  "color",
  "decomposedMatrix",
  "direction",
  "display",
  "elevation",
  "end",
  "flex",
  "flexBasis",
  "flexDirection",
  "flexGrow",
  "flexShrink",
  "flexWrap",
  "fontFamily",
  "fontSize",
  "fontStyle",
  "fontVariant",
  "fontWeight",
  "height",
  "includeFontPadding",
  "justifyContent",
  "left",
  "letterSpacing",
  "lineHeight",
  "margin",
  "marginBottom",
  "marginEnd",
  "marginHorizontal",
  "marginLeft",
  "marginRight",
  "marginStart",
  "marginTop",
  "marginVertical",
  "maxHeight",
  "maxWidth",
  "minHeight",
  "minWidth",
  "opacity",
  "overflow",
  "overlayColor",
  "padding",
  "paddingBottom",
  "paddingEnd",
  "paddingHorizontal",
  "paddingLeft",
  "paddingRight",
  "paddingStart",
  "paddingTop",
  "paddingVertical",
  "position",
  "resizeMode",
  "right",
  "rotation",
  "scaleX",
  "scaleY",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "start",
  "textAlign",
  "textAlignVertical",
  "textDecorationColor",
  "textDecorationLine",
  "textDecorationStyle",
  "textShadowColor",
  "textShadowOffset",
  "textShadowRadius",
  "tintColor",
  "top",
  "transform",
  "transformMatrix",
  "translateX",
  "translateY",
  "width",
  "writingDirection",
  "zIndex"
]

My styles are

estilosSelect = StyleSheet.create({
  inputIOS: {
    paddingTop: 12,
    paddingBottom: 11,
    paddingLeft: 8,
    fontSize: estilosGlobales.spaceSize.stock,
  },
  viewContainer: {
    flex: 1,
  },
  placeholderColor: '#ababab',
});

Edited

Describe the bug
When using <KeyboardAvoidingView>. On iOS, the TextInput, which is used to trigger the picker, is triggering the KeyboardAvoidingView into squashing the view for a split second.

Steps to reproduce
Steps to reproduce the behaviour:

1. Wrap <RNPickerSelect /> with a <KeyboardAvoidingView>
2. Being filling out form, using the keyboard's Next key to focus the next TextInput.
3. See KeyboardAvoidingView triggering/flickering when clicking Done on the picker.

It will also flicker when taping the picker item at any point when the keyboard is open.

Expected behaviour:
Would be nice to not have the KeyboardAvoidingView trigger.

Smartphone:

• Device: iPhone5
• OS: iOS 10.3.3
• react-native-picker-select version: 4.4.0
• react-native version: 0.55.4
• react version: 16.3.1

Reproduction and/or code sample
https://snack.expo.io/@rickysullivan/keyboardavoidingview

Possible solution
Adding editable={false} to the TextInput inside renderTextInputOrChildren().

Followed the docs for installing and functionality seems fine and in smaller screens issue doesn't appear. But on iPhone 7 Plus, 8 Plus and maybe on larger screens (I havn't tried it) does not render the way it should.

Is this a bug or have I done something wrong / I forgot to do something ?

The renderAndroidHeadless() returns a View that cannot be customised while the renderTextInputOrChildren() used in renderIOS() allows you to change the style of the view using this.props.style.inputIOSContainer. It would be nice to also customise the android view.

In renderAndroidHeadless():

 return (
            <View style={{ borderWidth: 0 }}>
                {this.props.children}
                ...
            </View>
        );

In renderTextInputOrChildren():

return (
                <View pointerEvents="box-only" style={this.props.style.inputIOSContainer}>
                    {this.props.children}
                </View>
            );

On iPad everything is OK, but on mobile view picker render on left side not on bottom.

Describe the bug
The arrow for indicating the dropdown is appearing below the line of the text.

To Reproduce
Steps to reproduce the behavior:

1. Implement a React-native-picker-select
2. Have minimal / no style, or copy the one from the example.
3. Run on iOS simulator (iPhone6, iOS 11.4)
4. See error

Expected behavior
The arrow should be inline with the text.

Screenshots
Here's what it looks like :

Smartphone (please complete the following information):

• Device: iPhone6
• OS: iOS 11.4
• react-native-picker-select version: 4.4.0
• react-native version: 0.55.1
• react version: 16.3.1

Reproduction and/or code sample
`
state = {
objetRdv: null,
destinataireRdv: null,
campusRdv:null,
modaliteRdv:null,
urgenceRdv:null,
fetching:false,
success:false,
textBoutton:"Suggerer"
}

async sendRendezVous(text,cat) {
this.setState({fetching:true, textBoutton:"En cours..."})
let response = {ok:false}
try {
response = await FixtureAPI.sendRendezVous(text,cat);
} catch (e) {
console.log("Erreur")
this.setState({success:false,textBoutton:"Réessayer"})
}
if (response.ok) {
this.setState({success:true,fetching:false,textBoutton:"Bien reçu !"})
}
else {
this.setState({success:false,fetching:false,textBoutton:"Réessayer"})
}

}
render () {
return (

Demande de Rendez-Vous

      <RNPickerSelect
        placeholder={{
          label:"Chosissez un destinataire",
          value:null
        }}
        items={[
          {label:"Conseiller Pédagogique", value:"1"},
          {label:"Documentaliste", value:"2"},
          {label:"Direction", value:"3"},
          {label:"Autre", value:"4"}
        ]
        }
        onValueChange={(itemValue, itemIndex) => this.setState({objetRdv: itemValue})}
        value={this.state.objetRdv}
        style={styles.RNPickerSelect}
      />
      {/* <Picker
        selectedValue={this.state.categorieSuggestion}
        onValueChange={(itemValue, itemIndex) => this.setState({categorieSuggestion: itemValue})}>
        <Picker.Item label="Général" value="1"/>
        <Picker.Item label="Organisationnel" value="2"/>
        <Picker.Item label="Application" value="3"/>
        <Picker.Item label="Coiffure" value="4"/>
        <Picker.Item label="Style" value="5"/>
        <Picker.Item label="Autre" value="6"/>
      </Picker> */}
      <View
        style={styles.multilineText}>
        <TextInput
          multiline={true}
          maxLength={40}
          onChangeText={(textSuggestion) => this.setState({textSuggestion})}
          placeholder="Quel est l'objet de votre demande ? (2000 caractères max.)"
        />
      </View>
      <View style={styles.RNPScontainer}>
        <RNPickerSelect
        placeholder={{
          label:"Sur quel campus ?",
          value:null
        }}
        items={[
          {label:"Nantes", value:"1"},
          {label:"Rennes", value:"2"},
          {label:"Brest", value:"3"},
          {label:"Toulouse", value:"4"}
        ]}
        onValueChange={(itemValue, itemIndex) => this.setState({campusRdv: itemValue})}
        value={this.state.campusRdv}
        style={styles.inputIOS}
        />
      </View>
      <RNPickerSelect
        placeholder={{
          label:"Quel degré d'urgence de ce RDV ?",
          value:null
        }}
        items={[
          {label:"Dans la semaine", value:"1"},
          {label:"Dans le mois", value:"2"},
          {label:"Dans le trimestre", value:"3"}
        ]
        }
        onValueChange={(itemValue, itemIndex) => this.setState({campusRdv: itemValue})}
        value={this.state.campusRdv}
        style={styles.inputIOS}
      />

      <Text>
      Text : {this.state.textSuggestion}
      </Text>
      <Text>
        Catégorie : {this.state.categorieSuggestion}
      </Text>
      <Text>
      Boutton : {this.state.textBoutton}
      </Text>
      <Text>
        Fetching : {this.state.fetching.toString()}
      </Text>
      <Text>
      success : {this.state.success.toString()}
      </Text>
      <Text
        style={this.state.fetching ? {opacity:1} : {opacity:0}}>
        "Fetching"
      </Text>
      <SemanticButton
        text={this.state.textBoutton}
        onPress={()=>{
          this.sendRendezVous(this.state.textSuggestion,this.state.categorieSuggestion)
          }
        }
        type="info"
      />
    </KeyboardAvoidingView>
  </ScrollView>
)

}
`

Syles :

`import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'

export default StyleSheet.create({
...ApplicationStyles.screen,
multilineText:{
backgroundColor: '#FFFFFF',
borderBottomColor: '#000000',
borderBottomWidth: 1,
padding:10,
margin:10,
borderRadius:10,
minHeight:120
},
RNPickerSelect:{
paddingTop:10,
margin:10,
borderColor:'#000000',
borderWidth: 1,
borderRadius:20
},
inputIOS: {
fontSize: 16,
paddingTop: 13,
paddingHorizontal: 10,
paddingBottom: 12,
borderWidth: 1,
borderColor: 'gray',
borderRadius: 4,
backgroundColor: 'white',
color: 'black',
},
RNPScontainer: {
paddingTop: 30,
backgroundColor: '#fff',
justifyContent: 'center',
paddingHorizontal: 10,
}
})
`

On iOS icon is rendered correctly, on Android no - i check source code and it could be a bug.

It would really be helpfull to how to style the above model

Is it possible to make the horizontal scroll or multiline for the long items on the list?
Thanks.

How could I retrieve the RNPicker selected value to display In my custom text input passed as a child to the picker?

Picker is working perfectly on Android but on IOS its style is misbehaving and throwing an warning mentioned below:

Warning: Failed prop type: Invalid prop `style` of type `number` supplied to `RNPickerSelect`, expected `object`.

"native-base": "^2.4.4",
"react-native": "0.55.4",
"npm" : 5.6.0

For reference, below is my code snippet:

    import React, { Component } from 'react';
    import { AppRegistry, StyleSheet,Keyboard,TouchableWithoutFeedback, TextInput, View, Alert, Button, Platform, ToastAndroid, 
    TouchableOpacity, ActivityIndicator, Text, Picker, ScrollView, PickerIOS } from 'react-native';

    import { StackNavigator } from 'react-navigation';

    import RNPickerSelect from 'react-native-picker-select';

    class add_campaign extends Component {

        static navigationOptions =
        {
        title: 'Add Campaign',
        };

        constructor(props) {
            super(props);
            this.state = {
            isLoading: true,
            camp_manager_arr : [],
            ad_type_arr : [],
            sales_agent_arr : [],
            campaign_manager:undefined,
            camp_manager_items : [],
            ad_type_items : [],
            sales_agent_items : [],
            }
        }

        componentDidMount() 
        {
            const base64 = require('base-64');
            return fetch('API_URL'+this.props.navigation.state.params.ClientId, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                "Authorization": "Basic " + base64.encode("demo:QZLIT]C")
            }
            }).then((response) => response.json())
            .then((responseJson) => { 
                this.setState({
                isLoading: false,
                dataSource: responseJson,
                },  function () 
                    {
                        // console.log(this.state.dataSource.Campaign_Managers);
                        this.state.dataSource.Campaign_Managers.map((item,key) =>{
                            this.setState({
                                camp_manager_arr: this.state.camp_manager_arr.push({label:item.CampaignManager,value:item.CampaignManager})
                            });          
                        }); 
                        this.setState({
                            camp_manager_items : this.state.camp_manager_arr
                        })

                    }
                );
            })
            .catch((error) => {
                console.error(error);
            });
        }

        render() 
        {
            const { navigate } = this.props.navigation;
            if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, paddingTop: 20 }}>
                <ActivityIndicator />
                </View>
            );
            }
            return (
                <View style={styles.MainContainerAddCamp}>
                    
                    <Text style={{ padding: 5, fontSize: 42, backgroundColor: '#2196F3', marginBottom: 7 }}> Add Campaign</Text>

                    <ScrollView keyboardShouldPersistTaps='always'>

                        <Text style={{ fontSize: 25, color: 'blue' }}> General</Text>

                        <View style = { { paddingVertical : 5 } } />
            
                            <Text style={{ fontSize: 12, padding : 10}}> Campaign Manager*</Text>
            
                            <RNPickerSelect

                                placeholder = {{
                                    label : 'Select a Manager...',
                                    value : null,
                                }}
                                
                                items = {this.state.camp_manager_items}
                                onValueChange = {(modeValue) => this.setState({ campaign_manager: modeValue })}
                                value={this.state.campaign_manager}
                                style={pickerSelectStyles.inputIOS}
                            />
                        
                        <TextInput

                            placeholder="Campaign Name*"

                            onChangeText={campaign_name => this.setState({ campaign_name })}

                            underlineColorAndroid='transparent'

                            style={styles.TextInputStyleClass}
                        />

                    </ScrollView>
                </View>
            );
        }
    }

    const styles = StyleSheet.create({

        MainContainerAddCamp: {
            flex: 1,
            margin: 10,
            paddingTop: (Platform.OS === 'ios') ? 30 : 20,
            padding: 5,
            justifyContent: 'center',

        },
        
        TextInputStyleClass: {
            textAlign: 'left',
            paddingLeft: 7,
            marginBottom: 7,
            //height: 40,
            borderWidth: 1,
            borderColor: '#00BCD4',
        },
    });

    const pickerSelectStyles = StyleSheet.create({

    inputIOS: {
        fontSize: 16,
        paddingTop: 13,
        paddingHorizontal: 10,
        paddingBottom: 12,
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 4,
        backgroundColor: 'white',
        color: 'black',
    },

    });

    module.exports = add_campaign;

Please provide me a fix ASAP.

Hello,

I am using this library to create a phone number country code picker. Both the USA & Canada have a value of 1 which causes the library to always find "Canada" when selecting either the USA or Canada.

I think it makes sense to find the item by it's key if defined, rather than it's value. Does that make sense? If so, I'm happy to put together a PR.

Thanks for the project!

Describe the bug
The font size and font color does not changes in android(I need to change the font size and font color).

To Reproduce
Steps to reproduce the behavior:

1. npm installed the plugin
2. copy paste the code as shown in example

Expected behavior
I need to change the font size and font color.

Screenshots

Smartphone (please complete the following information):

• OS: macOS High Sierra 10.13.6
• react-native-picker-select": "^4.4.0"
• react-native: 0.56.1 => 0.56.1
• react: 16.4.1 => 16.4.1

Is it possible to set the animation type of the modal on iOS

Hi, I noticed a bug when using items with translated labels.

When changing the language the item labels are changed which correctly triggers an update of the item state in your component.
The selectedItem label will not be updated correctly due it coming from the old items.

I guess getDerivedStateFromProps should use the updated items instead of the old items to extrapolate the selectedItem from.

I met some problems when try to change state after component mounted.

• here is the minimum repo, it doesn't work the label indicating the current selected value won't change when props change
• here is the online version, it works with the same code I don't know why
  I've spent much time on it but in vain, could you give me a hand?
  Thanks in advance

Hi, thanks for such a nice component.

I have a trouble updating displayed value.

Background:
What I actually want to do is to automatically update the component value of prefecture made of react-native-picker-select when the user input a postalcode which automatically evokes postalcode API and get the address JSON object containing prefecture, city, and street.

However, it did not work, though other values (city and street) which are simple TextInput components are updated and re-rendered.

What I want to solve here:
For my simple test, I created a sample project, which has only two components made of react-native-picker-select.
Then, as I was afraid, this sample doesn't work too.

I just want this to work.

Expected Behavior:
When the upper value is selected and changed, lower value is also changed, because their value is common state; prefecture.

Actual Behavior:
When the upper value is selected and changed, lower value does not change.

Here is my code.
App.js

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      prefecture: '',
    };
  }
  render() {
    const prefectures = [
      {
        label: 'Tokyo',
        value: 'Tokyo',
      },
      {
        label: 'Osaka',
        value: 'Osaka',
      },
    ];
    return (
      <View style={{ paddingTop: 200 }}>
        <RNPickerSelect
          placeholder={{
            label: 'Select',
            value: 'Select',
          }}
          items={prefectures}
          hideIcon
          onValueChange={prefecture => this.setState({ prefecture })}
          style={{ ...pickerSelectStyles }}
          value={this.state.prefecture}
        />
        <RNPickerSelect
          placeholder={{
            label: 'Select',
            value: 'Select',
          }}
          items={prefectures}
          hideIcon
          onValueChange={prefecture => this.setState({ prefecture })}
          style={{ ...pickerSelectStyles }}
          value={this.state.prefecture}
        />
      </View>
    );
  }
}

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 14,
    backgroundColor: 'white',
    color: 'black',
  },
});

package.json

{
  "name": "testDatePicker",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-native": "0.53.0",
    "react-native-picker-select": "^4.2.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.5.0",
    "react-test-renderer": "16.2.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

When there are multiple instances in the scene, touching one of the lower instances will focus on the first instance and scroll the scene to the location of the first scene. This is causing frustrations to the user. Is there a need for a unique ref to the passed into the NRPickerSelect component or is this handled internally?

Would love to see some styling options for the chevron.

Please update your ReadMe to include the 'mode' prop in the Props table.

Hi, first of all.
thank you for giving great picker library.
I have question that when updating props for
for example, if I use Array in state below( this Array got from Firebase )

state = { 
   example: [ {name: 'A'} ,  {name: 'B'} ,  {name: 'C'} ,  {name: 'D'}  ] 
} 
for(let i = 0; i < this.state.example.length; i++ {
    <RNPickerSelect value={this.state.example[i].name} /> 
}

Of cause, View (on simulator) is gonna be
picker has value below

A , B , C, D

but,when I modified Array using filter method or something

 state = { 
   example: [ {name: 'A'} ,  {name: 'B'} ,  {name: 'D'}  ] 
} 

View is gonna be

A , B , C

but I checked state was correct like below

 state = { 
   example: [ {name: 'A'} ,  {name: 'B'} ,  {name: 'D'}  ] 
} 

when I modified Array then render method working again but value of picker select still old....

please answer me thank you.

Hello guys, first of all thanks for the great library.

I want to bring this into your attention, that when i try to use RNPickerSelect with borders

<View style={{
                            flex: 1,
                            paddingLeft: 8,
                            justifyContent: "center",
                             borderRadius:0.5,
                             borderWidth: 0.5,
                             borderColor:"#999"
                        }} >
                            <RNPickerSelect
                                items={this.state.filter_items}
                                placeholder={{}}
                                value={this.state.filter_items.value}    
                                onValueChange={(item) => { this.selectedPickerItem(item) }}
                            >
                                <Text style={{ justifyContent: "center", fontSize: 16 }}>
                                    {this.state.PickerValueHolder}
                                </Text>
                            </RNPickerSelect>
                        </View>

There appears a strange background on PLUS variants of iPhones i-e iPhone 6Plus, 7Plus and 8Plus as well as in iPhoneX.

Look at the following image for better understanding

There is a strange background around "OPEN" word.

I've tried making the arrow a little smaller but adding the following object to the css doesn't seem to work. However making the width to a large value like 50 does show an effect.

icon: { width: 10, height: 10 }

I am using your example on an Android and noticed that I cannot call 'this.inputRefs.picker.togglePicker() ' to the reference created in the example. This works perfectly for IOS but not Android.

How to change icon with custom icon in picker select and set style to icon

I want to change the fontFamily and fontSize. Thank you.

Is there any way to reset picker value with initial one. For eg: in your example, the default title is 'Select a color...'

After form submission, I want to reset it.

Hello, I have an issue, I can't remove this white shadow

here is my style object
const pickerSelectStyles = StyleSheet.create({ inputIOS: { marginHorizontal: 10, marginVertical: 5, paddingTop: 13, paddingHorizontal: 10, paddingBottom: 12, width: window.width - 30, height: 40, backgroundColor: 'rgba(255, 255, 255, 0.2)', color: '#fff', }, })

and also a tag
<RNPickerSelect placeholder={{label: "Pick up your city", value: null}} placeholderTextColor={"white"} hideIcon={true} items={this.state.cities} onValueChange={(value) => { this.setState({ city: value, }); }} onUpArrow={() => { this.inputRefs.picker.togglePicker(); }} onDownArrow={() => { this.inputRefs.company.focus(); }} style={{...pickerSelectStyles}} value={this.state.city} />

bug
After changing the color of the input field, an ugly white frame appeared on my inputPlacholder.

My styles are
const pickerSelectStyles = StyleSheet.create({
inputIOS: {
marginHorizontal: 10,
marginVertical: 5,
paddingTop: 13,
paddingHorizontal: 10,
paddingBottom: 12,
width: window.width - 30,
height: 40,
backgroundColor: 'rgba(255, 255, 255, 0.2)',
color: "#fff"',
},
})

hi,
anyone knows how we can focus on picker?
i have form that at the end of the form there is this picker and i want to scroll to it

When setting a backgroundColor for Android, the drop down icon either disappears or it also changes its color to the same backgroundColor, either way making it invisible.
This is the style i'm passing to the style prop on the picker component.
const pickerstyle = { inputAndroid: { color: '#494B82', backgroundColor: 'white', margin: 5 }, underline: { borderTopWidth: 0 }, backgroundColor: 'white' };
This is what it looks like on my Galaxy S9+

Is there any plans to add support for multiple select options?

Hi I'm having trouble when I try to style the placeholder?

Any idea how?

Cheers

needs to be replaced with getDerivedStateFromProps instead

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

When I pass in a value of null but the function that figures out which value is selected changes this the onValueChange callback is not called. This leads to my state beeing out of sync of what the UI displays.

E.g.

My State Value: null
Value in: null
Items in: {label: 'Orange',value: 'orange', label: 'Green',value: 'green'}

My State Value: null
Label Displayed: Orange
onValueChange is not called therefor my state does not change to the displayed value orange

I am currently running into a bug when using placeholder with this library. The constructor is working correct and is selecting the placeholder as the selected item.

But unfortunately the getDerivedStateFromProps is first selecting a item from the available list and then adding the placeholder (which the selected item suppose to be).

This leads to always having the first entry selected.

Hi,

Thank you for making this package. It has helped quite a lot. I however have an issue. When the state of items is updated using this.setState(), the items in the picker do not change.

Thanks

RN 0.55.4
"name": "react-native-picker-select",
"version": "3.1.1",

<View style={{flex: 1}} >
    <Text style={{color: '#0082c6', fontSize: 16, fontWeight: 'bold', marginLeft: 5}}>SEXO</Text>
    <RNPickerSelect
        placeholder={{
            label: 'Seu Sexo',
            value: '',
        }}
        items={this.state.items}
        onValueChange={(value) => {
            this.setState({
                sexo: value,
            });
        }}
        style={{ backgroundColor: '#000' }}
    />  
</View>

I've tried to change the style to approximate the Picker box to the label "SEXO" but none type of styling is working. How to fix that?

Image to understand it better: img

Is your feature request related to a problem? Please describe.
I have a form with several fields, a couple text inputs followed by a picker. I'd like to use the 'Next' button on the iOS/Android keyboard to programmatically focus the picker.

Describe the solution you'd like
A method that programmatically focuses the picker.

Just wondering if this is possible, I have tried several things with no luck?
Sorry if this is the wrong place to ask this.

the native Picker component has an itemStyle. I want to pass an textAlign to the label inside the picker. There could be a way to pass itemStyle to RNPickerSelect and it can pass it to the native Picker.

Picker doc: https://facebook.github.io/react-native/docs/picker#style

Would you consider to implement search inside picker?

Overview
Just see screen shot.
SelectedValue text appears over ordered view. Select a color... is that.
This has caused by Picker's behavior changing from React Native 0.57.0.
In src/index.js - renderAndroidHeadless , Picker style worked wrong.
I'm sorry, my English is not good.

Screenshots

Reproduction and/or code sample
https://github.com/natsuki-yamanaka/ReactNativePickerSelectSample

Expected behavior
SelectedValue text would not appeared.

Smartphone (please complete the following information):

• Device: Android Emulator
• OS: 7.0
• react-native-picker-select version: 4.4.0
• react-native version: 0.57.1
• react version: 16.5.0

When we open the select dialog, even we can't touch anywhere on screen so far.

Here is demo:

Hi, thanks for making this library.

It is working well for me, but just had one question/feature request. Is it possible to pass styles to the TouchableOpacity or View of renderTextInputOrChildren inside the ViewContainer?

What I would like to achieve is making both the TouchableOpacity extend to the full area of the ViewContainer (essentially giving it Flex: 1). Currently it only occupies the width of its content.

I just wanted to try your example, but it gives me this error.