React Native get text of clicked text field - reactjs

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>

Related

How to make Chakra's <Text> component inline?

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!"

Display specific value in Flatlist React native

I am trying to diplay a specific value from the render method in flatlist but when i use {item.Name[0]} it shows me all the first letters from all the Name values but i want the whole first Name.
return (
<View style={styles.container}>
<FlatList
horizontal
data={this.state.data}
renderItem={({ item,index }) => (
<View style={styles.card_template} >
<View style={styles.text_container}>
<Text style={styles.card_title}>{item.Name[1]}</Text>
<Text style={styles.card_subtitle}>{item.Phone} </Text>
</View>
</View>
)}
/>
</View>
);
}
}```
After the alert on markerClick do this:
var temp = this.state.data.filter(x=> x.Name != marker.Name);
temp.unshift(marker);
this.setState({data:temp});
And on the renderitems just use item.Name
You are moving the selected marker to the first place in the array and selected item will be always on top
I think Problem is resolved if you following solution:
<Text style={styles.card_title}>{item.Name}</Text>
then try.

React Native Inline style for multiple Text in single Text With Touch effect

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

React Native - Display:'None' on nested Text element

<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>

react-native: multi color text view

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>

Resources