All Questions
Tagged with react-native css
1,920
questions
324
votes
28
answers
478k
views
React native text going off my screen, refusing to wrap. What to do?
The following code can be found in this live example
I've got the following react native element:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
...
- 22.5k
167
votes
22
answers
230k
views
Can I make dynamic styles in React Native?
Say I have a component with a render like this:
<View style={jewelStyle}></View>
Where jewelStyle =
{
borderRadius: 10,
backgroundColor: '#FFEFCC',
width: 20,
height: ...
- 2,756
136
votes
10
answers
264k
views
Make view 80% width of parent in React Native
I'm creating a form in React Native and would like to make my TextInputs 80% of the screen width.
With HTML and ordinary CSS, this would be straightforward:
input {
display: block;
width: 80%...
- 150k
134
votes
4
answers
199k
views
Does 'position: absolute' conflict with Flexbox?
I want to make a div stick on the top of the screen without any influence to other elements, and its child element in the center.
.parent {
display: flex;
justify-content: center;
...
- 3,819
122
votes
3
answers
227k
views
Absolute and Flexbox in React Native
I would like to put a white bar which would take all of the width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters.
With the ...
- 6,009
112
votes
6
answers
139k
views
Simulate display: inline in React Native
React Native doesn't support the CSS display property, and by default all elements use the behavior of display: flex (no inline-flex either). Most non-flex layouts can be simulated with flex ...
- 5,734
108
votes
14
answers
208k
views
Make an item stick to the bottom using flex in react-native
Suppose this is the layout:
<View style={styles.container}>
<View style={styles.titleWrapper}>
...
...
</View>
<View style={styles.inputWrapper}>
...
- 1,739
72
votes
5
answers
75k
views
How to add strike through on Text in react native?
Hey I want to add Strike Through in $10 amount for showing cut amount. Please check below :
<View style={styles.row}>
<View style={styles.inputWrapstotal}>
<Text style={...
- 1,752
71
votes
6
answers
168k
views
Creating a UI with box shadow in react native
I am trying to create a UI in react native, the UI contains a box with outer shadow. using the image I have done that, but is there any proper way to do that?
- 809
62
votes
9
answers
191k
views
How to create text border in React Native?
In React-Native, how do I add font borders to Text-components?
I've tried using border and shadow{Color, Radius, Opacity, Offset}, but haven't gotten that to work. Any suggestions?
- 1,471
61
votes
10
answers
180k
views
React-native: textAlign: 'right' not styling correctly
I'm quite new to react-native css-styling.. and have the following code:
<Text>
<Text style={(styles.author, { textAlign: "left" })}>
{question.view_count + " views\t" + question....
- 4,529
59
votes
4
answers
63k
views
What is the default unit of style in React Native?
I am contributing to an Open Source Project which I am developing a Material Design for React Native. I am blocked at work, and am unable to make some UI level enhancements w.r.t. padding, alignment, ...
- 12.5k
59
votes
5
answers
83k
views
React native styling. width: percentage - number
I want to do width: 100% - 50 so I can add an icon which is 50 wide on the right hand side of it.
I have got width: 100% - 20% working by using react-native-extended-styles but I don't see why that ...
- 12.1k
56
votes
13
answers
86k
views
React Native - how to use local SVG file (and color it)
I have some .svg icons locally that I'd like to use in my RN project.
An example is an .svg icon like this (opened in Chrome):
I'd like to display this file (as well as having control in specifying ...
- 4,206
54
votes
24
answers
117k
views
FlatList not scrolling
i have created a screen where I display a component that contains a FlatList. For some reason I can't scroll through the list. Someone who can spot my mistake and point me in the right direction?
...
- 613
53
votes
17
answers
88k
views
React Native: Different styles applied on orientation change
I'm developing a React Native application to be deployed as a native application on iOS and Android (and Windows, if possible).
The problem is that we want the layout to be different depending on ...
- 2,303
52
votes
3
answers
38k
views
Margin or Padding Shorthand in React Native
How to define margin/padding shorthand in React Native?
margin: 10px 20px;
- 11.9k
47
votes
3
answers
75k
views
Flexbox float right
I am looking for solutions on Flexbox layout best practice for a common use case.
In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:
position:...
- 40.3k
46
votes
2
answers
64k
views
Display: Inline Equivalent in React Native
It seems as though I am having problems with creating a display: inline styling equivalent with flexbox. So far I have achieved the following (where the red and blue lines are governed by the border ...
- 2,345
41
votes
5
answers
46k
views
Does it exist an equivalent of box-sizing: border-box in flexbox for React Native?
I would like the size of my boxes not to be changed by margin and padding.
- 1,001
32
votes
3
answers
38k
views
React Native font outline / textShadow
Is it possible to add an outline or textShadow to a font in react native to achieve something like this (white font with a black outline):
In CSS on the web its possible to add a text shadow or an ...
- 2,638
31
votes
13
answers
39k
views
31
votes
6
answers
34k
views
CSS Triangles in React Native no longer working
I'm working on an app that uses triangles that overlay other containers/divs. Had that solved with CSS before:
.triangle:after {
content: "";
display: block;
position: absolute;
top: ...
- 8,083
30
votes
8
answers
71k
views
How to draw dashed border style in react native
I am using below style, I am trying to draw dashed border style but it always coming solid . Please suggest .
<View style={{paddingLeft:10,
height:300, marginBottom:10,
borderWidth:1,
...
- 1,884
30
votes
9
answers
74k
views
React Native FlatList separator between columns
I have a FlatList with multiple columns:
<FlatList
numColumns={4}
ItemSeparatorComponent={this.renderSeparator}
...
</FlatList>
And a line separator:
...
- 5,156
29
votes
3
answers
28k
views
React Native Transform Origin
how do I apply the transform-origin property to a style in react native?
I've tried in several ways, but I did not get an event
I tried:
transform: [{ rotate: ('90deg')},{origin: {x: 'top', y:'...
- 420
28
votes
4
answers
78k
views
React-Native: Change opacity colour of ImageBackground
I have been trying to develop screen mentioned below:
For that I have created below component:
import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image} from '...
- 11.4k
28
votes
11
answers
152k
views
React Native - why padding does not work?
Why padding never works in React Native? I have 10px padding in the image and the text box below:
const styles = StyleSheet.create({
container: {
marginTop: 75,
alignItems: '...
- 56.5k
27
votes
2
answers
23k
views
React Native: "Auto" width for text node
I have a text element inside a view:
<View><Text>hello world foo bar</Text></View>
as part of a flex grid.
I want this view to have an auto width based on the content i.e. ...
- 5,815
27
votes
2
answers
26k
views
React Native border radius makes outline
I would like to make the circle view by using react-native.
Here what I did:
circle: {
position: 'absolute',
borderWidth: 10,
borderColor: '#fff',
top: 20,
left: 30,
width: ...
- 2,830
26
votes
3
answers
57k
views
React Native: How to set <TextInput/>'s height and width to <View/> container?
I currently have a <TextInput> inside a <View> that has a padding: 15. I would like for the <TextInput>'s width and height to cover all space inside <View> except the padding.
...
- 911
25
votes
7
answers
71k
views
Backgroundimage is not working in react
I am new to react and trying to get background image with inline styling. But it's not working.
Showing error "url is not defined"
render() {
return (
<div className="phase1"
...
- 1,239
25
votes
1
answer
16k
views
React Native: Setting the width of a view equal to its height when using percentages
I have this stylesheet, and I'm trying to make the width of this equal to the height when I set height as a percentage. I the following with no success:
art: {
height: "70%",
width: styles....
- 567
25
votes
2
answers
8k
views
How to float text around image in react native
I am trying to achieve a very common effect in react native of having text wrap around an image. On the web you would assign a float property to the image and follow it with a p tag. .
Here is a ...
- 2,129
24
votes
4
answers
43k
views
How to use vw and vh css with React Native
I'm creating a basic login using React Native with a logo and 2 inputs:
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
// ...
- 6,939
24
votes
8
answers
60k
views
How to style React Native <CheckBox> component?
Is it possible to style the React Native CheckBox component?
There is no style property listed here: https://facebook.github.io/react-native/docs/checkbox.html
I put an invalid style property on it, ...
- 16.7k
23
votes
4
answers
2k
views
StyleSheet.create "not covered by flow"
I am using flow 0.42.0 in a react native project with nuclide.
With the default project, I get the following message:
Along with the following errors:
> flow check
index.ios.js:40
40: ...
- 3,339
22
votes
2
answers
39k
views
CSS animation and transformation in react-native
Just wondering if we can use CSS animation and transformation in react-native?
i.e.
<Image style={animateImage} / >
StyleSheet.create({
animateImage {
width: 100px;
height: 100px;
...
- 905
21
votes
4
answers
70k
views
Set button in position "fixed" in React Native
I would like set button on the bottom right corner width fixed position in React Native.
position: fixed don't work in React Native and stickyHeaderIndices method in ScrollView does not allow to ...
- 3,510
21
votes
5
answers
85k
views
How Center Components Using Flex in React Native?
I'm with difficulties to centralize my components in screen using CSS.
See my App.js:
import { Container } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';
...
- 2,922
21
votes
2
answers
44k
views
React-Native: Margin with percentage value
I'm trying to use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute ...
- 231
21
votes
1
answer
2k
views
FontFamily React Native App overwrite with device custom font (Samsung & Oppo)
In React Native, I define font family for all text with Rubik font but for some devices (SAMSUNG & OPPO), the font looks like overwrite with a custom device font because that brand can choose a ...
- 611
20
votes
8
answers
56k
views
React Navigation: styling TabNavigator text
I am using React Navigation in a create-react-native-app.
I am using the TabNavigator component like this (iPhone SE):
The TabNavigator is the dark blue strip with 'Job #1', 'Chat', Files', 'Details....
- 4,153
19
votes
3
answers
35k
views
React native camera with a transparent view for barcode scanner mask
How to add a mask on top of the react-native-camera?
I'm building the UI for a React Native QRCode scanner app using react-native-camera.
The overlay mask on top of the camera should be in light ...
- 2,725
18
votes
4
answers
23k
views
How to find correct values for width, height and viewBox with react-native-svg
I have been trying to do something that seemed easy, but I have been trying for a few hours and I can't find the solution.
I have an SVG that needs to be on top of a screen. It came from the designer ...
- 1,344
18
votes
2
answers
29k
views
Align two elements next to / besides / inline with each other in <View/> react native
How would I align two items (icon/text) next to each other?
<TouchableOpacity
key = {index}
onPress = {() => this._onPress(key)}
style = {containerStyle.container}>
...
- 11.9k
17
votes
4
answers
17k
views
FlatList using 2 columns. I have an odd number of items to display. How do I get the last item to align left?
so I have a FlatList component that is rendering an odd number of items. The FlatList has 2 columns and I'm using 'space-around' for the column wrapper. This works fine when the number of items is ...
- 1,489
17
votes
5
answers
6k
views
How to render multi-line Text component with white gap between lines
I am trying to replicate the following in React Native, a Text component with a white gap between lines.
span {
background: rgba(255, 235, 0);
line-height: 1.5;
}
<span>Lorem ipsum ...
- 8,534
17
votes
1
answer
11k
views
How can I create strokeDasharray circular progress react native?
I tried to build the circular progress bar with dashed arrays by referring to (https://github.com/stssoftware/react-native-svg-circular-progress)
using below code
> <Circle cx={half} cy={...
- 672
16
votes
6
answers
10k
views
Long text pushing other elements off screen with react native
I'm trying to build a layout in React-Native using Flexbox and I'm having trouble when the text is long. I want the layout to look like this:
However, when the blue text gets long, it pushes the date ...
- 1,322