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
3
votes
1 answer

Styles from one custom React Native component remove styles from another custom component

So I created 2 custom React Native components and imported them to my App.js file, but it seems that the styles from the 1st component are interfering with the styles from 2nd component. Both of these 2 custom components have their own custom styles…
Nikitas IO
  • 696
  • 5
  • 20
3
votes
2 answers

React Native-Styling Tab Navigator

I want to add custom styles to my tab navigator. I have tried using the style:{} inside screenOptions but the styles don't work. Only the built in style props work. Here is my code: import React from "react"; import { createBottomTabNavigator } from…
Ibtsam Ch
  • 383
  • 1
  • 8
  • 22
3
votes
2 answers

Using variables inside react native stylesheets wont recognize the variable

I import a color as props.color into my functional component and set it as the state 'tagColor'. When I use tagColor as a value in my stylesheet to set the background color i receive the error 'variable tagColor not found' How can I use variables…
Matt Laszcz
  • 373
  • 3
  • 20
3
votes
0 answers

Add css to child video in react-native-video or expo-av

Using expo-av to create a video, I am trying to target the created video with css. I want to make the video height:100% of the container. But I don't know how to access the actual video, only the container. How can I target the child video of the…
Starfs
  • 412
  • 1
  • 5
  • 18
3
votes
1 answer

Using themes in style sheets

I am using react navigation's theme functionality to switch between dark and light mode and getting the colors for the mode with const { colors } = useTheme(); However I am trying to set colors in a stylesheet. How should I go about doing this. I…
bwees
  • 33
  • 4
3
votes
2 answers

How can I move the component which is based on below flatList to the bottom of the screen?

Everybody. I am going to make one screen (top: flatList, bottom: some component), but the component should be posited at the bottom of the screen. I tried several times like this, but I could not do that. I tired: bottom component style: …
goldvenus
  • 898
  • 1
  • 10
  • 21
3
votes
2 answers

React Native how to make border to the corner of the square only like QR code marker

I was trying to make a QR code marker like this pic below. So I'm wondering how to make those 4 corners instead of a full border marker. I was currently using react-native-qrcode-scanner. The default marker is like this: and here is the code that…
joyce
  • 165
  • 3
  • 12
3
votes
1 answer

RN: Align items in a row both left and right

Here is RN (0.59) component using sectionList to display an event name in a row. The renderItem renders 3 items in a row, starting with a head image (left image), then event name, ending with another head image (right image). render() { …
user938363
  • 9,990
  • 38
  • 137
  • 303
3
votes
1 answer

React Native -- how to horizontally center two Text components when expecting them to wrap to a second line?

This post is very close but I do have a different situation: How to Horizontally Center React Native Flexbox Text that Wraps across Multiple Lines I am trying to style my text like this: and in order to get the two different text styles to wrap to…
Bryan
  • 623
  • 1
  • 6
  • 23
3
votes
1 answer

React Native FlatList cuts Text at the bottom

I'm trying to make a search screen, I have a FlatList that fills all of the unused space in the screen and has a style which sets a padding to 10. I have hardcoded data for now just to test how it would look like when I scroll all the way down, the…
Dieguinho
  • 758
  • 2
  • 14
  • 31
2
votes
1 answer

How to give spacing between the content of view in react native?

I am new in react native,I have to view right and left container given flex-between them, now I have to give space in contents of left and right container also. image shown in the below diagram as well as styling code, const styles =…
Manish Kumar
  • 997
  • 2
  • 13
  • 30
2
votes
1 answer

TS Declaration for passing StyleSheet parameters

I'm trying to find a way to make TypeScript accept passing variables to StyleSheet Exemple: ... export default StyleSheet.create({ foo: (isVisible: boolean) => ({ opacity: isVisible ? 1 :…
tinmarfrutos
  • 1,740
  • 1
  • 14
  • 23
2
votes
0 answers

React Native Styles: Performance difference between multiple StyleSheet.create() vs. referencing an external object containing all styles

In a react native component, I have multiple variants for my button. Size, fill (solid, outline, transparent), and skin (primary, secondary, warning, info, etc.), among several other variants. Is there any performance difference between these three…
wongz
  • 3,255
  • 2
  • 28
  • 55
2
votes
1 answer

Overflow with border-radius does not work correctly in react-native

I have implemented the following but overflow: hidden does not work. border-radius should work as a wall. const App = () => { return (
Aazam Heidari
  • 447
  • 1
  • 5
  • 12
2
votes
1 answer

Bring a view on absolute position to front in react native

This is happening on with Android and on iOS it's working fine. I have a component that has a badge which I also custom-made. function HomeMenuCell({ title, imagePath, pressEvent, showBadge, badgeText }) { return (
Chaudhry Talha
  • 7,231
  • 11
  • 67
  • 116
1
2
3
…
13 14