Placing an object to the right side

I'm currently developing an app using React Native and I need to position something on the right side of the screen.

   <View style={searchDrop}> 
             <TextInput
              style={textInput}
              placeholder="Search Coin"
              onChangeText={(text) => this.onSearch(text)} />
              <TouchableOpacity onPress={() => this.props.navigation.navigate("CurrencySelection")}>
                      <Text style={money}> <Icons name="money" size={35} color="#fbc02d" /> </Text>
              </TouchableOpacity>
            </View>

Here are the styles being used:

textInput: { 
    width: "70%",
    height: 35,
    marginLeft: 5,
    marginRight: 5,
    borderWidth: 0,
    backgroundColor: "white",
    borderRadius: 15,
    textAlign: 'center'
  }, 

searchDrop: {
    paddingTop: 32,
    paddingBottom: 5,
    display: "flex",
    flexDirection: "row",
    height: 80,
    backgroundColor: "#3b5998",
    width: 100%
  }, 
  money: {
    position: "absolute",
    right: 0
  }

My expectation was for the element with the style {money}, containing an icon, to be positioned on the far right side of the screen.

However, it is currently displaying like this:

https://i.sstatic.net/dyOeX.png

javascriptcssreact-native

Answer №1

To shift the icon to the right, follow this simple step.

  <View style={styles.searchDrop}>
    <TextInput
      style={styles.textInput}
      placeholder="Search Coin"
      onChangeText={text => this.onSearch(text)}
    />
    <TouchableOpacity
      style={styles.money}
      onPress={() => this.props.navigation.navigate('CurrencySelection')}>
          <Text> <Icons name="money" size={35} color="#fbc02d"/> </Text>
    </TouchableOpacity>
  </View>

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

What effect does the addition of a border-top have on the position of the left column, causing it

Currently, I am working on creating a list with each list item having a bottom border of 1px solid. The list is then divided into 3 columns using column-count:3 CSS property. For instance, if there are 8 items, it should display 3 items in the first column ...

htmlcss

Tips for sending Json data through a form to a controller and storing it in a database

I am working on a form that contains a sample table with values. The table (id=sampleTbl) has two columns: name and age. My goal is to save this data into my database table named person (id=AI, name, age) when the submitButton (id=idOfButton) is clicked. ...

javascriptphpjsoncontrolleryii2

Tips for dynamically passing a URL to a function using the onload event

I require assistance with passing a dynamic URL to a function. code onload="getImage('+ val.logo +');" onclick="loadPageMerchantInfo('+ val.merchant_id +'); The value of val.logo contains a URL such as: https://www.example.com/upload ...

javascriptjqueryonsen-ui

Angular 2's SVG creations do not resize properly

It is a common knowledge that an svg element with the attribute viewbox should automatically scale to fit the sizes specified in the styles. For instance, let's consider a 200*200 circle placed inside a 100*100 div. Prior to that, we need to ensure t ...

csssvgangular

Having trouble accessing `event.target.value` when selecting an item from the autocomplete feature in Material-UI with the

*** UPDATED CODE BASED ON RECOMMENDATIONS *** I am currently in the process of familiarizing myself with material-ui. I have been exploring how to incorporate event handling with material-ui components, specifically by combining an autocomplete feature wit ...

javascriptreactjsautocompletematerial-uitextfield

Bizarre issue encountered while attempting to upgrade a program to Vue2

Upon running vue-migration-helper and updating everything, I encountered the error below. vue2.default.user is not a function Console error: Uncaught TypeError: _vue2.default.use is not a function at eval (eval at <anonymous> (app.js:1624), & ...

javascriptlaravel-5vue.jsvuejs2laravel-elixir

The transition kicks in as soon as the page finishes loading

I am attempting to incorporate transitions on divs when the page loads, but I am encountering difficulties getting it to work. template <header> <transition name="slideLeft"> <div v-show="loaded" class="contents content-left"&g ...

javascriptvue.js

How can you append an object with a defined key to an array in Vue?

Currently developing a vue-application that includes a component for managing driving licenses. Here is an overview of my data setup: data() { return { custom_licenses: [], basic_licenses: [] } } Within my methods, I have the following l ...

javascriptarraysvue.jsvuejs2

Promise-based React Redux Login: An error occurred during login process

I'm currently working on my first React+Redux application and I'm still in the scaffolding phase. As a newcomer to React, I've encountered an issue with my simple login app. The AuthAction returns a Promise from the login(username, password) ...

javascriptreactjsreduxpromisereact-redux

Changing the color of a text box when it is disabled can be achieved through JavaScript

I'm facing an issue with the formatting of my HTML elements. Specifically, I have 2 combo boxes and one text box in which all 3 are disabled. However, when they are disabled, the background color of the text box does not match that of the combo boxes. ...

javascriptjsp

Encountering an issue in Typescript where utilizing ref in ShaderMaterial triggers an error stating: "The anticipated type is originating from the property 'ref' declared within the 'PolygonMat' type definition."

While working on a shaderMaterial with the drei library, I encountered an issue with TypeScript when using ref: Type 'RefObject<PolygonMat>' is not assignable to type 'Ref<ShaderMaterial> | undefined'. I defined the type ...

javascriptreactjsreact-three-fiberreact-three-drei

Silence from PHP script after executing jQuery post() method

I've run into an issue while trying to retrieve data from a PHP file that reads a mySQL database. The data is delivered successfully when accessed through a browser: However, when attempting to access the data using jQuery's get() or post() meth ...

phpjavascriptjquerypost

Tips for managing the transparency level of a container's backdrop using CSS?

Is there a way to adjust the transparency of an image, change the background color of a container, button, or form using CSS? Which specific property would be appropriate for this task? ...

htmlcss

Unable to use NodeJS await/async within an object

I'm currently developing a validation module using nodeJs and I'm facing difficulties understanding why the async/await feature is not functioning correctly in my current module. Within this module, I need to have multiple exports for validation ...

javascriptnode.jsexpress

Guide to logging in using REST/API with a Next.js application

Issue: I am facing a challenge integrating with an existing repository that was created using Next.js. The task at hand is to enable users to sign in to the application through a specific endpoint or URL. To achieve this, I have been attempting to utilize ...

javascriptauthenticationnext.jsserver-side-rendering

What is the best way to transform a JavaScript file retrieved from a remote server (returned as a string) into a standard JavaScript object in a Node

Is there a way to convert a JavaScript file fetched from a remote server (which is in string format) into a regular JavaScript object in Node.js? I know that I can use JSON.parse to convert a JSON string into a dictionary, but in this case, the file contai ...

javascriptnode.jsexpress

Transmit information to the Express server

Having difficulty transmitting data to the Backend. I am trying to send the data f1 to QueryBackend.js. However, when I attempt to use console.log(req.body.f1), it always returns as undefined, even though I can retrieve the value in Services.js. Toolbar.j ...

javascriptnode.jsexpress

Is it possible for the relative path of a gif image to become invalid when added to a div?

Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...

javascriptjqueryhtmlasp.net-mvcrazor

Button's focus event doesn't trigger on iPad

I am facing an issue with adding a bootstrap popover to my website. The popover should appear when the user clicks a button using the focus event. This functionality works fine on desktop browsers, but on the iPad, it seems like Safari on iOS does not trig ...

javascripthtmliosbootstrap-4bootstrap-popover

Selecting middleware to be executed based on Express JS request parameters

Can someone please advise me on how to select between two distinct middleware functions, based on the request for a specific endpoint? It may involve something along these lines: router.post("/findAvailableAgents", chooseMiddleware(middleware1, ...

javascriptnode.jsexpress