<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>
Related
I have an old issue with scrolling some content inside TouchableOpacity (react-native). I've been trying to find any solution for months but nothing worked together with onPress/onPressIn/Out handlers. Any ideas?
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
<ScrollView>
{/* some content to be scrolled here */}
</ScrollView>
</TouchableOpacity>
use TouchableOpacity inside the Scrollview
<ScrollView>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
</ScrollView>
I am trying to make visible list of buttons on top of a multi-line text input, which is now working. But when i am clicking on one of these button nothing is happening.
I am using zIndex to bring the childComponent on top of TextInput, Now when i am clicking on these button TextInput is getting focus instead of triggering button click event.
I just started learning react-native so I am not able to understand where i need to make the changes for making it functional.
Sample Code structure given below:*
const Component_1=()=>{
const UpdateTextInput=(ip,callType)=>{
console.log(ip);
}
return (<View keyboardShouldPersistTaps={'handle'}>
<View style={{flexDirection:'row',backgroundColor:'#fff',zIndex:10}}>
<ChildComponent callBackFunc={(ip,callType)=>UpdateTextInput(ip,callType)} />
</View>
<View>
<TextInput
multiline
onChangeText={(text)=>updateString(text,'')}
/>
</View>
</View>
)
}
export default Component_1;
const ChildComponent=({callBackFunc})=>{
const [ButtonSection,SetButtonSection]=useState(false)
return (
<View style={{flexDirection:'row-reverse'}}>
<View style={{flexDirection:'column',width:'15%',position:'absolute'}} >
<TouchableOpacity onPress={()=>SetButtonSection(!ButtonSection)} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='arrow-drop-down'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:20,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
{ButtonSection==true
?<View style={{flexDirection:'column',position:'relative',backgroundColor:'#ccc'}}>
<TouchableOpacity onPress={()=>callBackFunc('','CLR')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='block'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','COPY')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='content-copy'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','SAVE')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='save'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<Button title='BTN' onPress={()=>console.log('Button1')
}/>
</View>
:null
}
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps={'handle'} style={{marginRight:50}}>
<Item/>
</ScrollView>
</View>
)
}
export default ChildComponent
Instead of using zIndex, use absolute position in view.
position: 'absolute'
Give absolute position to the view of child component
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
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>
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>