react native view over a view in top left corner?

user_7578825 0
Viewed 881

i need to create the view with premium text in top corner over a image view like this below image. i don't have any clue to do this? can anyone help me to achieve this?

enter image description here

<TouchableOpacity
        style={{
           width: 70,
           height: '100%',
           backgroundColor: Color.appBackgroundColor,
           marginRight: 20,
  }}
        onPress={() => this.onPressMovie(item)}>
        <Image
          style={{
            width: '100%',
           height: '100%',
  }}
          source={{uri: Environment.baseUrlForImage + item.thumbnail}}
        />
      </TouchableOpacity>
react-native alignment view image
2 Answers

Something like this can do the job

<TouchableOpacity
    style={{
    width: 70,
    height: '100%',
    backgroundColor: Color.appBackgroundColor,
    marginRight: 20,
    }}
    onPress={() => this.onPressMovie(item)}>
    <Image
    style={{
        width: '100%',
    height: '100%',
    }}
    source={{uri: Environment.baseUrlForImage + item.thumbnail}}
    />

    <View style={{position: 'absolute', top: 100, left: -100, transform: [{rotate: "-45deg"}]}}>
        <View style={{padding: 10, width: 400, backgroundColor: "#ffa602"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>Premium</Text>
        </View>
    </View>
</TouchableOpacity>
user_102584450

You can try this for all screens

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ImageBackground,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

const width = 200;
const height = width / 5;
const top = width / Math.sqrt(8) - height;
const left = -(width / Math.sqrt(8) - height / 2);

export default function Login() {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        source={{
          uri: 'https://i.picsum.photos/id/828/200/300.jpg?hmac=YwDXceJcHQbinJfsIHJgrD8NakhtHzBMH-vD4aNcPo4',
        }}
        style={styles.poster}>
        <TouchableOpacity style={styles.premiumWrapper}>
          <Text style={styles.premiumText}>Premium</Text>
        </TouchableOpacity>
      </ImageBackground>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  poster: {
    height: '100%',
    width: '100%',
    backgroundColor: 'magenta',
  },
  premiumWrapper: {
    height: height,
    width,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffa604',
    transform: [{rotate: '-45deg'}],
    top,
    left,
  },
  premiumText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  },
});
user_69373810
Related