Is there a way to overlay a rounded image tag on top of two div elements in React Native?

Question

Is there a way to overlay a rounded image tag on top of two div elements in React Native?

I am looking to design a profile page featuring a rounded image placed on top of two divs in a 30:70 ratio. The top div will be empty while the bottom div will display some items. I have experimented with various code snippets found online.

<View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'green', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
        <View style={{ flexDirection: 'column', justifyContent: "flex-start", alignItems: "flex-start", alignSelf: "flex-start" }}>
            {/* <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end', alignSelf: 'flex-start', margin: 1 }}> */}
                <View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "30%", width: "100%" }}></View>
            {/* </View> */}
            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start', alignSelf: 'flex-start', margin: 1 }}>
                <View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "70%", width: "100%" }}></View>
            </View>
        </View>

        <View style={{ justifyContent: 'center', alignItems: 'center', alignSelf: 'center', position: 'absolute' }}>
            <View style={{
                backgroundColor: 'blue',
                borderRadius: 10, height: 100, width: 100, borderRadius: 100 / 2
            }}></View>
        </View>
    </View>

reference image

css react-native

Answer 1

Answer №1

After reviewing the image provided... Two different perspectives can be considered when setting the profile avatar style to:

{
  position: 'absolute',
  alignSelf: 'center',
  etc..
}

For a quick demonstration, visit:

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, Image } from 'react-native';
import { Ionicons, FontAwesome } from '@expo/vector-icons';

import Constants from 'expo-constants';
import { avatar, background } from './data';

export default class App extends Component {
  renderRow({ action, icon, fontAwesome = false }) {
    return (
      <View style={styles.actionRow}>
        {fontAwesome 
          ? <FontAwesome name={icon} size={25} /> 
          : <Ionicons name={icon} size={32} />}
        <Text style={styles.text}>{action}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground source={background} style={styles.background}>
          <Image source={avatar} style={styles.avatar} />
        </ImageBackground>
        <View style={styles.content}>
          {this.renderRow({ action: 'Scanner', icon: 'ios-camera' })}
          {this.renderRow({
            action: 'Profile',
            icon: 'user-circle-o',
            fontAwesome: true,
          })}
        </View>
      </View>
    );
  }
}

Your styles:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    width: '100%',
    height: 130,
  },
  content: {
    flex: 1,
    marginTop: 80,
    marginHorizontal: 10,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: '50%',
    borderWidth: 0.7,
    borderColor: 'black',
    position: 'absolute',
    alignSelf: 'center',
    marginTop: 80,
  },
  actionRow: {
    width: '100%',
    height: '50',
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },
  text: {
    marginLeft: 15,
    fontWeight: '500',
  },
});

Answer 2

After reviewing the image provided... Two different perspectives can be considered when setting the profile avatar style to:

{
  position: 'absolute',
  alignSelf: 'center',
  etc..
}

For a quick demonstration, visit:

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, Image } from 'react-native';
import { Ionicons, FontAwesome } from '@expo/vector-icons';

import Constants from 'expo-constants';
import { avatar, background } from './data';

export default class App extends Component {
  renderRow({ action, icon, fontAwesome = false }) {
    return (
      <View style={styles.actionRow}>
        {fontAwesome 
          ? <FontAwesome name={icon} size={25} /> 
          : <Ionicons name={icon} size={32} />}
        <Text style={styles.text}>{action}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground source={background} style={styles.background}>
          <Image source={avatar} style={styles.avatar} />
        </ImageBackground>
        <View style={styles.content}>
          {this.renderRow({ action: 'Scanner', icon: 'ios-camera' })}
          {this.renderRow({
            action: 'Profile',
            icon: 'user-circle-o',
            fontAwesome: true,
          })}
        </View>
      </View>
    );
  }
}

Your styles:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    width: '100%',
    height: 130,
  },
  content: {
    flex: 1,
    marginTop: 80,
    marginHorizontal: 10,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: '50%',
    borderWidth: 0.7,
    borderColor: 'black',
    position: 'absolute',
    alignSelf: 'center',
    marginTop: 80,
  },
  actionRow: {
    width: '100%',
    height: '50',
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },
  text: {
    marginLeft: 15,
    fontWeight: '500',
  },
});

Is there a way to overlay a rounded image tag on top of two div elements in React Native?

Answer №1

Similar questions

Utilizing the Primevue theme for a fresh new look

Attempting to create a slider utilizing jQuery

Is one round the limit for my JavaScript image slider?

Arrange the header and input within a div using flexbox to achieve different alignments

Tips for integrating a vertical menu with button icons and subcategories

Top method for customizing w2ui grid appearance

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

What is the correct way to reset the styling of a web browser element, such as a <button>?

Arranging divs in a stack and implementing a toggle function for displaying and hiding them

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

Adding CSS files to a JSP page in a Struts2 application

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Update the hover functionality to only trigger on small screens when clicked

Images with full-width will scroll horizontally

Something isn't quite right - Mobile Compatibility not functioning

How can I create responsive buttons with icons using material-ui?

Displaying error message dynamically using ajax

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

The fixed div transforms its content when other divs move through it during scrolling

Creating an accessible order for the next and back buttons