CODEWITHSUNDEEP
javascriptcssreact-native
vishal dharankar
vishal dharankar

Reputation: 7756

how to centre the image inside a view in react native

I have a grid view, inside each cell I have added a view and then an image , the image isn't centered the code is as follows 

<ImageBackground
                source={require('./images/marble.jpg')}
                style={styles.backgroundImage}>

                <GridView
                    itemDimension={130}
                    items={items}
                    style={styles.gridView}
                    renderItem={item => (
                        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
                            <View style={styles.CircleShapeView}>
                            <Image style={styles.iconItem} source={item.name}/>
                            </View>
                        </View>
                    )}
                />

            </ImageBackground>

and styles are 

const styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch'
    },
    CircleShapeView: {
        width: 100,
        height: 100,
        borderRadius: 100,
        backgroundColor: '#00BCD4'
    },
    gridView: {
        paddingTop: 50,
        flex: 1,

    },
    itemContainer: {
        justifyContent: 'center',
        alignItems:'center',
        height:130
    },
    iconItem: {
        alignItems:'center',
        justifyContent: 'center'
    }
});

the output looks like this

enter image description here

Image should be at the centre of the circle, but its not.

Upvotes: 1

Views: 8918

Answers (2)

Sanjib Suna
Sanjib Suna

Reputation: 284

set in view

justifycontent:center
alignitems:center

Upvotes: 0

Praveen
Praveen

Reputation: 2419

Your image is inside a view 'CircleShapeView'

CircleShapeView: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: '#00BCD4',
    justifyContent: 'center',
    alignItems: 'center'
}

Upvotes: 1

Related Questions