I want to render a single line of text with some words highlighted in a different color.
I would ideally do it with a span tag with react.
Wondering how would i do the same with react-native?
You can achieve this by using nested Text components
<Text style={{color: 'blue'}}>
I am blue
<Text style={{color: 'red'}}>
i am red
</Text>
and i am blue again
</Text>
Here's a link to the documentation explaining it better
Simply nest <Text> elements
<Text>
I am some text with
<Text style={{fontWeight: 'bold'}}>bold</Text>
stuff
<Text>
You can do it better, my way:
CText = (props) => <Text style={{color: props.color}}>{props.children}</Text>
inside render add:
const CText = this.CText
and return
<Text>I am <CText color={'red'}>Blue color</CText> and <CText color={'blue'}>Blue color</CText></Text>
Related
I can't figure our how to make the Chakra component inline. Read the documentation but couldn't figure out the right property or if this is a css class thing.
<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>
ChakraUI documentation on <Text> component explains that it renders a <p> tag by default.
But, you can swap it to work as a <span> tag, by giving <Text> the as prop. Like this:
<Text as="span"> Hello World, </Text>
<Text as="span"> place me next to the Text above! </Text>
You can use Flex for this
<Flex>
<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>
</Flex>
I found the <Stack> tag useful. You can stack items horizontally as well as vertically:
<Stack direction='row'>
<Text>Hello World, </Text>
<Text>place me next to the Text above!</Text>
</Stack>
Alternatively there is a tag called <HStack> that does the same thing:
<HStack>
<Text>Hello World, </Text>
<Text>place me next to the Text above!</Text>
</HStack>
This results in:
"Hello World, place me next to the Text above!"
I have a horizontal view:
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.bottomTextSignIn}>I'm already a member, </Text>
<Button
title="Sign In"
onPress={() => navigation.navigate("Login")}
/>
</View>
Im trying to make the the button look like the text, no styling, so it looks like its part of the sentence "I'm already a member, Sign In"
At the moment its a blue button next to the text. I tried changing the button colour to white which leaves a shadow around it. Is there a way to remove the styling for the button? or another way?
The button component is a "touchable/pressable" component with style. link
I think you are looking for pressable component.
<Pressable onPress={() => alert('hey')}>
<Text>I'm pressable!</Text>
</Pressable>
You can simply replace the button tag with and handle on onPress event on the text and different style to the text from the first one
I want to display link in some text and display output like following.
So i was done following code.
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<Text>This is non clockable text </Text>
<TouchableOpacity><Text style={{fontWeight:'bold'}}>this is clickable text link for fire onPress</Text></TouchableOpacity>
<Text> again</Text>
<Text> non clickable text</Text>
</View>
but it display output like following.
then after i use following code so it fullfill my output requirement but on click highlight effect not set.
<Text>
<Text>This is non clockable text </Text>
<Text style={{fontWeight:'bold'}} onPress={()=>{alert('alert')}}>this is clickable text link for fire onPress</Text>
<Text> again</Text>
<Text> non clickable text</Text>
</Text>
how to get my desired output with touch highlight effect?
for me it is working
<Text style={{ marginVertical: 20, }}>Your personal data will be used to process your order, support your experience
throughout this app and other purposes describe in
<Text style={{ color: 'blue' }}
onPress={() => { /*your on press event here */ }}
> privacy policy</Text>
</Text>
Issue solved after create custom Component
LinkText.js
import React, {Component} from 'react';
import {Text} from 'react-native';
class LinkText extends Component {
state = {
opacity:1.0,
isOnPressFire:false,
}
render() {
return (
<Text
style={{fontWeight:'bold', color:this.state.opacity==1.0?"#000000FF":"#00000088", opacity:this.state.opacity}}
suppressHighlighting={true}
onResponderGrant={()=>{
this.setState({opacity:0.5,isOnPressFire:true});
}}
onResponderRelease={()=>{
setTimeout(()=>{
this.setState({opacity:1.0,isOnPressFire:false});
}, 350);
}}
onResponderTerminate={()=>{
this.setState({opacity:1.0,isOnPressFire:false});
}}
onPress={()=>{
if(this.state.isOnPressFire) {
alert('Working Ok');
}
this.setState({opacity:1.0,isOnPressFire:false});
}}>
{this.props.data}
</Text>
)
}
}
export default LinkText;
Use:-
<Text>
<Text>This is non clockable text </Text>
<LinkText data={"this is clickable text link for fire onPress"}/>
<Text> again</Text>
<Text> non clickable text</Text>
<LinkText data={"again Clickable text"}/>
</Text>
Use react-native-styled-text
this library handles almost everything
<View >
<Text style={HomeStyles.homeSegmentText}>
{currentUser.badgeId}
<Text style={!(this.props.expiryAlert) && {display:'none'}} )>
<BlinkMe days={getDays()} />
</Text>
</Text>
</View>
In the above example I want the BlinkMe component to only ever display if expiryAlert is true - but the display:none is ignored in the nested text component regardless - does anyone have any ideas for a workaround?
Display property isn't supported for the Text component, you should have a look at it style's props.
As a workaround you can do the following:
<View>
<Text style={HomeStyles.homeSegmentText}>
{currentUser.badgeId}
{!(this.props.expiryAlert) &&
<Text>
<BlinkMe days={getDays()} />
</Text>
}
</Text>
</View>
i want to get the get the text of the clicked text field.
<Text style={styles.name}>
{item.author}
<Text style={styles.date}> {item.date}</Text>
<Text style={styles.category}> · {item.type}</Text>
</Text>
i want to return the text of the textfield, where {item.author} is the first child
Not sure exactly what you mean when you say you want to return the text...but you can get the item which contains all text values:
<TouchableWithoutFeedback onPress={() => this.doSomething(item)}>
<Text style={styles.name}>
{item.author}
<Text style={styles.date}> {item.date}</Text>
<Text style={styles.category}> · {item.type}</Text>
</Text>
</TouchableWithoutFeedback>