CODEWITHSUNDEEP
react-native
Muhammad Raihan Muhaimin
Muhammad Raihan Muhaimin

Reputation: 5729

React native image full width not working with `alignItems: 'center'`

Hi I am working with a react-native project. I am trying to set width of the image have the full width of the screen. Based on various stackoverflow answer and this github issue I wrote the following code 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
    alignSelf: 'stretch'
  },
  canvas: {
    flex: 1,
    width: null,
    height: null
  },
});

return (
    <View style={styles.container}>
      <Image
        resizeMode="cover"
        source={pic}
        style={styles.canvas} />
    </View>        
);

However, the moment I add the following rules alignItems: 'center' in the style rule container. The pictures doesn't render any more. I am wondering why alignItems: 'center' prevent the pictures from render?

Upvotes: 2

Views: 3324

Answers (2)

Filip Stojanac
Filip Stojanac

Reputation: 46

alignItems: 'center' doesn't have a predetermined width/height, so you must either specify width/height in canvas style rule, or int he same rule put alignSelf: 'stretch'. 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
    alignSelf: 'stretch',
  },
  canvas: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    height: null
  },
});

Upvotes: 3

Pir Shukarullah Shah
Pir Shukarullah Shah

Reputation: 4232

You can get width and height of window using Dimensions, see following example

import {Dimensions} from 'react-native'
const { width, height } = Dimensions.get('window')

Upvotes: 0

Related Questions