What are the steps for creating a grid layout with a logo header displayed at the top?

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'
    }
});

Answer №1

Remove the unnecessary grid component from your code. Keeping it simple is key, and using a non-standard component may be causing complications that are difficult to identify.

Consider simplifying your code like this:

<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>

For a similar question, check out this post - How to create 3x3 grid menu in react native without 3rd party lib?

Answer №2

To modify the navigationOptions, you need to exclude the title property and instead define a header property where you can insert your Image. Here's an example:

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

Alternatively, you can set the header to null like this:

   static navigationOptions = {
        header:null
    };

Either way, your existing code should function as intended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

buttons inside a list view

I have a listview with a row layout structured like this: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="match_pare ...

Encountering a problem with integrating Vue js and making a jquery

Hello there! I'm currently working on fetching data through ajax and utilizing a vue wrapper component. Here's the code snippet I'm using: <html> <head> <title>title</title> <meta charset="UT ...

Tips and tricks for personalizing the leaflet Lopup component using vue js

Seeking guidance on customizing the design of the LPopup component in leafletjs. I found a helpful guide at: https://i.sstatic.net/qEZol.png After inspecting the Lpopup in the dev tools, I tried adding CSS styles to the 'leaflet-popup-content-wrappe ...

Utilize Parse cloud code to navigate and interact with object relationships

I am currently in the process of developing a Parse cloud code function that will produce a similar outcome to a GET request on parse/classes/MyClass, but with the IDs of the relations included. While I have successfully implemented this for a single obje ...

Navigating through a complex JavaScript project and feeling a bit disoriented

I recently joined a JavaScript project that was being worked on by a single programmer for the past 6 months. However, this programmer left without providing much explanation. The project is built using Ionic, which I have discovered is primarily used for ...

utilizing ajax to submit data with checkbox option

<html> <body> <input type="checkbox" checked="checked"> </body> </html> I am looking for a solution to pass the value of a checkbox as either 1 or 0 depending on its selection status. When the checkbox is checked, I want to s ...

JS The clipboardData in ClipboardEvent is perpetually void

I am trying to retrieve files using CTRL+V from the ClipboardEvent in Angular6, but I am encountering an issue where the clipboardData is always empty regardless of whether I test images or text. This problem persists even when tested on the latest release ...

Reducing the gridview size with the help of the Bootstrap framework's stylesheet

Seeking advice on adjusting the size and alignment of a Gridview in asp.net web forms using bootstrap stylesheets. Here's the code snippet in question: <table class="table table-sm" > <a ...

A guide to gathering a variety of data types for an array in Node.js

As a JavaScript beginner, I am on a mission to enhance my skills by solving online judge problems. However, I have hit a roadblock with a specific issue. The problem requires me to take input from the user in the form of an integer and a string in one go, ...

How can I create a jumping animation effect for my <li> element in JQuery?

I have a horizontal navigation bar with a "JOIN" option. My goal is to make the #jump item continuously jump up and down after the page has finished loading. Currently, I have this code which only triggers the jump effect once when hovering over the eleme ...

Tips for utilizing the grid system in Bootstrap 4 to transform a dropdown menu into the desired shape shown in the image

I am struggling to create a dropdown menu similar to the one highlighted with a red border in the image, The screenshot I referenced is from the bootswatch website (a bootstrap theme). Although I attempted to use bootstrap flex utility, I was unable to a ...

Typescript Angular filters stop functioning properly post minification

I developed an angular filter using TypeScript that was functioning properly until I decided to minify the source code. Below is the original filter: module App.Test { export interface IGroupingFilter extends ng.IFilterService { (name:"group ...

Why does the Formik form only validate after the second button click in this React Hooks, TypeScript, Formik, NextJS setup?

Looking for fresh perspectives on my code. The issue lies in the fact that it takes two submission attempts to validate the data inputted into a form successfully. It appears that the post request to Airtable happens before the validation schema, resulting ...

What is the best method to incorporate a Node.js package into a Java program?

In the process of enhancing a server built in Java, I stumbled upon an excellent Node.js package on npm that offers an API I wish to utilize from the Java server. What is the best approach for establishing a connection or bridge between these two technolo ...

Is there a way to incorporate additional text into option text without compromising the existing values?

One challenge I'm facing is adding additional text to the options without changing their values upon selection. Would you be able to assist me with resolving this issue? I have come across the following HTML code: <select id="q_c_0_a_0_name"> ...

Utilize JavaScript's Map function to employ generalized keys in an array of objects

I am dealing with an array of objects that looks like this: [ { "job_id": 1, "job_name": "Engineer" }, { "job_id": 2, "job_name": "Scientist" }, ...

Simple method to retrieve unordered list identifiers as an array using PHP

Currently, I am working with an unordered list where I am using DB ids as the list-item ids. When the Submit button is pressed, I want to present all the ID's of my list items as an Array in PHP. I am still learning JavaScript and although there are s ...

Ensure that all of the text boxes are aligned perfectly in the same vertical position

Is there a way to align all the textboxes in the same vertical position without using tables, only using HTML and CSS? The textboxes should start just after the label and follow the width of the label. Also, all labels are left-justified. Code :: <d ...

What sets apart a React component from a function-as-component in React?

React is really confusing to me right now. Take this simple react component for example: export default function Foo(){ return( <div> <div>some text</div> </div> ) } I want to add a child compone ...

embarcadero rad studio application for android incorporating google maps

I recently created a basic Google Maps app that functioned well by calling a maps URL through a web browser control. However, I am now attempting to enhance the functionality of a second app by utilizing a TMapView control, but unfortunately, I am encounte ...