In React Native, I am trying to output a small blurb that generally takes up 2-3 lines of text. In this text, I want some parts to be bolded and pressable, and so I have come up with the following approach to separate the normal text and the special text:
<Text>
<Text style = {{fontSize:12}}>
{"Tried "}
</Text>
<Text style = {{fontSize:12}}>Beef and Shrimp Fried Noodle </Text>
<Text style = {{fontSize:12}}>{"for $10.25 at "}</Text>
<Text style = {{fontSize:12}}>JoyYee Restaurant</Text>
<Text style = {{fontSize:12}}>{" which is a 15 min walk from you"}</Text>
</Text>
I'm trying to alter the line-height of the 2-3 lines of text, but passing the lineHeight prop to the parent, or simply all of the children, has no effect. Is there a proper way of solving this? Or should I take a completely different approach to my text blurb?
To make the desired out come more clear: The text blurb should all be together, as such:
"Tried Beef and Shrimp Fried Noodle for $10.25 at JoyYee Restaurant which is a 15 min walk from you"
In order to keep the multiple text components in line, I had to wrap everything in a parent text; but now I am unable to control the line height of this small paragraph.
After much trial: The error lies in the fact that lineHeight is not a prop but is a style of the Text component. Therefore, the proper method was to write:
<Text style = {{lineHeight: 30}}>Hello etc. etc.</Text>
Hopefully this can help others avoid this issue as well!
Related
I want to use this code :
background: linear-gradient(306.57deg, #8C25DE 29.82%, #F36BFF 115.65%);
in react native with <LinearGradient />
how can i handle this ?
You could get close to the design by using the following configuration.
<LinearGradient
useAngle={true}
angle={306.57}
locations={[.29, 1.15]}
colors={['#F36BFF', '#8C25DE']}>
<Text style={{padding: 20}}></Text>
</LinearGradient>
useAngle and angle allows you to set the angle(in deg in Figma).
colors define the two colors. You can use more colors if needed.
location defines where each of the colors are in the gradient stops. This should be the same values that are defined in the percentages in the Figma CSS.
You can have a play around with the final output here: https://snack.expo.io/#nipuna777/gradients
Let's say in a TextInput element, I want to make a word green if it's formatted as #someonesusername the moment they finish writing the word (as opposed to after the text is submitted, in which case it's trivial to send the text to a normal Text component with subset styling. I thought of underlaying a Text component with absolute positioning and making the actual TextInput component invisible, but that seems it might be a headache to keep in sync, and cause usability challenges in the sense that the editing cursor wouldn't be there unless you wired together a custom cursor element to render and that'd be quite the headache for such a small thing I want to do.
So this the hack I came up with (Amazing question).
React native TextInput can take children as input. So why not split the value and add Text as children in the TextInput and add style the way you want to.
May be wondering how do get the text back? Well these children become string when comes to onChangeText callback and get a string back in your state.
For example:
// split the text like
const [firstPart, secondPart] = this.state.text.split("#");
const [higlighted , restText] = secondPart ? secondPart.split(' ') : [];
Then use them
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={this.onChangeText}
>
<Text style={styles.paragraph}>
<Text>{firstPart}</Text>
{higlighted && <Text style={{
color: 'blue'
}}>#{higlighted}</Text>}
{restText !== undefined && <Text> {restText}</Text>}
</Text>
</TextInput>
Umm, I accept this might be worse solution ever but this works :P
Full example:
https://snack.expo.io/#subkundu/react-native-styles-to-a-subset-of-the-text
I want to build a chat. In the view for the messages are the messages and the input field for the message. The Inputbox should be at the bottom and should use the height it needs. The height of the Inputbox can change if the user enters multi-line text. The msgs-View should fill the rest of the height (above). I don't want to position the Input absolute because the message's FlatList should be always in the "visible" area.
<View style={styles.wrapper}>
<View style={styles.msgs}>Messages (FlatList)</View>
<View style={styles.input}>Inputbox</View>
</View>
Don't give flex style to your input.
Give your wrapper and list a flex: 1 style. Wrapper will take up all the space in its parent (which I assume is the screen). And list will take all the space in wrapper. And input will sit in the bottom.
In React Native, is there a way to toggle visibility of an element?
For example:
<Text visibility={this.state.isVisible}>Visibility depends on state</Text>
this might be crude but it works.
under render
var visibletext = null;
if (this.state.isVisible) {
visibletext = (<Text>Visibility depends on state</Text>);
}
then, under return part
<View style={styles.container}>
{visibletext}
</View>
There are various ways to do this. See the Conditional Rendering guide at the React.js website, which explains different options.
One simple way is to use the && operator inline:
{this.state.isVisible &&
<Text>Something</Text>
}
Note that with the conditional rendering approach, if you have (for example) some views centered vertically, this views will suddenly move up or down when the text appears (to give room for the new view). Another approach that avoids this jump is to either change the text color or set the text to empty string:
// Change the text color
<Text style={this.state.isVisible ? {color: 'black'} : {color: 'white'}}>Something</Text>
// Set text to empty string
<Text>{this.state.isVisible ? "Something" : ""}</Text>
Changing the color of the text is the best way to make sure that the other views don't suddenly move when showing the text, given that the text is already occupying the layout space it needs.
I did not put any undefined variables in the view but it appear some Unknow tags,so I wonder what is Unknown there?
<View>
<View style={styles.row}>
<Text>{rowData.user.name}ยท {rowData.createdDate}</Text>
<Text>{rowData.title}</Text>
</View>
<View style={styles.separator} />
</View>
in chrome I seen between the View and Text there is a Unknown.
I wonder if this is due to text nodes in your code, specifically white space like tabs and newlines. Please see this issue from the react dev tools:
https://github.com/facebook/react-devtools/issues/44
There are several such issues on the devtools tracker, sometimes related to a lack of displayName on components but I don't see how that applies here.
Suggest opening an issue on the React Native Github tracker as I doubt this is expected. Someone on the RN team might be able to give us a better explanation.
Did you define Text and View?
At the top of your file you should have something like this,
ES6
var {
View,
Text,
} = React;
ES5
var View = React.View;
var Text = React.Text;