Anyone tell me how I make my button to lowercase in react native because I already get the answer in stack overflow but there is using touch opacity and that is the different component of button so I want the answer for button component
When I will type anything in under title props example
title='Hello'
[1]
[1]: https://i.stack.imgur.com/UmaBF.png
you can use TouchableOpacity for your button
like this:
<TouchableOpacity
onPress={() => onClick}
style={{}}>
<Text
style={{
fontSize: 20,
alignSelf: 'center',
}}>
Hello
</Text>
</TouchableOpacity>
Install react-native-paper and import Button from react-native-paper and make uppercase prop to false.
import { Button } from 'react-native-paper';
<Button
mode="contained"
uppercase={false}
onPress={() => console.log('Hello')}>
Hello
</Button>
From your question I just understood that you only need to convert the button text to lower case. For that just replace {title} with {title.toLowerCase()} and it will convert the titles text to lower case.
Related
In react-native project I have next button:
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon.Button
name='chevron-down'
backgroundColor='transparent'
color='#000000'
padding={0}
size={30}
onPress={() => setIsCollapsed(false)}
/>
Everything is fine except one thing - on button press for a fraction of a second, appears black square round the button element. How can I remove this styling element?
Wrap it inside TouchableOpacity and pass onPress method on touchable opacity's onPress props
Example :
<TouchableOpacity onPress={() => setIsCollapsed(false)} >
<Icon.Button
name='chevron-down'
backgroundColor='transparent'
color='#000000'
padding={0}
size={30}
/>
</TouchableOpacity>
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
I want to display a link button instead of button on my react native page. Right now I have the below code:
<Button onPress={this.handleGetDirections} title="Get Directions" />
I want to show the above button as a link. How can I achieve this in React Native.
Thank You.
Use textDecorationLine.
E.g :
<TouchableOpacity>
<Text style={styles.underLineText}>Your underline Text</Text>
</TouchableOpacity>
underLineText: {
fontSize: 12,
textDecorationLine: 'underline',
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
}
If it is about the styling of a link within the browser. That's done by the default browser vendor styles. You won't have that happen in react-native.
You can have a simple Text element that is styled to look like a link (ie: blue) and have a onPress handler for that.
Just follow Pritish Vaidyas... link :)
Hope this helps
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>