iPad orientation issue #773
Description
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;