4

I am trying to position two images at the bottom border, each side with the 50% width, so as to properly scale to any device size. But I can't seem to get any absolute positioning to behave in a reproducible way.

I've made an example Snack: https://snack.expo.io/rJd3OkVIM

The App component and the associated style is shown below:

import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
                style={styles.img}
                resizeMode="contain"
                resizeMethod="resize"
                source={require('./leftbg.png')}
            />
        <Image
                style={styles.imgr}
                resizeMode="contain"
                resizeMethod="resize"
                source={require('./rightbg.png')}
            />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
  },
    img: {
      width: '50%',
      position: 'absolute',
      left: 0,
    },
    imgr: {
      width: '50%',
      position: 'absolute',
      right: 0,
    }
});

Each device sets the image vertical centering to a random part of the screen, every time the project is opened the centering seems to change.

Kevin Amiranoff
  • 13,440
  • 11
  • 59
  • 90
localhost
  • 845
  • 3
  • 14
  • 32

2 Answers2

3

To achieve your requirement, let wrap 2 images to a View with flexDirection: 'row', then make the top level View with justityContent: 'flex-end'.

I made a simple code with hard code height for 200 px and put the background as goldenrod for easy recognization.

If you need to keep the ratio of image, follow this answer: Maintain aspect ratio of image with full width in React Native

import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row', height: 200, backgroundColor: 'goldenrod' }}>
          <Image
                style={styles.img}
                source={require('./leftbg.png')}
            />
          <Image
                  style={styles.imgr}
                  source={require('./rightbg.png')}
              />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
    justifyContent: 'flex-end',
  },
    img: {
      width: '50%',
      height: '100%',
      resizeMode: 'cover',
    },
    imgr: {
      width: '50%',
      height: '100%',
      resizeMode: 'cover',
    }
});
David Schumann
  • 13,380
  • 9
  • 75
  • 96
Khoa
  • 2,632
  • 18
  • 13
  • But this uses the height as the constraint, not the width. – localhost Feb 04 '18 at 14:49
  • not sure if I understood or not, but here is what I thought: You need 2 images 1 on left and 1 on right, each took 50% width and put at the bottom of screen. The height is depending on your need, I currently hard code height 200 px but you can change it to whatever you want. – Khoa Feb 05 '18 at 04:45
0

You haven't given your images a vertical position reference ( top:x || bottom: x ), so this is probably why you are experiencing this behaviour.

Try setting bottom: 0 on img and imgr styles in order to set them to the bottom of the screen.

Ryan Turnbull
  • 3,766
  • 1
  • 25
  • 35