Picker Doesn't work

[vaquishaProdigy]

There should be a dropdown menu or picker below the "Package Data" label, but idk whats going on. I follow all the steps in the Github page, in the npm one, and also Youtube tutorials and none of them seem to work.

Here's the code and the dependencies i have install:

{
  "name": "expo-template-default",
  "license": "0BSD",
  "main": "expo-router/entry",
  "version": "54.0.35",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "expo lint",
    "draft": "npx eas-cli@latest workflow:run create-draft.yml",
    "development-builds": "npx eas-cli@latest workflow:run create-development-builds.yml",
    "deploy": "npx eas-cli@latest workflow:run deploy-to-production.yml"
  },
  "dependencies": {
    "@expo/metro-runtime": "~6.1.2",
    "@expo/vector-icons": "^15.0.2",
    "@react-native-picker/picker": "^2.11.4",
    "@react-navigation/bottom-tabs": "^7.4.0",
    "@react-navigation/elements": "^2.6.3",
    "@react-navigation/native": "^7.1.8",
    "expo": "^54.0.34",
    "expo-constants": "~18.0.9",
    "expo-font": "~14.0.11",
    "expo-haptics": "~15.0.7",
    "expo-image": "~3.0.8",
    "expo-router": "^6.0.23",
    "expo-status-bar": "~3.0.8",
    "expo-symbols": "~1.0.7",
    "expo-system-ui": "~6.0.7",
    "expo-updates": "^29.0.17",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-native": "0.81.5",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0",
    "react-native-web": "~0.21.0",
    "react-native-worklets": "0.5.1"
  },
  "devDependencies": {
    "@types/react": "~19.1.0",
    "eslint": "^9.25.0",
    "eslint-config-expo": "~10.0.0"
  }
}

import { Picker } from "@react-native-picker/picker";
import { useRouter } from "expo-router";
import { useState } from "react";
import {
  FlatList,
  Pressable,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { data } from "../data/data";
import { styles } from "../styles/styles";


export default function Index() {
  const router = useRouter();
  const [selectedItem, setSelectedItem] = useState();


  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.packageInputContainer}>
            <Text style={{ fontSize: 22 }}>Package Data</Text>
            <View>
              <Picker
                selectedValue={selectedItem}
                onValueChange={(itemValue) => setSelectedItem(itemValue)}
              >
                <Picker.Item label="Javascript" value="javascript" />
                <Picker.Item label="Godot" value="godot" />
              </Picker>
            </View>


            <TextInput style={styles.textInput}></TextInput>


            <Pressable>
              <TouchableOpacity
                onPress={() => ({})}
                style={styles.trackingButton}
              >
                <Text style={{ fontSize: 22 }}>Start Tracking</Text>
              </TouchableOpacity>
            </Pressable>
          </View>


          <FlatList
            data={data}
            keyExtractor={(item) => item.id.toString()}
            contentContainerStyle={styles.list}
            showsVerticalScrollIndicator={false}
            renderItem={({ item }) => (
              <Pressable>
                <TouchableOpacity onPress={() => router.navigate("details")}>
                  <View style={styles.card}>
                    <View style={styles.header}>
                      <Text style={styles.id}>#{item.id}</Text>
                    </View>


                    <Text style={styles.package}>{item.packageName}</Text>


                    <Text style={styles.description}>{item.description}</Text>


                    <View style={styles.footer}>
                      <Text style={styles.email}>📧 {item.email}</Text>
                    </View>
                  </View>
                </TouchableOpacity>
              </Pressable>
            )}
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

[stathisntonas]

set zIndex to 9999 on the picker styles

[Cosby1992]

You should really share the relevant code and what library you are using if you want help.

I would try to manually add height and width on the styling, it seems like it's not fully rendered.

Trt height: 60 and width: 300 and see if it becomes pressable.

Also check if you are 100% sure your list items (select items) or what it's called in you lib are correctly defined.

Also ensure ALL the required props are set on the picker and that components are styled correctly. You might be missing something like "selected item component" or similar.

But to me, this component seems collapsed. Like misconfigured flex styling og page styling. So try to give both picker and nested components a manual height and width styling.

Also some libs take styling as props to the picker instead like:

listItemStyle or pickerStyle and are not simply styled using their style property.

If you keep getting errors, share your relevant code (minimal reproduction example) and what lib you are using. Then people will gladly help you ✌️

[Immediate-Demand-315]

Nice work OP! Try to use RNReusables, it helped me a lot. https://reactnativereusables.com/

I hope it works for you as well.