Stack Overflow
Stack Overflow

Questions tagged [react-native-text]

39 questions
142
votes
5 answers

How do I make text bold, italic, or underline in React Native?

Surprisingly there isn't one question that groups these all together yet on Stack Overflow; there hasn't been an answer on SO for italics or underline, in fact, only this question for bold. I self-answered this question below.
James Ko
  • 32,215
  • 30
  • 128
  • 239
62
votes
12 answers

Is it possible to capitalize first letter of text/string in react native? How to do it?

I have to capitalize first letter of text that i want to display. I searched for it but i cant found clear thing to do that, also there is no such props for text in react native official documentation. I am showing my text with following…
Mayuresh Patil
  • 2,072
  • 1
  • 21
  • 44
48
votes
2 answers

Inline elements implementation

I want to create Text components and to display them in a row , like span elements in html. If i'm doing it this way: Start here, finish here line is broken between them and it looks like: Start…
Ivan Chernykh
  • 41,617
  • 13
  • 134
  • 146
34
votes
3 answers

Adding border only to the one side of the component in React Native (iOS)

I am facing something weird issue with React-Native's component in iOS. I wanted to apply borderBottomWidth style into component but it did NOT work. However, the borderWidth option worked. Worked …
Nirav Dangi
  • 3,607
  • 4
  • 49
  • 60
28
votes
3 answers

Setting a border for react native TextInput

Using React native 0.26, My component is something like this const Search = () => { return ( console.log(text)} placeholder={"Enter…
Sathyakumar Seshachalam
  • 2,013
  • 3
  • 20
  • 32
14
votes
7 answers

Nested Text, Vertical Align not working - React Native

Ok, Let's make this simple. I've two Text components, one inside another. The first Text has fontSize of 60, and the nested one has fontSize of 20. As the font size varies, the nested Text sits base aligned. I want the nested Text vertically center…
theapache64
  • 10,926
  • 9
  • 65
  • 108
8
votes
0 answers

How do I get to ellipses to display on a React Native element using numberOfLines that's being clipped on a line break?

In React Native, I have a element that is working properly, but not when the text gets clipped right before a line break. For example, in this screenshot, the first section is working fine, but in the second section, there…
Dan Leveille
  • 3,001
  • 2
  • 24
  • 28
7
votes
3 answers

Global "Text" color and "TextInput" text color

I've started to work with react-native few days ago and after some extensive search I weren't able to find answers for 2 (simple?) questions: How can I change the color of ALL Text components in react-native? What are the best practices? Creating…
Kuhbaar
  • 73
  • 1
  • 1
  • 6
6
votes
2 answers

React Native TextInput: why does secureEntryText shift outside of input box and have ellipsis?

I have TextInput components in my React Native app, and when I added secureEntryText: 'true' for the password input, I noticed two things: 1) As I'm typing the password, the left edge of the typed password shifts out and to the left of the input…
RNdev
  • 953
  • 1
  • 8
  • 26
5
votes
0 answers

How to test content of tag in Jest + Enzyme + React Native?

I want to unit test with Jest and Enzyme if my tag correctly receives props.header as text. Usually I was able to test the content of the tag like this: it("should render a label", () => { …
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
4
votes
0 answers

React Native onTextLayout method of Text component issue on iOS

I use onTextLayout method in order to count the number of lines rendered. It works perfectly on Android, but on iOS the lines array length is 1 or 2, never bigger than two even if the text is very long. Any ideas why?
Claudiu
  • 41
  • 1
4
votes
1 answer

React-native icon inline with text

Hi I want achieve the following style: But with the following code i get a the icon in separate column and the text in another It is a long established fact…
Dibakar Halder
  • 203
  • 3
  • 8
3
votes
2 answers

React Native: is it possible to adjust fontSize to make sure font fits in one line?

In my React Native app, I have items that on some phones overflow and take up two lines. Is it possible to adjust the fontSize dynamically to make sure the text fits in one line?
gkeenley
  • 6,088
  • 8
  • 54
  • 129
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
3
votes
1 answer

React Native TextInput and FlatList capturing onPress of ListItem

So I am trying to create an Autocomplete Search Box having 2 sibling views TextInput and FlatList (which is only displayed when this.state.data.length> 0) so my render function is given below : - renderItem = ({ item }) => { return ( …
aprofromindia
  • 1,111
  • 1
  • 13
  • 27
1
2 3