Is there any way to rotate the image in a <BackgroundImage> element [React Native]-CodePudding

I'm trying to rotate the image in my <BackgroundImage> element by 45 degrees.
I do not have the ability to change the source image.
I cannot use the regular <Image> property.

I've consulted the docs and done a few searches and was unable to find anything.

CodePudding user response：

Use a css class on the element.

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center",
    transform: [{ rotate: '45deg' }]
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;

CodePudding user response：

Use this, I think it will helpful

   <ImageBackground source={require("../Assets/icon.png")} style={{height:100,width:100,transform: [{ rotate: "180deg" }],}}>
      <View style={{transform: [{ rotate: "180deg" }]}}>
         <Text>fgf</Text>
      </View>
   </ImageBackground>

I hope it will fixed your query.