DropdownPicker don't open in react-native

Question

In my react-native app the dropdown picker don't open over webview component. Instead I'd like to do this action. This is the screenshot:

Now i post all my file contents:

• APP.JS:

import { Text, SafeAreaView, StyleSheet, View, StatusBar, Dimensions,WebView } from 'react-native';
import * as React from 'react';
import MainForm from './components/MainForm';

export default function App() {
  return (
    <View style={styles.container}>
      <MainForm/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop:StatusBar.currentHeight,
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    width:'100%',
    height:'100%',
  },
});

• MAINFORM.JS:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, Dimensions, StatusBar } from 'react-native';

import ToolBar from './ToolBar';
import WebViewer from './WebViewer'

const Header =()=> {
  return (
    <View style={styles.header}>
      <ToolBar/>  
      
    </View>
  )
}
const Box =()=> {
  return (
    <View style={styles.box}>
      <WebViewer/>
    </View>
  )
}

export default function MainForm() {
  return (
   <View style={styles.container}> 
    <Header/>
    <Box/>
    </View>
  );
}

const styles = StyleSheet.create({
  
  container: {
    flex:1,
  },

  header: {
    width:'100%',
    height:54,
  },

  box: {
    width:'100%',
    height:'100%',
    }
  
});

• TOOLBAR.JS

import React, {useState, useEffect } from 'react';
import { View, Text, Picker, StyleSheet, StatusBar, Image, Dimensions} from 'react-native';

import DropDownPicker from 'react-native-dropdown-picker';


const Operators =()=> { 

  const [myArray, setMyArray] = React.useState([]);
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState(null);
  const [items, setItems] = React.useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
    {label: 'Orange', value: 'orange'},
    {label: 'Lemon', value: 'lemon'}
  ]);
  
  return (
      <View>
       
        <DropDownPicker
          open={open}
          value={value}
          items={items}
          setOpen={setOpen}
          setValue={setValue}
          setItems={setItems}
          dropDownContainerStyle={{backgroundColor: 'white',zIndex: 1000, elevation: 1000}}
          dropdowndirection="top"
        />
        
      </View>
  );
}

export default function ToolBar()  {
return (
    <View  style={{flexDirection:'row', flex:3, justifyContent: "space-between", }}> 
      <View style={{ padding: 2 }}><Image source={require('../assets/home.png')} /></View>
      <View style={{flex:1, padding: 2, width:'100%'}}>
       <Operators/>
        </View>
      <View style={{ padding: 2}}><Image source={require('../assets/menu.png')} /></View>
   </View>

    )
      
  }

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
  },
 
});

• WEBVIEWER.JS:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

// ...
export default function WebViewer() {
  return <WebView source={{ uri: 'https://reactnative.dev/' }} style={{ flex: 1, width:'100%' }} />;
}

The order is:

1. APP.JS call MAINFORM.JS
2. MAINFORM.JS call TOOLBAR.JS and WEBVIEWER:JS

Some ideas about?

Answer 1

I solved myself editing my code in this way:

import React, { useState } from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/vector-icons/AntDesign';
  import DropDownPicker from 'react-native-dropdown-picker';

  const data = [
    { label: 'Item 1', value: '1' },
    { label: 'Item 2', value: '2' },
    { label: 'Item 3', value: '3' },
    { label: 'Item 4', value: '4' },
    { label: 'Item 5', value: '5' },
    { label: 'Item 6', value: '6' },
    { label: 'Item 7', value: '7' },
    { label: 'Item 8', value: '8' },
  ];

  const DropdownComponent = () => {
    const [value, setValue] = useState(null);
    const [isFocus, setIsFocus] = useState(false);

    const renderLabel = () => {
      if (value || isFocus) {
        return (
          <Text style={[styles.label, isFocus && { color: 'blue' }]}>
           
          </Text>
        );
      }
      return null;
    };

    return (
      <View style={styles.container}>
        {renderLabel()}
        <Dropdown
          style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={data}
          search
          maxHeight={'100%'}
          
          labelField="label"
          valueField="value"
          placeholder={!isFocus ? 'Select item' : '...'}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          onChange={item => {
            setValue(item.value);
            setIsFocus(false);
          }}
          /*renderLeftIcon={() => (
            <AntDesign
              style={styles.icon}
              color={isFocus ? 'blue' : 'black'}
              name="Safety"
              size={20}
            />
          )}*/
        />
      </View>
    );
  };

  export default DropdownComponent;

  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      padding: 2,
    },
    dropdown: {
      height: 40,
      borderColor: 'gray',
      borderWidth: 0.5,
      borderRadius: 8,
      paddingHorizontal: 8,
    },
    icon: {
      marginRight: 5,
    },
    label: {
      position: 'absolute',
      backgroundColor: 'white',
      left: 22,
      top: 8,
      zIndex: 999,
      paddingHorizontal: 8,
      fontSize: 14,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

Source:: https://github.com/hoaphantn7604/react-native-element-dropdown