CODEWITHSUNDEEP
reactjsreact-native
Yossi
Yossi

Reputation: 6027

Positioning an image in React Native: starting from top, stretching to screen's width, keeping aspect ratio

I am trying to display an image in RN as following:

The image size is 340x340.

Here is how it is displayed on Genymotion's Nexus 5 emulator (screen resolution 1080x1920): enter image description here

And this is the code:

import React, { Component } from 'react';
import { View, Animated, Text, Dimensions } from 'react-native';

const { height } = Dimensions.get('window');
const IMAGE_HEIGHT = height * 2 / 3;

class SplashScreen extends Component {
  constructor(props) {
    super(props);
    this.imageHeight = new Animated.Value(IMAGE_HEIGHT);
  }

  render() {
    return (
      <View style={{ backgroundColor: '#fff', flex: 1 }}>

        <View style={{ flex: 2, alignItems: 'stretch', justifyContent: 'flex-start' }}>
          <Animated.Image
            style={{ height: this.imageHeight }}
            resizeMode="contain"
            source={require('./image.png')}
          />
        </View>

        <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 22, alignSelf: 'center', padding: 15 }}>
              Header
            </Text>
            <Text style={{ fontSize: 16, alignSelf: 'center', paddingBottom: 10 }}>
              text text text text
            </Text>
        </View>

      </View>
    );
  }
}

export default SplashScreen;

Any idea how to do it?

Upvotes: 2

Views: 825

Answers (1)

user5470921
user5470921

Reputation: 576

Try <Image style={{ height: null, flex: 1, width: null }} /> and play with resizeMode to get the desired result.

Upvotes: 1

Related Questions