Achieving a centered SearchBar with a single button on the NativeBase header

I am trying to center the search bar with the menu button on the right side of the header using Nativebase. The code for this is provided below:

    <Header>
        <Body>
            <Button style={styles.searchButton} onPress={() => this.onSearchPress()} >
            <Text>Search Service</Text>
          </Button>
        </Body>
        <Right>
            <Icon name='menu' style={styles.drawerIcon} onPress={()=> navigation.openDrawer()} />
        </Right>
    </Header>

Is there a way to position it in the center with full width?

cssreactjsreact-nativenative-base

Answer №1

    <Header>
      <Left/>
        <Body>
            <Button style={styles.searchButton} onPress={() => this.onSearchPress()} >
            <Text>Search Service</Text>
          </Button>
        </Body>
        <Right>
            <Icon name='menu' style={styles.drawerIcon} onPress={()=> navigation.openDrawer()} />
        </Right>
    </Header>

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

Sorting feature in Antd table does not function properly when using render method

I'm having trouble sorting data in a table because the sorter with render function only works once. { title: 'App', dataIndex: 'location', render: location => location.join(', '), sorter: true }, { title: &a ...

reactjsantd

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

javascriptphphtmlcss

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

htmlcss

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

Having trouble with installing forked node_module react. Let's troubleshoot and get

After discovering that the original author had abandoned a react native module that met my needs, I decided to fork it for corrections. Following some online articles on how to Fork repositories, I successfully made the necessary changes and cloned the rep ...

node.jsreact-nativegithubnpmyarnpkg

The state will remain unchanged until there is an external trigger

Currently, I am utilizing useEffect in order to execute a function that retrieves data from Firebase. Even though the data retrieval works fine, there seems to be an issue with the setState function not updating until after another state has been changed. ...

reactjsfirebasegoogle-cloud-firestorereact-hooks

Is there a way to display an image in a React Native app using data from a JSON file?

I am currently working with JSON content that includes the path of an image. I need to display this image in my React Native application. What is the best way to render this image? {"aImages":[{"obra_path":"http:\/\/uploa ...

javascriptandroidjsonreactjsreact-native

Incorporating smooth sliding animation to ng-repeat elements

Our team has developed a custom widget in ServiceNow that displays a row of icons and reveals or hides additional details in a div when icons are clicked. Below is the structure of our html and client controller: <div class="icons"> <ul class=" ...

cssangularjscss-transitionsservicenow

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Just made some updates to an example by user @austin Encountering an issue when trying to transition backwards (from tab3 to tab2), but it works fine when transitioning forward. I'm not sure what I'm missing here, so any help would be appreciate ...

cssangularjsangular-ui-bootstrapangular-ui-bootstrap-tab

The transparent image is causing the menu item to be hidden underneath it because of z-index complications

Could you please review this jsfillde? <nav role="navigation" class="nav-main"> <ul class="nav nav-pills" id="menu-primary-navigation"> <li class="active menu-home"><a href="/">Home</a></li> <li ...

htmlcss

Is it possible to use Material-UI Link along with react-router-dom Link?

Incorporating these two elements: import Link from '@material-ui/core/Link'; import { Link } from 'react-router-dom'; Is there a method to combine the Material-UI style with the features of react-router-dom? ...

javascriptreactjsmaterial-uireact-router-dom

Spacing between hidden checkboxes and their labels

I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...

htmlcsscheckboxinputmargin

Tips for creating CSS from the Google Chrome inspector for future use

Hey there, I spent the evening debugging my JSF page and noticed some changes in appearance when checking/unchecking options in Google Chrome Inspector. I want to create a new CSS file based on these checked options and save it for use in my web applicat ...

cssgoogle-chrome-devtools

Troubleshooting Nested Import Issue with Framer Motion's AnimatePresence

Encountered an interesting issue with Framer Motion and the exitBeforeEnter tag while working on importing components that utilize the motion.div attribute. The code snippet below functions correctly: <AnimatePresence exitBeforeEnter> <div> ...

reactjsanimationnext.jsframer-motion

Tips for stopping </p> from breaking the line

<p>Available: </p><p style={{color:'green'}}>{props.active_count}</p><p>Unavailable: </p><p style={{color:'red'}}>{props.inactive_count}</p> I want the output to display as two separate l ...

reactjstypescriptnext.js

What steps do I need to take to integrate fixture data into a React Redux application?

Is there a way to set up a react redux application with mock data (fixtures) until the server API becomes available? When the APIs are ready, is it possible to easily switch over to using the server API for data retrieval instead of the dummy data stored ...

reactjsredux

What is the process for extracting content from CSS comments or annotations in a stylesheet?

Here's an interesting concept: allowing users to define a set of CSS rules with annotations. For example: /* @name Page style */ body { font: 16px/1.5 Arial; /* @editable */ background-color: #fff; /* @editable */ } /* @name Section header */ ...

javajavascriptcssparsingcomments

The div height set to 100% and using display:flex is experiencing issues in Chrome

Bootstrap 3.0 is utilized in the design. My goal is to have uniform height for all boxes, with the "more" link on the right box positioned correctly. However, the box ends before reaching the more link. Take a look at this JSFiddle example. Here is the H ...

htmlcsstwitter-bootstrapflexbox

Encounter a snag when attempting to upgrade to React version 16.10.2 while working with Ant Design Components - the error message reads: "

After upgrading to the latest React version 16.10.2, I encountered issues while using Ant Design Components. I specifically wanted to utilize the Title component from Typography. Here is an example of what I was trying to do: import { Typography } from & ...

javascriptreactjsantd

populating an array with objects

I am working with an array of objects var photos: Photos[] = []; The structure of Photos [] is as follows interface Photos { src: string; width: number; height: number; } I have a component that requires an array of strings export type PhotosArr ...

reactjstypescript