Learn how to showcase vertical text in React Native similar to a drawer

Looking for a way to display text vertically in a dynamic manner, where the length of the text can vary. Below are some examples for reference:

Example 1

Example 2

<View>
  <View style={{}}>
    <View
      style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
    >
      <Text
        style={{
          textAlign: "center",
          fontSize: 20,
          alignSelf: "center",
          transform: [{ rotate: "90deg" }],
          color: "white",
          fontWeight: "bold",
        }}
      >
        Short
      </Text>
    </View>
  </View>

  <View style={{}}>
    <View
      style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
    >
      <Text
        style={{
          textAlign: "center",
          fontSize: 20,
          alignSelf: "center",
          transform: [{ rotate: "90deg" }],
          color: "white",
          fontWeight: "bold",
        }}
      >
        Long Text
      </Text>
    </View>
  </View>
</View>;
javascripttypescriptreact-native

Answer №1

If you attempt to apply the transformations individually on each <Text />, you may encounter difficulties. It's advisable to implement the transformations within a parent <View /> element for better control over the process.

const App = () => {
  const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
  const height = 80;

  return (
    <View
      style={{
        transform: [
          // Provide necessary explanations and adjustments here
        ],
        width: screenHeight,
        height,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green',
      }}>
      <Text
        style={{
          fontSize: 20,
          color: 'white',
          fontWeight: 'bold',
          margin: 10,
        }}>
        Short
      </Text>

      <Text
        style={{
          fontSize: 20,
          color: 'white',
          fontWeight: 'bold',
          margin: 10,
        }}>
        Long Text
      </Text>

      <Text
        style={{
          fontSize: 20,
          color: 'white',
          fontWeight: 'bold',
          margin: 10,
        }}>
        Very Long Long Text
      </Text>
    </View>
  );
};

For further reference, view the output here.

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

The TypeScript namespace does not exist or cannot be located

Currently, I am working on coding in TypeScript. The specific code pertains to an Angular 2 application, but the main focus of my inquiry lies within TypeScript itself. Within my project, there are certain files that contain various models, such as the exa ...

angulartypescript

Fixing the forwardRef issue with react-router-dom and material-ui

Despite implementing the forwardRef as recommended in various posts and Material-UI website examples, I am still encountering a warning in the console that has me puzzled. I am working on setting up a drawer with a list of items that are React Router link ...

reactjstypescriptreact-routermaterial-uireact-forwardref

Using NextJS: Issue with updating Value in useState

In my current project, I am attempting to display a string that changes when a button is pressed in my NextJs application. Here's the code snippet I am working with: 'use client' import { useState } from 'react' export default fu ...

typescriptnext.jsreact-hooks

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Trying to decipher a poorly formatted JSON response from a remote server that looks something like this: //[ {},{} ] In my AngularJS code: $http.get('http://www.example.com/badjson') .success(function(data) { console.log(data); }) ...

javascriptjqueryajaxjsonangularjs

Troubleshooting problem with Materialize CSS in UI router

Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...

javascriptangularjshtmlangular-ui-routermaterialize

What is the process of creating a MaterialUI checkbox named "Badge"?

Badge API at https://material-ui.com/api/badge/ includes a prop called component that accepts either a string for a DOM element or a component. In my code: <Badge color="primary" classes={{ badge: classes.badge }} component="checkbox"> <Avatar ...

javascriptreactjsmaterial-ui

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

javascriptcssreactjsreact-select

Display an empty string when a value is NULL using jQuery's .append() function

To set an HTML value using the .append() function, I need to include AJAX data values. If the data set contains a null value, it will show as 'null' in the UI. I want to remove that 'null' and display it as blank. However, I can't ...

javascripthtmljqueryajax

Removing a selected row from a data table using an HTTP request in Angular 2

I am working with a table that has data retrieved from the server. I need to delete a row by selecting the checkboxes and then clicking the delete button to remove it. Here is the code snippet: ...

javascriptangularjsangular

The response from the ajax call is still pending

I am currently working on integrating MySQL data (select query) using Spring and MyBatis. I have a controller function that is called via ajax in JavaScript to retrieve the database data. For example: ajax url: /testmysql controller requestmapp ...

javascriptajaxspringmodel-view-controllermybatis

Verify the presence of a GET parameter in the URL

Working on a simple log in form for my website using Jade and ExpressJS. Everything is functioning correctly, except for one issue - handling incorrect log in details. When users input wrong information, they are redirected back to the log in page with a p ...

javascriptnode.jsexpresspug

Loading identical code in two different div elements

I am in the process of designing a comprehensive resource database featuring a side-scrolling container. Once a user clicks on a thumbnail within the container, the contents of a corresponding div will fade in and display specific category content. Each di ...

javascriptjqueryhtmlcss

Asynchronous waterfall call in Node.js to call the method before

Is it possible to invoke a previous method within async.waterfall from a subsequent method? async.waterfall([ function (callback) { }, function (reservationStatus, callback) { }, function (reservationStatusList, f ...

javascriptnode.jsasynchronous

What is the best way to stream an app's data directly to a browser in real time?

My node application is currently able to read a stream from a Kafka producer and display it in real time using console.log. However, I would like to update my web application with the same real-time functionality. How can I achieve this? I typically start ...

javascriptnode.jsexpressapache-kafka

Checking for Click Events in React Components

Recently, I created a React component named HelpButton with the following structure: import helpLogo from '../Resources/helplogo.svg'; function HelpButton(props) { const [isOpen, setisOpen] = React.useState(false) function toggle() { ...

javascriptreactjsunit-testingjestjsreact-testing-library

Is there a way to access a specific tab index in Ionic 3.20 from a child page using a function call?

Imagine having a tabs page with 3 index pages. The first index page is the home page, the second is the products page, and the third is the cart page. When navigating from the home page to the search page, there is a button that you want to click in orde ...

angularjstypescriptangularjs-directiveionic3hybrid-mobile-app

When the child of li is clicked instead

Below is a list I have: <ul id="orderlist"> <li id="2"> <span class="pull-right value">Ready</span> <img src="" class="img-responsive"> Filet Mignon <small>2 servings</small> <small ...

javascriptcss

Exporting a function to another class using the default export is a common practice

I'm working with two classes, Orders.js and api.js. In api.js, I need to invoke a function called ShowAlertWithDelay. However, due to the existence of a default export named mapStateToProps, I am unable to declare another export. Below is the code sni ...

javascriptreactjsreact-nativereact-redux

Implementing universal design in Next.js 14

I'm encountering a problem while trying to use the style jsx global property in the latest version of Next.js. Previously, you would include it in the _app.js file, but since that file no longer exists, I assumed it should be added to the layout.tsx f ...

javascriptreactjsnext.jsglobal-variablesstyled-components

I encounter difficulties when retrieving data in Next.js

Within a Next.js project, there is code provided that retrieves data from an external API endpoint and then passes it as props to a component called Services. This Services component utilizes the received data to dynamically render different sections of th ...

javascriptreactjsnext.js