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
141
votes
8 answers

React Native - What is the benefit of using StyleSheet vs a plain object?

What exactly is the benefit of using StyleSheet.create() vs a plain object? const styles = StyleSheet.create({ container: { flex: 1 } } Vs. const styles = { container: { flex: 1 } }
corasan
  • 2,636
  • 3
  • 24
  • 41
81
votes
4 answers

What is the point of StyleSheet.create

I'm reading the React Native docs / tutorial, and I'm wondering what the point of the StyleSheet.create function is. For example, the tutorial has the following code: const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight:…
Steven L.
  • 2,045
  • 3
  • 18
  • 23
11
votes
5 answers

create a curved bottom navigation (before after implementation)

How can I achieve this in react native? So far I have this and I want to implement the middle curve. I don't know to either handle it with a transparent view or switch to SVG completely and this the tabBar component /* eslint-disable…
Alireza tk
  • 468
  • 1
  • 7
  • 25
7
votes
0 answers

How to Adjust Background Position in ImageBackground Component (React Native)?

I have an image like this as an asset seats.png (180 x 36 px) each "seat" is a 36x36 px image: My code: …
DennyHiu
  • 4,861
  • 8
  • 48
  • 80
6
votes
2 answers

React-Native FlatList with 3 cards paging layout

In this snack I am trying to have 3 cards in the center of the screen with a horizontal FlatList and enabled paging to jump to the next 3 cards on scroll. But the layout starts getting destroyed after scrolling and some pixels of the next/previous…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
6
votes
1 answer

React-Native: Mask image with a bottom radius

How do I make the border bottom radius in an image? And how can I mask the image to the green area? I've tried the following codes, but I can't get the radius ratio in the image I've shared above View Code:
FurkanG.
  • 63
  • 1
  • 5
5
votes
2 answers

react-native : How to remove vertical spacing in

In react native default when I use some large fontsize I got vertical spacing. I tried lineHeight but after giving exact lineHeight equals to fontSize it just remove spacing from top not from bottom. I have added the border to see the diff.
Afzal Ali
  • 880
  • 8
  • 25
5
votes
2 answers

Can't format Quran page in react native

I am making an app to read Quran, using react native (expo). I am having some problems formatting the text. Problems: Random spacing Text resize automatically Text aligns on the left side at the end. Here is my code: function Read(){ return ( …
Anas Ikhlas
  • 75
  • 11
4
votes
2 answers

How to solve ViewStyle typescript error in react native?

I'm trying to pass width parameter into StyleSheet like this : {children} And use it like this : const styles = StyleSheet.create({ modalContent: { flex: 1, justifyContent: 'center', …
Mehdi Faraji
  • 2,574
  • 8
  • 28
  • 76
4
votes
2 answers

How to create a circular slider with breakpoints?

I am new to react-native and i want to achieve the below design in react-native The blue circle is a slider to chose the date(Date Picker) The circle inside the slider(Date Picker) changes color when the date is changed and finally an image…
Rizwan Veanka Software
  • 43
  • 4
4
votes
2 answers

How to inherit style within StyleSheet.create in React Native (using destructuring syntax maybe)

I want to reuse styles within StyleSheet.create's parameter object, how to do that? See the code: const styles = StyleSheet.create({ style1: { color: "red", backgroundColor: "white" }, style2: { width: 100, ...style1 …
Loi Nguyen Huynh
  • 8,492
  • 2
  • 29
  • 52
4
votes
2 answers

react-native: components with zIndex in flatlist does not seem to work

The main render: render() { return ( } ... ); container styled via absolute position: export const…
Ali
  • 1,127
  • 1
  • 10
  • 23
4
votes
1 answer

Default OS style in React Native

I'm starting with React Native and I'm wondering if is possible to apply the default OS style for each element so I have not the need to handle every element style so imagine I have a form and simple text list, for the iOS app it should have iOS…
jesugmz
  • 2,320
  • 2
  • 18
  • 33
4
votes
2 answers

React Native. How to place two Text with different fontSize in row with vertical align center

I need to align two Text component with different fontSize in a row and vertically centered. I have following now https://snack.expo.io/@troublediehard/dmVuZ2 export default class App extends React.Component { render() { return (
Dima Portenko
  • 3,443
  • 5
  • 35
  • 48
4
votes
1 answer

Download Fonts at runtime in React Native

I want to download fonts at runtime and apply all across the app. There is one approach which where we can carry ttf files in font folder. But that will increase the size of the bundle.
Ankit Aman
  • 999
  • 6
  • 15
1
2 3
…
13 14