Hello everyone, I am new to using react native and I have a specific layout in mind that I would like to achieve. However, the code I currently have places the logo inside a grid. Here is the layout I am aiming for: https://i.sstatic.net/zkJcK.png
import React, { Component } from 'react';
import GridView from 'react-native-super-grid';
export default class ProfileScreen extends Component {
static navigationOptions = {
title: 'Details',
};
render() {
const { navigate } = this.props.navigation;
const items = [
{ name: require('./images/shopping-cart.png'),code: '#2ecc71' }, { name: require('./images/home.png'), code: '#2ecc71' },
{ name: require('./images/money-bag.png'), code: '#2ecc71' }, { name: require('./images/alert.png'), code: '#2ecc71' }
];
return (
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<View style={styles.mainLayout}>
<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={styles.itemContainer}>
<View style={styles.CircleShapeView}>
<Image style={styles.iconItem} source={item.name}/>
</View>
</View>
)}
/>
</View>
</ImageBackground>
);
}
}
const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
},
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4',
justifyContent: 'center',
alignItems: 'center'
},
gridView: {
paddingTop: 50,
flex: 1,
},
itemContainer: {
justifyContent: 'center',
alignItems:'center',
height:130
},
iconItem: {
alignItems:'center',
justifyContent: 'center'
},
logoFit: {
width: imageHeight,
height: imageWidth
},
mainLayout: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}
});