How can I use react-native-picker horizontally?

275 Views Asked by At

Hi i want to use https://github.com/react-native-picker/picker library horizontally. I also found some picker libraries that can be used horizontally but none of them works as stable as this native picker. I tried to give style transform rotate 90 deg but it caused the view below

rotated picker

And I couldnt reach text style to rotate it -90 deg.

I tried to download library and edit it but it's objective c and I don't know nothing about it. How can I do that any ideas?

My picker code

<Picker style={{
                  width: 100,
                  position: 'absolute',
                  right:50,                  
               }}
               itemStyle={{
                fontSize: 20,
                width: 100,    
                transform: [{ rotate: '90deg' }],            
              }}
               selectedValue={Value} 
                onValueChange={(itemValue, itemIndex) => {
                  setValue(+itemValue);
                }}
               >
               {Values.map(item => (
                 <Picker.Item
                   key={item.key}
                   label={item.value}
                   value={item.key}
                 ></Picker.Item>
               ))}
             </Picker>

I tried to edit the PickerItem.js in library like below but it didn't work

export default function PickerItem({
  color,
  label,
  testID,
  value,
  enabled = true,
}: Props): React.Node {
  return (
    <Option
      disabled={enabled === false ? true : undefined}
      style={{color}}
      testID={testID}
      value={value}
      label={label}>
      <Text style={{transform: '-90deg', backgroundColor: 'red'}}>
        {label}
      </Text>
    </Option>
  );
}

and also I tried to add label.transform = CGaffineTransformMakeRotation(M_PI / 2); to RNCPicker.m

0

There are 0 best solutions below