React Native: RN-Material-Dropdown not displaying (iOS)

Question

I'm trying to use the lib react-native-material-dropdown in iOS, running on a iPad Air, but the dropdown is not showing on the screen. I've tried to input a marginTop with a negative value and a value to width, but nothing works. Follow the code of my class and the versions that I'm using:

RN version: 0.55 RN Material Dropdown version: 0.11.1 Code of my class:

DetailProduct.js

{/* imports */}

export default class DetailProduct extends React.Component {
  constructor(props){
    super(props);

   this.state = {
      sizes: [{value: 'Eleonora'}, {value: 'Barbosa'}, {value: 'Rafaela'}], 
    };
  }

  {/* ... */}

  render() {

    return (
      <View style={styles.container}>

        <View style={styles.baseContent}>
          <View style={styles.contentLeft}>
            <View style={styles.baseProductDetails}>
              <View style={styles.baseCodeSizeColor}>  

                <TouchableOpacity style={styles.baseSize} onPress={() => {
                  <View style={{width: 200, backgroundColor: '#BDBDBD', marginTop: -15, justifyContent: 'flex-start'}}>
                    <Dropdown
                        rippleCentered={true}
                        label='Favorite Fruit'
                        itemCount={4}
                        containerStyle={{borderWidth: 1, borderColor: 'lightgrey',}}
                        dropdownPosition={50}
                        data={[{value: 'Eleonora'}, {value: 'Barbosa'}, {value: 'Rafaela'}]} />    
                  </View>      
                  }} activeOpacity={0.9}>
                  <Image source={require('../imgs/assets/icon_size_product.png')} style={styles.icSize} />
                  <Text style={styles.txtSizeProduct}>Tamanho: Masculino Unico</Text>
                  <Image source={require('../imgs/assets/icon_dropdown_app.png')} style={styles.icDropdownSize} />
                </TouchableOpacity>
                {/* ... */}
              </View>
            </View>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({      
  container: {
    flex: 1,
    padding: 30,
    backgroundColor: '#F5F5F5',
    flexDirection: 'column',
  },
  baseContent: {
    flexWrap: 'wrap',
    height: '90%',
    marginTop: 90,
    flexDirection: 'row',
  },
  contentLeft: {
    flexDirection: 'column',
    width: '50%',
    height: '100%',
    flexWrap: 'wrap',
    marginRight: '2%',
    shadowColor: '#212121',
    shadowOffset: {width: 0,height: 3},
    shadowOpacity: 0.16,
  },
  contentRight: {
    width: '46%',
    flexWrap: 'wrap',
    marginLeft: '2%',
  },
  baseSize: {
    width: '48%',
    alignItems: 'center',
    marginRight: 8,
    alignSelf: 'stretch',
    flexDirection: 'row',
  },
  txtSizeProduct:{
    color: '#FFFFFF',
    fontSize: 12,
  },
  icDropdownSize: {
    width: 12,
    height: 11,
    position: 'absolute', 
    right: 15,
    top: 3
  },
  icSize: {
    width: 17,
    height: 17,
    marginRight: 6,
    resizeMode: 'contain'
  },
});

Answer 1

I think you can tryout React Hooks.

function DetailProduct() {
  const sizes = [
    { value: "Eleonora" },
    { value: "Barbosa" },
    { value: "Rafaela" }
  ];
  return (
    /* ...*/
    <TouchableOpacity
      style={styles.baseSize}
      onPress={() => {
        <View
          style={{
            width: 200,
            backgroundColor: "#BDBDBD",
            marginTop: -15,
            justifyContent: "flex-start"
          }}
        >
          <Dropdown
            label="Favorite Fruit"
            itemCount={4}
            containerStyle={{ borderWidth: 1, borderColor: "lightgrey" }}
            dropdownPosition={50}
            data={sizes}
          />
        </View>;
      }}
      activeOpacity={0.9}
    >
      /*...*/
    </TouchableOpacity>
    /* ... */
  );
}

const styles = StyleSheet.create({ 
/*...*/
});