CODEWITHSUNDEEP
react-nativeflexbox
Me_Will
Me_Will

Reputation: 121

Display 2 images side by side and contained

I want to display 2 images side by side, 1 at left, 1 at right side, each image should be contained in half size of the screen. I followed [flexbox tutorial] (https://facebook.github.io/react-native/docs/flexbox) but still have problems: image1 and image2 are not contained and take a large part of the screen ( I want image 1 starts on the left and does not go over the middle of the screen - and image2 starts from the middle and take the space until the left of the screen).

Do you know how to do it ?

   render() {
    return (
      <View style ={styles.container}>
         <ImageBackground
              source={require("./images/background.jpg")}
              style={styles.background}>

            {/* It is in this part I have a problem */}
            <View style ={styles.imageContainer}>
              <View style ={{flex:1}}>
                  <Image resizeMode='contain'
                         style ={styles.image}
                         source={require("./images/image1.png")}/>
              </View>
              <View style ={{flex:1}}>
              <Image resizeMode='contain'
                     style ={styles.image}
                     source={require("./images/image2.png")}/>
              </View>
            </View>
        </ImageBackground>
      </View>
     );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    alignItems: 'center',
  },
  image: {
    flex: 1,
    alignItems: 'center',
  },
  background: {
    width: '100%', 
    height: '100%',
    alignItems: 'center',
  }
});

Upvotes: 2

Views: 2963

Answers (1)

Jebin Benny
Jebin Benny

Reputation: 951

You have to provide image width and height, for achieving the requirement.

Can you try with this?

 render() {
    return (
      <View style ={styles.container}>
         <ImageBackground
              source={require("./images/background.jpg")}
              style={styles.background}>

            {/* It is in this part I have a problem */}
            <View style ={styles.imageContainer}>
              <Image resizeMode='contain'
                         style ={{width: Dimensions.get('window').width/2, height: Dimensions.get('window').width/2}}
                         source={require("./images/image1.png")}/>
              <Image resizeMode='contain'
                     style =style ={{width: Dimensions.get('window').width/2, height: Dimensions.get('window').width/2}}
                     source={require("./images/image2.png")}/>
            </View>
        </ImageBackground>
      </View>
     );
  }
}

Don't forgot to import,

import { Dimensions } from 'react-native'

Upvotes: 2

Related Questions