Design your own button

[luisfuertes]

Can i design my own button to call country-picker-modal ?

[sprmn]

Yes and no. There is (not yet) such functionality in the country picker, but you could probably create a customized button in a hacky way using something like this (not tested):

<View>
  <CountryPicker ref={(picker) => {this.picker = picker;}} />
  <TouchableHighlight
    style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}
    onPress={() => this.picker.setState({modalVisible: true})} 
  >
    // other components that you would like to have inside the button
  </TouchableHighlight>
</View>

[luisfuertes]

Thanks for answer. I do something like this and it works:

          <View style={{marginTop: 30*initialScale}}>
            <CustomButton value= {this.state.country.name} label={'SELECT YOUR COUNTRY'} onPress={() => this.picker.setState({modalVisible: true})} />
          </View>

          <View style={{position: 'absolute', top: -60, left: -60}} >
            <CountryPicker ref={(picker) => {this.picker = picker;}} onChange={(value)=> this.setState({country: value})} cca2='ES' translation='spa'/>
          </View>

[sprmn]

Great that you are able to use a customized button, but still not a desirable way to do something basic like this. I think we need to add a noButton option and add a public open() method that takes care of opening the dialog. I'll look into this when I have time.

[arthurvi]

Or don't ship a button at all and let the users implement the way they show and hide the country picker?

[luisfuertes]

Now you cant use ref with CountryPicker.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

But prop renderFlagButton works