How to make this grid with logo header at the top?

Question

I am a newbie to react native, I want to make this layout possible I have following code but it puts the logo inside grid

What I am looking for is this

 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', // or 'stretch' }, 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' } }); 

Answer 1

Get rid of that grid component. You don't need it for such a simple thing. It's complicating things, and as it's not a regular/common component we don't know how it's affecting things.

This looks quite simple:

<View>
    <View style={{}}>
        <Image />
    </View>

    <View style={{flexDirection:'row'}}>
        <View>
            <Text>row 1, col 1</Text>
        </View>
        <View>
            <Text>row 1, col2Text>
        </View>
    </View>

    <View style={{flexDirection:'row'}}>
        <View>
            <Text>row 2, col 1</Text>
        </View>
        <View>
            <Text>row 2, col2Text>
        </View>
    </View>

    <View style={{}}>
        <Button title="Login" />
    </View>

</View>

Here's another similar question - How to create 3x3 grid menu in react native without 3rd party lib?

Answer 2

Inside navigationOptions You should remove the title property and define a header property and put your Image there. Like this

   static navigationOptions = {
        header:(<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>)
    };

Or... YOu can just make the header null as

   static navigationOptions = {
        header:null
    };

and your current code would work as you want it to be.