react native swiper horizontal

React native doesn't have any transform origin property yet. have to use translate to move rotation center to top left corner of screen, After rotation is done, shift view again to cover screen.

import React, { Component } from 'react'
import { Dimensions, ImageBackground, StyleSheet, Text, View } from 'react-native'
import Swiper from 'react-native-swiper'

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})

export default class SwiperComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      height: null,
      width: null,
    };
  }

  componentWillMount() {
    //swap screen height and width after rotation
    let { height, width } = Dimensions.get('window');
    this.setState({
      width: parseInt(height),
      height: parseInt(width)
    })
  }

  render() {

    console.log(this.state.height, this.state.width)
    return (

      <View style={{
        height: this.state.height,
        width: this.state.width,
        translateX: -this.state.width / 2,
        translateY: -this.state.height / 2,
        transform: [{ rotate: '90deg' }],
        top: this.state.width / 2,
        left: this.state.height / 2,
      }}>

        <Swiper showsButtons={true}>
          <ImageBackground source={require('./img/1.jpg')}
            resizeMode='stretch'
            style={{ ...styles.slide, width: '100%', height: '100%' }}>
            <Text style={styles.text}>Hello Swiper</Text>
          </ImageBackground>
          <ImageBackground source={require('./img/2.jpg')}
            resizeMode='stretch'
            style={{ ...styles.slide, width: '100%', height: '100%' }}>
            <Text style={styles.text}>Beautiful</Text>
          </ImageBackground>
          <ImageBackground source={require('./img/3.jpg')}
            resizeMode='stretch'
            style={{ ...styles.slide, width: '100%', height: '100%' }}>
            <Text style={styles.text}>And Simple</Text>
          </ImageBackground>
        </Swiper>
      </View>
    )
  }
}

reference:
https://chuanshuoge2.blogspot.com/2019/10/react-native-swiper.html
https://stackoverflow.com/questions/46303736/make-dimension-relative-to-another-in-react-native
https://stackoverflow.com/questions/35050774/how-can-i-make-text-vertical-rotated-90-deg-in-react-native
https://stackoverflow.com/questions/52561376/react-native-transform-origin