Search code examples
react-nativeoverlayreact-native-dropdown-picker

React native react-native-dropdown-picker dropdown list opacity issue

I'm new to React Native, how can I modify my code to change the opacity of the dropDown list so that the text 'My text' become hidden?

Example

Here my code:

import React, { useState } from 'react';
import {
  Text,
  useColorScheme,
  View,
  Image,
} from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import DropDownPicker from 'react-native-dropdown-picker';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {
      label: 'Option 1',
      value: 'option1',
    },
    {
      label: 'Option 2',
      value: 'option2',
    },
    {
      label: 'Option 3',
      value: 'option3',
    },
  ]);

  return (

      <View style={{
          backgroundColor: "white",
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          paddingHorizontal: 15
        }}>
      <Text>Selected Value: {value}</Text>
        <DropDownPicker
          open={open}
          value={value}
          items={items}
          setOpen={setOpen}
          setValue={setValue}
          setItems={setItems}
          placeholder="Select an option"
          containerStyle={{ width: 400, backgroundColor: "white"}}
          listItemLabelStyle={{ fontSize: 16 }}
          showArrowIcon={true}
          hideSelectedItemIcon={true}
          theme="LIGHT"
        />

        <Text>My text</Text>

      </View>

  );
}

export default App;

I'have tried with adding the option

listParentContainerStyle={{backgroundColor:  'rgba(255, 255, 255, 1)'}}

but without effect. I've tried to follow the instructions in here but without effect: react-native-dropdown-picker listed items not showing properly (Overlay).

Solution

  • Just modify the code. You need to manage the opacity of the Text:

    {open ? <Text style={{ opacity: 0 }}>My text</Text> : <Text>My text</Text>}

    or you can also hide the overall Text by:

    {!open && <Text>My text</Text>}

    Here is the preview:
    https://snack.expo.dev/HqW6LKFbN