CODEWITHSUNDEEP
androidiosreactjsreact-nativelandscape-portrait
Griffin Fisch
Griffin Fisch

Reputation: 107

How open a image in landscape mode in react native

My whole app is in portrait mode but when I double tap on images/thumbnails I want the picture to open in landscape and auto back to portrait when the images are closed in React Native. I would really appreciate some help on this or a reference to a similar solution if posted already.

Upvotes: 1

Views: 1757

Answers (2)

naveed ahmed
naveed ahmed

Reputation: 470

use react-native-orientation-locker

useEffect(()=>{
Orientation.lockToLandscape();
 return () => {Orientation.lockToPortrait();};
},[])

Upvotes: 0

Kartikey
Kartikey

Reputation: 4992

You can do something like this

Working Example

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  Dimensions,
  Button,
  Modal,
} from 'react-native';
import Constants from 'expo-constants';
import * as ScreenOrientation from 'expo-screen-orientation';

let img =
  'https://www.highgroundgaming.com/wp-content/uploads/2020/06/Valorant-Maps-Guide.jpg';

export default function App() {
  const [visible, setVisible] = React.useState(false);

  function ChangeToLandscape() {
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
    setVisible(true);
  }

  function ChangeToPortrait() {
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
    setVisible(false);
  }

  return (
    <View style={styles.container}>
      {visible === false ? (
        <>
          <Image
            source={{ uri: img }}
            style={{ width: '100%', height: 300 }}
            resizeMode="contain"
          />
          <Button title="Show Full" onPress={() => ChangeToLandscape()} />
        </>
      ) : (
        <Modal animationType="slide" transparent={true} visible={true}>
          <View>
            <Image
              source={{ uri: img }}
              style={{ width: '100%', height: 300 }}
              resizeMode="contain"
            />
          </View>
          <Button title="Close" onPress={() => ChangeToPortrait()} />
        </Modal>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Upvotes: 5

Related Questions