Stack Overflow
Stack Overflow

Questions tagged [react-native-stylesheet]

React Native Stylesheets provide styling capabilities similar to CSS stylesheets. Use this tag for questions about working with React Native Stylesheets or styling React Native code in general.

React Native Stylesheets provide styling capabilities similar to CSS stylesheets.

See https://reactnative.dev/docs/stylesheet.html for more info.

210 questions
0
votes
1 answer

How do I type a function inside the stylesheet in React Native CLI?

import { StyleSheet, TextStyle, ViewStyle, ImageStyle } from 'react-native'; export const styles = StyleSheet.create({ spacing: (marginBottom: number) => { return { marginBottom, } } }); The error returned…
NathanMoreira
  • 13
  • 3
0
votes
2 answers

How to achieve the desired UI in react native

I am trying to acheive a styling as shown in the image attached below See how here the fingerprint icon happens to be inside the border of the Textinput field but instead I am getting the output as shown below PS:- ignore the left and right side…
Ashutosh
  • 21
  • 1
0
votes
2 answers

How to make a React Native TextInput change Opacity just like TouchableOpacity?

My code looks something like this currently: I want to make a TextInput component that has an opacity animation on click (exactly like TouchableOpacity changes opacity on…
Eric Cherny
  • 35
  • 6
0
votes
2 answers

Display Checkboxes Horizontally

I imported some custom checkboxes but they're displaying vertically and I want them to be displayed horizontally in a row I tried changing the flex-direction and some other things but none of that has changed anything. Here is my code: import {…
Connor Broekhuizen
  • 1
0
votes
0 answers

React Native: Text not wrapping on web

on my mobile app, my text is wrapping as I would expect, but not on web. Here is an example of one of the rows in my table:
TreyCollier
  • 181
  • 1
  • 12
0
votes
1 answer

React Native Component Style

Hi I'm trying to build a chat item component but I'm having problems with the style I can't get it to work the way I want I would like the profile picture to be on the left but the text in the middle and the username on top where the time is on the…
backenddev
  • 43
  • 5
0
votes
1 answer

The style attribute for rendering iframe in React/Typescript JSX, is an object, but other attributes are strings. How to write the styles?

I'm trying to pass an iframe tag inside my JSX that is returned from the component. The allow="..." seems to work as a string, but style="...." gives a JSX error, expecting a mapping, not a string. return(
gwhiz
  • 135
  • 9
0
votes
2 answers

alignItems: 'center', not working on textInputs

I currently trying to make an app with react native and I have a problem with the styling. I have textInput in the same View as a button and I want to center them with alignItems: 'center' but it is not working for the text input : Here is my code…
owdji
  • 151
  • 2
  • 12
0
votes
0 answers

How to improve readability in Typescript and React iframed web app when looking at browser Elements tab with stylesheets

I have a large web app in Typescript and React, with the stylesheets as StyleSheet.create in each component. It is built with Babel and webpack. The app is embedded when deployed so I'm debugging while iframed. When looking at the Elements console,…
gwhiz
  • 135
  • 9
0
votes
1 answer

How to reposition image in ImageBackground React Native?

I have a big image that I'm using in the React Native ImageBackground component. function Component(){ return ; } The size is correct, but I would like to reposition the image…
sayandcode
  • 1,775
  • 1
  • 11
  • 24
0
votes
0 answers

paddingHorizontal: 0 not responding

Why is my paddingHorizontal not working in react native? I have used paddingHorizontal: 0 in the following code, But the buttons are not responding? Not sure what I'm doing wrong. import React from "react"; import { StyleSheet, TouchableOpacity,…
user16340489
  • 1
  • 1
0
votes
1 answer

CSS/React-Native StyleSheet - Rotate on custom axis

So I have a rectangle that is rotated on the z-axis at 45 degrees. My question is how do I flip this element on the 45-degree axis? I understand there is rotateY and rotateX but I can't seem to rotate on this 45-degree. I was hoping to find the…
Bobby Gagnon
  • 80
  • 2
  • 11
0
votes
0 answers

How do you style an overlap in react native?

I'm coding a website and I'm trying to overlap a line on the page so that it looks better on my site. This is what I'm trying to do: Mine looks like this: Can someone tell me how to style it to overlap? The code is: borderstyleone:{ …
sean froelich
  • 15
  • 6
0
votes
2 answers

How to create the attached UI(grid with different squares) in react native?

Here's the UI I want to create: How do I create the above UI in react native and have it scale on all devices? I tried using flexbox but I couldn't get the boxes to be squares. The code below is using fixed width and height in which I was thinking…
Sevenize
  • 1
  • 3
0
votes
1 answer

How to disallow StyleSheet creation in ESLint?

For certain folders I would like to enable StyleSheet.create() whereas for other folder I would like to disallow them. Now I figured out how to override ESLint rules per folder, but how do I disallow StyleSheet.create()?
Z0q
  • 1,689
  • 3
  • 28
  • 57
1 2 3
…
13 14