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

Stacking Different View in React-Native Failed

I am attempting to implement a page in react-native with a Map component on the botton, and I am also trying to put a overlapping scroll view on top of the Map view without influencing the functionality of it. However, I am having trouble making…
totalnoob
  • 7
  • 1
0
votes
0 answers

The moment my text got bigger, my image flows out of its container - React Native

enter image description here In my project I am building a Cart like component that will be rendered on the screen. Like the image given, the moment my text got larger, it pushes away my image and makes it overflow out of its parent container. I am…
Anxheloo
  • 15
  • 2
0
votes
0 answers

React native styles management incorporating theme, global styles, component specific styles with props, inline styles i.e. one solution for all

I am getting hard time in styles management in react native. BACKGROUND Before using react navigation useTheme(), I had defined my color scheme and global styles like this export const themeStyles = { primaryColor: 'blue', secondaryColor:…
artsnr
  • 952
  • 1
  • 10
  • 27
0
votes
0 answers

Using Properties In StyleSheet | React Native

I have a horizontal scrolling ListView of which I'd like to size the items based on the screens width. I believe I need to use; const { width } = useWindowDimensions(); but I'm unsure of how to use this inside my StyleSheet width console logs as…
David Henry
  • 1,972
  • 20
  • 43
0
votes
1 answer

React Native styling with multi language app using i18next

My problem is when I create a multi-language app in react native, for example, an app that can be in Arabic and English. when I want to style a component to change the direction when language is switched I always use this type of…
Youcef Bouchemat
  • 1
  • 1
  • 1
0
votes
0 answers

Text alignment issue with Image

I have been trying to align text with Image horizontally but it should start right below the image if text gets larger than 1 line. I've added view as parent container and gave below styles: footer: { flexDirection: 'row', alignItems:…
Ali Waqar
  • 13
  • 7
0
votes
0 answers

React native change ternary operator render to animation

So I use a ternary operator to open and close a simple sidebar. But I want to change it to a tiny animation where the sidebar grows from the left side of the screen. This is my code right now: {isExpanded ? …
JUNSKI
  • 17
  • 4
0
votes
0 answers

design layout which look similar in iOS and Android Typescript react native

I want to achieve below design. Where the space between the image, title, sometext and Button must be same and bottom must have bottom space for 16px fix in iOS and Android with Green box. Green box should fit everything. so spacing between image,…
IOSDev
  • 205
  • 2
  • 10
0
votes
1 answer

React Native for Web: Invariant Violation: "cursor" is not a valid style property

We are using React Native for Web so we do need to be able to modify the cursor if it is in the web but I imagine since there is no cursor on mobile this is an issue with React Native. How can we allow cursor for at least the web…
Ian
  • 1,746
  • 1
  • 15
  • 28
0
votes
1 answer

React Native: Invalid prop `transform` of type `string` supplied, expected an array

We are using the CSS style transform/translate parameters but this is invalid for React Native typescript. Invariant Violation: Invalid prop `transform` of type `string` supplied to `StyleSheet modalContent`, expected an array. StyleSheet…
Ian
  • 1,746
  • 1
  • 15
  • 28
0
votes
0 answers

Circular border disappears when one side is set to transparent

For context, I'm trying to make a progress circle following this article; essentially, I'm overlaying coloured semi-circles made from borders on top of a base circular border to represent progress. These semi-circle borders are theoretically made by…
that's crazy
  • 1
0
votes
0 answers

How to add padding to all child elements in React Native

I'm trying to add styling to child components of a React Native View. Since you cant use the > * selector in React Natives StyleSheet.create function how do you achieve this result? Here is the code of a form I want to style:
chackerian
  • 1,301
  • 2
  • 15
  • 29
0
votes
1 answer

View is not Displaying

i wanted to create a colored divider under the text but it does not show up on the screen and i don't know why I'm using expo with react native image the divider should appear under text return (
Khalil Mannai
  • 1
0
votes
0 answers

Possible to create React Native Stylesheet with custom style props?

I have a custom Text component which takes a custom style prop which is used to set the fontFamily by a loaded custom font. The purpose is to make sure the text font is only one of the loaded fonts. However, since the custom style prop is not…
aDevCalledAlex
  • 19
  • 2
0
votes
0 answers

How to create navigation like this with CSS/React Native?

I would like to create a navigation with CSS/styled components for React Native (so no all styling hacks and attributes will work) that looks simmmiliar to this one that the Google Tasks app uses, see this image. What I mean is mostly the floating…
user20788140
1 2 3
…
13 14