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
1
vote
1 answer

How I can I layout buttons in react native?

This is the result that I hope.enter image description here enter image description here Here's my code import React from 'react'; import {View, Text, SafeAreaView, Button, StyleSheet} from 'react-native'; import { useNavigation } from…
김소흥
  • 11
  • 2
1
vote
4 answers

react native paper : i want to change button's color when i press react native paper's button

While my react-native-paper button is pressed, the background color turns violet. I want to change this 'violet color' to anything to suit the situation. I change button's text color easily and rejoicingly with docs. However, I read the docs of…
nayounsang
  • 83
  • 1
  • 6
1
vote
1 answer

Converting css style to React Native stylesheet

I'm currently using stylesheet for my style in react-native. I found a css style that I need for my component unfortunately it has an :after and :before in css. How to use :after and :before in stylesheet in react-native. Here's the sample css code…
Adrian Alejo
  • 91
  • 10
1
vote
2 answers

When stickyHeaderIndices is used, style of component changes

I've searched common problems and how to use stickyHeaderIndices and so on. But stuck with one point, and I didn't even find why this occurs, so couldn't search on the internet. Everything works fine on web, but not on my phone when I use sticky. My…
ExDet
  • 158
  • 11
1
vote
3 answers

Using a function on stylesheet typescript react native

I try to use some variables inside my StyleSheet file. The UI is working fine. But the type is error. Any idea how to solve this? type buttonStyle = (height: number, width: string, color: string) => ViewStyle; export type Styles = { button:…
Ganda Rain Panjaitan
  • 833
  • 1
  • 12
  • 28
1
vote
0 answers

React native & StyleSheets - Element is not so smooth with transform selector

How to make it more smooth. I can see that the line border is visible pixeled. const styles = StyleSheet.create({ headerShape: { height: 30, width: Dimensions.get('window').width, backgroundColor: '#114FD4', transform: [{skewY:…
AKK
  • 136
  • 2
  • 5
1
vote
2 answers

useWindowDimensions use in stylesheet react native

How to use useWindowDimensions in Stylesheet. It always works only inside the function. I want to get screen height and width using useWindowDimensions inside the stylesheet in react native.
Anushka Praveen
  • 109
  • 2
  • 13
1
vote
0 answers

Google fonts - Inter(font family) not supported when used as external style in react native

Google- Inter(font family) not supported when used as external styles my code assets/fonts file : InterBold:{ fontFamily:'Inter-Bold'}, InterSemiBold:{ fontFamily:'Inter-SemiBold'}, InterRegular:{ fontFamily:'Inter-Regular'}, InterMedium:{…
Niraimathi
  • 11
  • 2
1
vote
1 answer

how to keep the style if disable objects in react native?

I am trying to structure my problem: What am I working on: I am trying to do a an opening hours view in react-native (typescript) where you can turn the weekdays on and off. And for the days where it is on you can set the opening hours via time…
kamo
  • 23
  • 3
1
vote
0 answers

change height between month react native Calendar

I'm inserting a calendar on my project, but I'm trying to reduce the space between months, but I can't find where to change Where I want to change Here is the code
Daniel Döbereiner
  • 47
  • 5
1
vote
0 answers

How to make a 3x3 grid of components with a specified width/height across all devices?

I am trying to make a 3x3 grid of components that have a specified height/width that will always be a 3x3 across all devices/screen sizes. The only way I've achieved this is so far is by setting width: '33%' on the child elements. However, this…
pfinferno
  • 1,779
  • 3
  • 34
  • 62
1
vote
3 answers

Ternary Operator React Native in StyleSheet

Is there a way to use the Ternary Operator in the StyleSheet? Currently, my TextInput looks as such: .tsx
Daniel Danielecki
  • 8,508
  • 6
  • 68
  • 94
1
vote
1 answer

Elevation doesn't work properly react native

I am trying to give shadow to my custom card component but the shadow cuts down the view like this: Here is my code import React from 'react' import { View, StyleSheet, Text, Image, Dimensions } from 'react-native' const { width } =…
Ibtsam Ch
  • 383
  • 1
  • 8
  • 22
1
vote
0 answers

Text Align justify is not working properly with Arabic characters in iOS

I wanted to render some Arabic content. When the text is justified ( textAlign:'justify' ), the Arabic text is getting hidden both in android and ios. In iOS, the symbols are wrongly aligned when justified using textAlign:'justify' (Check the below…
sumina abdulla
  • 31
  • 3
1
vote
4 answers

how to make background blur when modal open ups in reactnative

import React from 'react' import { View, StyleSheet, Text, TouchableOpacity, Modal } from 'react-native' const ModalContent = ({ visiblity, toggleModal }) => { return (
Rutvik Prajapati
  • 188
  • 1
  • 3
  • 11
1 2 3
…
13 14