Picker do not showing on iOS

Description

Picker from react-native is not showing on iOS screen

App from iOS

• Device: iPhone 5

App from Android

• Device: Xiaomi redmi note 7

React Native version

React Native Environment Info: System: OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine) CPU: (8) x64 Intel® Core™ i5-8265U CPU @ 1.60GHz Memory: 1.25 GB / 7.50 GB Shell: 5.0.3 - /bin/bash Binaries: Node: 12.13.0 - /usr/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.10.3 - /usr/local/bin/npm npmPackages: react: 16.8.3 => 16.8.3 react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8 npmGlobalPackages: react-native-cli: 2.0.1

Screen code

import React, { Component } from 'react';
import { 
  ScrollView, 
  View,
  Text,
  StyleSheet,
  Picker,
  ActivityIndicator,
} from 'react-native';
import Logo from '../assets/images/named_logo.svg';
import { expo } from '../app.json';
import { get_settings, set_settings } from '../helpers/Storage'

class SettingsScreen extends Component{
  constructor(props){
    super(props);
    this.state = {
      settings:{
        notes_view:'auto',
        capo_view:'auto',
        instrument:'guitar'
      },
      loading:true,
    }
  }
  async componentDidMount(){
    const settings = await get_settings()
    this.setState({settings, loading:false})
  }
  async updateSettings(settings){
    this.setState({settings, loading:true})
    await set_settings(settings)
    this.setState({loading:false})
  }
  render(){
    console.log('stts', this.state.settings)
    return(
      <ScrollView style={styles.container}>
        <View 
          style={styles.header}
        >
          <Logo width={120} height={120}/>
          <Text 
            style={styles.version_text}
          > 
            Versão: alfa {expo.version}
          </Text>
        </View>
        <ActivityIndicator
          animating={this.state.loading}
        />
        <View style={styles.option}>
          <Text style={styles.option_text}> 
            Visualização das notas:
          </Text>
          <Picker
            style={styles.picker}
            itemStyle={styles.picker_text}
            onValueChange={(value) => {
              settings = {
                ...this.state.settings,
                notes_view:value
              }
              this.updateSettings(settings)
            }}
            selectedValue={this.state.settings.notes_view}
          >
            <Picker.Item label="Automático" value="auto" />
            <Picker.Item label="Apenas Sustenido (#)" value="sharp" />
            <Picker.Item label="Apenas Bemol (b)" value="bemol" />
          </Picker>
        </View>
        <View style={styles.option}>
          <Text style={styles.option_text}> 
            Instrumento:
          </Text>
          <Picker
            style={styles.picker}
            itemStyle={styles.picker_text}
            onValueChange={(value) => {
              settings = {
                ...this.state.settings,
                instrument:value
              }
              this.updateSettings(settings)
            }}
            selectedValue={this.state.settings.instrument}
          >
            <Picker.Item label="Violão/Guitarra" value="guitar" />
            <Picker.Item label="Teclado/Piano" value="piano" />
            <Picker.Item label="Ukulelê" value="ukulele" />
            <Picker.Item label="Viola" value="viola"/>
          </Picker>
        </View>

        <View style={styles.option}>
          <Text style={styles.option_text}> 
            Capotraste:
          </Text>
          <Picker
            style={styles.picker}
            itemStyle={styles.picker_text}
            onValueChange={(value) => {
              settings = {
                ...this.state.settings,
                capo_view:value
              }
              this.updateSettings(settings)
            }}
            selectedValue={this.state.settings.capo_view}
          >
            <Picker.Item label="Automático" value="auto" />
            <Picker.Item label="Nunca" value="never" />
          </Picker>
        </View>
        <View style={styles.padd}/>
      </ScrollView>
    );
  }
}
export default SettingsScreen;
SettingsScreen.navigationOptions = {
  title: 'Configurações',
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
    //alignItems:'center'
  },
  padd:{
    height:100,
  },  
  version_text:{
    fontSize:12,
    fontWeight:'normal',
    color:'#333333',
    fontFamily:'raleway'
  },
  header:{
    alignItems:'center',
    alignSelf:'center',
  },
  option:{
    padding:20,
    height:70,
    justifyContent:'space-between',
    alignItems:'stretch'
  },
  option_text:{
    fontFamily:'roboto',
    fontSize:14,
    fontWeight:'bold',
    color:'#333333'
  },
  picker:{
    height:40,
    width:'100%',
  },
  picker_text:{
    fontFamily:'roboto',
    fontSize:14,
    color:'#FFFFFF'
  }
});

Repository

Chords

[1nfinite]

@gustavolima00 were you able to get this work? I am having the same issue in iOS.

[safaiyeh]

Can you try https://github.com/react-native-community/react-native-picker? This is an official extracted component that is more maintained.