iPad orientation issue

[gkasireddy202]

Environment

System:
OS: macOS 15.3
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 87.23 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 21.7.3
path: /usr/local/bin/node
Yarn: Not Found
npm:
version: 10.5.0
path: /usr/local/bin/npm
Watchman:
version: 2023.03.13.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /Users/gopi/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK:
API Levels:
- "23"
- "27"
- "32"
- "33"
- "34"
- "35"
Build Tools:
- 29.0.2
- 30.0.3
- 33.0.1
- 34.0.0
- 35.0.0
System Images:
- android-32 | Google APIs Intel x86 Atom_64
- android-32 | Google Play Intel x86 Atom_64
- android-33 | Google APIs Intel x86 Atom_64
- android-33 | Google Play Intel x86 Atom_64
Android NDK: Not Found
IDEs:
Android Studio: 2024.2 AI-242.23726.103.2422.13103373
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 18.0.2.1
path: /Library/Java/JavaVirtualMachines/jdk-18.0.2.1.jdk/Contents/Home/bin/javac
Ruby:
version: 2.7.6
path: /Users/gopi/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.1
wanted: 15.0.1
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.78.0
wanted: 0.78.0
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

Platforms

Versions

• Android:
• iOS:iOS 18.2
• react-native-modal-datetime-picker:18.0.0
• react-native-community/datetimepicker:8.3.0
• react-native:0.78.0
• react:19.0.0

Description

Trying to open the date picker in landscape mode on iPad, but the picker is changed to portrait mode.

Reproducible Demo

Code

import React, { Component } from "react";
import { View, Text, Button } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from "moment";

class Example extends Component {
constructor(props) {
super(props);
this.state = {
isDatePickerVisible: false,
selectedDate: null,
};
}

showDatePicker = () => {
this.setState({ isDatePickerVisible: true });
};

hideDatePicker = () => {
this.setState({ isDatePickerVisible: false });
};

handleConfirm = (date) => {
this.setState({ selectedDate: date });
this.hideDatePicker();
};

render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

    <Text style={{ marginTop: 20, fontSize: 16 }}>
      {this.state.selectedDate 
        ? `Selected: ${moment(this.state.selectedDate).format("YYYY-MM-DD")}`
        : "No date selected"}
    </Text>

    <DateTimePickerModal
      isVisible={this.state.isDatePickerVisible}
      mode="date"
      onConfirm={this.handleConfirm}
      onCancel={this.hideDatePicker}
	  pickerStyleIOS={{alignSelf:'center'}}
    />
  </View>
);

}
}

export default Example;

Simulator.Screen.Recording.-.iPad.10th.generation.-.2025-03-27.at.20.43.24.mp4

[iamitkhatkar]

you can fix it by passing the modal props in it

modalPropsIOS={{ supportedOrientations: ['portrait', 'landscape'] }}