javascript - React Native Picker Not Rendering Options

Question

I'm trying to implement a select dropdown menu in a React Native application using npm's react-native-dropdown-picker package.

I successful did it in one of the application's views/screens and tried to replicate by the same way but the dropdown menu is not rendering the options.

Checking the redux's store is possible to see the data that should be rendered, and in other view it does render. The data is the same for both screens such as the picker component.

return (
    <>
      <DefaultHeader navigation={navigation} />
      <Container>
        <ScrollView
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={() => setRefreshing(true)}
            />
          }>
          <SalesAccountFilter /> // <-- Dropdown is rendered but dont render options
          {isLoading === true ? (
            <View style={{marginTop: '50%'}}>
              <Spinner color="#054785" />
            </View>
          ) : (
            <Content>
              ...some content
            </Content>
          )}
        </ScrollView>
      </Container>
    </>
);

In the other screen that the dropdown is implemented in the exactly same way it is working fine. There is no error about it on the console. In the following snippet is the implementation of "SalesAccountFilter".

const styles = StyleSheet.create({
  picker: {
    maxWidth: 320,
    minWidth: 320,
    color: 'black',
    zIndex: 1000,
  },
  pickerPlaceholder: {
    color: '#bfc6ea',
  },
});
...
  return (
    <DropDownPicker
      style={styles.picker}
      items={[...accounts]}
      defaultValue={null}
      placeholder="Select an account . . ."
      placeholderStyle={styles.pickerPlaceholder}
      containerStyle={{height: 40, width: 320}}
      labelStyle={{
        fontSize: 14,
        textAlign: 'left',
        color: '#000',
      }}
      itemStyle={{justifyContent: 'flex-start'}}
      dropDownStyle={{backgroundColor: '#fafafa'}}
      onChangeItem={handleSelected}
      searchable={true}
      searchablePlaceholder="Search account"
      searchableError={() => <Text>Not found</Text>}
      activeLabelStyle={{color: 'blue'}}
    />
  );

**Versions:** 
Ubuntu 20.04lts;
Node v15.5.0;
React Native Picker 1.9.8;
React 17.0.1;
Nativebase 2.15.0;
React Native 0.63.4;
Emulator: Pixel 4 (latest build);

Answer 1

等待大神答复