please us to fix this

How can I add multiple values as shown in the description of the react-native-picker-scrollview?

description

• Aside from selectedIndex prop. Is selectedItem or Itemname can be done using react-native-picker-scrollview?

Getting this error with the base setup as shown on the main page.

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 30.74 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.4 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 4.6.1 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 27.0.3, 28.0.2
        API Levels: 23, 25, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.1 => 16.5.1
      react-native: 0.57 => 0.57.0
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Hi,

Have anyone already implement it on a DIalog?

In my case, i put the component on a Dialog and works on Android just fine, but in IOS it does not appear

Here's my component:

`import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { View } from 'react-native';
import Dialog from 'react-native-dialog';
import { ScrollPicker } from 'react-native-wheel-scrollview-picker';
import { IOption } from '../SelectOneMenu';
import { SelectedText, UnselectedText } from './styles';

('react-native-date-time-scroll-picker');

export interface ScheduleDialogProps {
scheduleDialogVisible: boolean;
handleCancelDialog: Function;
}

const ScheduleDialogComponent: React.FC = ({
scheduleDialogVisible,
handleCancelDialog,
}) => {
const { t, i18n } = useTranslation();
const [selectOptions, setSelectOptions] = useState<Array>([]);
const [selectedItem, setSelectedItem] = useState();

useEffect(() => {
setSelectOptions(['teste1', 'teste2', 'teste3']);
}, []);

return (

<Dialog.Container visible={scheduleDialogVisible}>
<Dialog.Title
style={{
textAlign: 'center',
}}
>
{t('SCHEDULE_POSTS.TITLE')}
</Dialog.Title>

    <ScrollPicker
      dataSource={selectOptions}
      selectedIndex={
        selectedItem == null ? 0 : selectOptions.indexOf(selectedItem)
      }
      renderItem={(data, index, selectedIndex) => {
        if (selectedIndex) {
          setSelectedItem(data);
          return <SelectedText>{data} </SelectedText>;
        }
        return <UnselectedText>{data} </UnselectedText>;
      }}
      onValueChange={(data, selectedIndex) => {
        <UnselectedText>{data} </UnselectedText>;
      }}
      wrapperHeight={180}
      wrapperWidth={10}
      itemHeight={60}
      highlightColor="#FFFFFF"
      wrapperColor="#FFFFFF"
      highlightBorderWidth={2}
    />
    <Dialog.Button
      style={{
        fontSize: 14,
        fontFamily: 'Fire-Sans',
        fontStyle: 'normal',
        lineHeight: 17,
        color: '#80808F',
        marginRight: 16,
      }}
      label={t('GENERAL.BUTTON.CANCEL')}
      onPress={() => handleCancelDialog()}
    />
  </Dialog.Container>
</View>

);
};

export default ScheduleDialogComponent;
`

anyone can help?

Hi
I have three ScrollPickers in a modal I'm creating (for days, hours and minutes). I'd like to set the selectedIndex on all three of them in componentDidMount. When I call setState, only the last ScrollPicker is updated and the others are stuck on 0. How can I work around this?

any chance height can be flexible, and adjust to container height ?

Hi,
is there a chance to add wrapper color to props?

Hi,
I am working with expo to build react native elements and found this beautiful pure js library for iOS like wheel picker. However I am facing this issue:

On some phone models with the list of items scrolls more than it should. Whereas on other phones it is not able to scroll to the end of the list and hence not able to select the last item.

Here are the screen shots to explain the situation:

Here (Asus Z00LD) i am able to select blank/undefined items from the list as it has scrolled more than it should have.

Here (Samsung A7) i am not able to scroll down until the end and hence not able to select '71 - 100'

Here is the code for same:

<ScrollPicker 
    ref={(sp) => { this.sp = sp; }}
    dataSource={this.props.ageGroups}
    selectedIndex={0}
    itemHeight={50}
    wrapperHeight={250}
        highlightColor={'#d8d8d8'}
        renderItem={(data, index, isSelected) => {
          if (isSelected) {
            return (
              <View>
                  <LargeText bold>{data}</LargeText>
              </View>
            );
          }
            return (
                <View>
                    <MediumText>{data}</MediumText>
                </View>
            );
        }}
        onValueChange={(data, selectedIndex) => {
          console.log(data, selectedIndex);
          this.props.selectAgeGroup({ ageGroup: data });
        }}
      />

this.props.ageGroups = [
'1 - 10',
'11 - 20',
'21 - 30',
'31 - 40',
'41 - 50',
'51 - 60',
'61 - 70',
'71 - 100',
];

How to dynamically adjust the height of scroll view? Is it dependent on lineHeight and wrapperHeight?

Used your example and after opening app this error is thrown. Any ideas?

The borders are centered on most of the phones but not on Samsung galaxy phones.
I have attached the screenshot below.

while un-mounting the component ScrollPicker. the function scrollToIndex is called when this.sview is not set.
causing an error.