How to set <Text> some text </Text> as upper case in react native?
<Text style={{}}> Test </Text>
Need to show that Test as TEST.
iOS textTransform support has been added to react-native in 0.56 version. Android textTransform support has been added in 0.59 version. It accepts one of these options:
none
uppercase
lowercase
capitalize
The actual iOS commit, Android commit and documentation
Example:
<View>
<Text style={{ textTransform: 'uppercase'}}>
This text should be uppercased.
</Text>
<Text style={{ textTransform: 'capitalize'}}>
Mixed:{' '}
<Text style={{ textTransform: 'lowercase'}}>
lowercase{' '}
</Text>
</Text>
</View>
#Cherniv Thanks for the answer
<Text style={{}}> {'Test'.toUpperCase()} </Text>
use text transform property in your style tag
textTransform:'uppercase'
React Native .toUpperCase() function works fine in a string but if you used the numbers or other non-string data types, it doesn't work. The error will have occurred.
Below Two are string properties:
<Text>{props.complexity.toUpperCase()}</Text>
<Text>{props.affordability.toUpperCase()}</Text>
use <Text style={{textTransform: 'uppercase'}}>Test
I am using "` `" and "${}" referenced to the variable, this is will turn it to the string, after that by using .toUppercase() function.
`${todo.title}`.toUppercase() }
For example:
import React from 'react';
const Todo = ({ todo }) => {
console.log("DEBUG:<components/todo.js>:",todo)
return (
<article className="Todo" style={{ backgroundColor: todo.completed ? 'aqua' : '#f9a1a1' }}>
<div className="Todo-info">
<h3>{ typeof todo.title === "string" && `${todo.title}`.toUpperCase() }</h3>
</div>
</article>
);
};
export default Todo;
There are 2 ways to make text to uppercase in React Native
1. use textTransform in styles of text to change the text in uppercase
e.g
<Text style={{ textTransform: 'uppercase'}}>
Some text
</Text>
textTransform may have following 4 possible value
none (default)
uppercase
lowercase
capitalize
2. you can also make text to upper or lower case by using Javascript's method i.e .toUpperCase() and .toLowerCase() to do so
e.g
<Text>{'Some text'.toUpperCase()}</Text>
Related
<View
style={{
flexDirection: "row",
}}
>
<Text
style={{
flex: 1,
}}
>
By continuing, you agree to our{" "}
<Pressable
onPress={...}
>
<Text>
Terms of Service
</Text>
</Pressable>
</Text>
</View>
"Terms of Service" is printed higher than "By continuing, you agree to our". How do I vertically align them?
Or more precisely - how do I get the Pressable Text to vertically align to the bottom?
This is a bug in React Native itself. There are several open reports of this bug on React Native's GitHub, but the chances of it being fixed don't look good:
https://github.com/facebook/react-native/issues/30375 - for the general problem of Views nested in Text being mis-aligned on Android, and a core contributor responded, but appeared to get derailed and stuck in some details specific to mimicking superscript and subscript.
https://github.com/facebook/react-native/issues/31955 - specific to Pressable and someone posted a PR to fix it, but Facebook closed it because no-one from Facebook got around to reviewing it before it became stale and out of date with the main branch.
There's also some discussion in this issue comment, but the issue got closed.
In React Native >= 0.65, if your inline pressable element uses only text styles, you can work around this issue by using <Text> with onPress (and onPressIn and onPressOut to style the pressed state). Crude example:
/**
* Like a simplified Pressable that doesn't look broken inline in `Text` on Android
*/
const TextButton = ({ children, onPress, style, ...rest } => {
const [pressed, setPressed] = useState(false)
const onPressIn = () => setPressed(true)
const onPressOut = () => setPressed(false)
return (
<Text
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
style={typeof style === 'function' ? style({ pressed }) : style}
{...rest}
>
{typeof children === 'function' ? children({ pressed }) : children}
</Text>
)
}
Beware, however, that there are also bugs around selecting interactive elements nested inside text using accessibility tools. If you can simply avoid nesting the interactive element in text, and have it on its own line, that's probably better: link-like interactive nested text isn't well supported in React Native currently.
On older versions of React Native before 0.65, Text didn't support onPressIn or onPressOut:
If you don't need Pressable's pressed state, use Text instead of Pressable (as the asker did: https://stackoverflow.com/a/66590787/568458)
If you do need pressed state, Text doesn't support the required onPressIn/Out handlers. However, TouchableWithoutFeedback does support those, and works by injecting props into its child so the Text will remain Text with no wrapping View. Wrap a Text in TouchableWithoutFeedback and pass the touchable onPress with onPressIn and onPressOut handlers and store the pressed state yourself.
/**
* Like a simplified Pressable that doesn't look broken inline in `Text` on Android
*/
const TextButton = ({ children, onPress, style, ...rest } => {
const [pressed, setPressed] = useState(false)
const onPressIn = () => setPressed(true)
const onPressOut = () => setPressed(false)
// TouchableWithoutFeedback modifies and returns its child; this returns `Text`
// plus press in/out events attached that aren't supported by Text directly.
return (
<TouchableWithoutFeedback
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
>
<Text
style={typeof style === 'function' ? style({ pressed }) : style}
{...rest}
>
{typeof children === 'function' ? children({ pressed }) : children}
</Text>
</TouchableWithoutFeedback>
)
}
Warning: if you're also using React Native Web and React Navigation, don't use the TouchableWithoutFeedback approach on Web, use pure Pressable on web, because React Navigation's navigate functions don't reliably work when passed to Touchable*s on Web due to a quirk of how the event handlers are set up (but they do work in Pressable), and this issue doesn't exist on Web.
Ended up doing this differently, using the onPress property of the <Text> component and finally wrapping all <Text> components in another <Text> component to have a proper line break:
<View>
<Text>
<Text>
By continuing, you agree to our{" "}
</Text>
<Text onPress={() => {...}}>
Terms of Service
</Text>
<Text>
{" "}and our{" "}
</Text>
<Text onPress={() => {...}}>
Privacy Policy
</Text>
</Text>
</View>
The snippet below should work but hard to understand without giving a shot. If you can provide screenshots I can help more in sake of getting a more proper result.
<View>
<Text style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}>
By continuing, you agree to our{" "}
<Pressable
onPress={() => {
navigate("LegalStack", { screen: "Terms" });
}}
>
<Text style={{margin: 'auto'}}>
Terms of Service
</Text>
</Pressable>
</Text>
</View>
I found a very hackidy-hack solution...
<Text selectable={true}>
<Text>if you click</Text>
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => Linking.openURL("https://www.google.com")}
>
<Text
style={{
alignSelf: 'flex-end',
marginBottom: -4,
}}
>
here
</Text>
</TouchableOpacity>
<Text>, it will open google</Text>
</Text>
By default the flexDirection is column. Change it to flexDirection:"row"
Please share samples in react native
text input with required asterisk symbol similar to material ui
enter image description here
Use react-native-paper
<TextInput
label='Password '
mode='outlined'
value={this.state.text}
onChangeText={password => this.setState({ password })}
underlineColor='transparent'
theme={...}
>
More detail Here
I have used "react-native-paper": "4.9.2" below code works fine in this version.
<TextInput
mode="flat"
label={
<Text>
Label
<Text style={{color: 'red'}}> *</Text>
</Text>
}
placeholder="Type something"
/>
Or, if you prefer, create a component for that:
import React from 'react';
import { Text } from 'react-native';
export default function InputLabel({ label, style={}, required=false }) {
return (
<Text style={style}>
{label}
{required && <Text style={{ color: 'red' }}> *</Text>}
</Text>
);
}
I know I'm just having a syntax issue, but here goes.
I'm building a weather app where the background image source changes based on weather conditions. My quotes and weather desc work, but having trouble setting the background image based on the same conditions.
const weatherCases = {
"clear sky": {
title: "clear sky",
background: "../assets/sunnyBackground.png",
quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}
return (
<ImageBackground source={weatherCases[weatherName].background} style={styles.forecastContainer}>
<View style={styles.forecastTopContainer}>
<View>
<Text style={styles.quoteText} >{weatherCases[weatherName]["quote" + randomQuoteNumber.toString()]}</Text>
</View>
</View>
<View style={styles.forecastBottomContainer}>
<View style={styles.forecastImageContainer}>
<Text>IMAGE</Text>
</View>
<View style={styles.forecastTempContainer}>
<Text>{city}</Text>
<Text>{temp}°</Text>
<Text>{weatherCases[weatherName].title}</Text>
<Text>{hum}% Humidity</Text>
</View>
</View>
</ImageBackground>
You can define a conditional variable which may be inside the json or state object and conditionally pass the source as follows.
<ImageBackground source={this.state.conditional?require('./assets/snack-icon.png'):null}>
Here is a expo link
You need to specifically require() every image resource that you will use. ImageBackground source prop expects the result of this require
const sunnyBg = require("../assets/sunnyBackground.png")
...
"clear sky": {
title: "clear sky",
background: sunnyBg,
quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}
import LadyInGrass from '../../../assets/images/lady_in_grass.jpg';
<ImageBackground
style={styles.imageStyle}
source={imageSource ?? LadyInGrass}>
</ImageBackground>
Is there a way in React Native to set the style for standard elements without adding a style tag to each and every one? Like for example I want to alter the style for these:
<Text>This is test</Text>
<Text>This is also text</Text>
<Text>And so is this</Text>
As I understand it the only way to say a margin indent is to do this:
<Text style={styles.indentText}>This is test</Text>
<Text style={styles.indentText}>This is also text</Text>
<Text style={styles.indentText}>And so is this</Text>
In ordinary website CSS you can obviously just set some styles for all HTML elements without needing to add a class or ID to them. How is it done in React Native?
You can set an abstraction layer just for it:
IndentedText = React.createClass({
render: () {
<Text style={styles.indentText}>{this.props.text}</Text>
}
})
And then in your other components:
<IndentedText text={"This is a text"} />
<IndentedText text={"This is also a text"} />
<IndentedText text={"And so is this"} />
I'm making an android app using react native and I've used TouchableOpacity component to create buttons.
I use a text input component to accept text from the user and the button should only be enabled once the text input matches a certain string.
I can think of a way to do this by initially rendering the button without the TouchableOpactiy wrapper and re-rendering with the wrapper once the input string matches.
But I'm guessing there is a much better way to do this. Can anyone help?
TouchableOpacity extends TouchableWithoutFeedback, so you can just use the disabled property :
<TouchableOpacity disabled={true}>
<Text>I'm disabled</Text>
</TouchableOpacity>
React Native TouchableWithoutFeedback #disabled documentation
The new Pressable API has a disabled option too :
<Pressable disabled={true}>
{({ pressed }) => (
<Text>I'm disabled</Text>
)}
</Pressable>
Just do this
<TouchableOpacity activeOpacity={disabled ? 1 : 0.7} onPress={!disabled && onPress}>
<View>
<Text>{text}</Text>
</View>
</TouchableOpacity>
this native-base there is solution:
<Button
block
disabled={!learnedWordsByUser.length}
style={{ marginTop: 10 }}
onPress={learnedWordsByUser.length && () => {
onFlipCardsGenerateNewWords(learnedWordsByUser)
onFlipCardsBtnPress()
}}
>
<Text>Let's Review</Text>
</Button>
So it is very easy to disable any button in react native
<TouchableOpacity disabled={true}>
<Text>
This is disabled button
</Text>
</TouchableOpacity>
disabled is a prop in react native and when you set its value to "true" it will disable your button
Happy Cooding
This seems like the kind of thing that could be solved using a Higher Order Component. I could be wrong though because I'm struggling to understand it 100% myself, but maybe it'll be helpful to you (here's a couple links)...
http://www.bennadel.com/blog/2888-experimenting-with-higher-order-components-in-reactjs.htm
http://jamesknelson.com/structuring-react-applications-higher-order-components/
TouchableOpacity receives activeOpacity. You can do something like this
<TouchableOpacity activeOpacity={enabled ? 0.5 : 1}>
</TouchableOpacity>
So if it's enabled, it will look normal, otherwise, it will look just like touchablewithoutfeedback.
To disable Text you have to set the opacity:0 in Text style like this:
<TouchableOpacity style={{opacity:0}}>
<Text>I'm disabled</Text>
</TouchableOpacity>
You can use the disabled prop in TouchableOpacity when your input does not match the string
<TouchableOpacity disabled = { stringMatched ? false : true }>
<Text>Some Text</Text>
</TouchableOpacity>
where stringMatched is a state.
You can build an CustButton with TouchableWithoutFeedback, and set the effect and logic you want with onPressIn, onPressout or other props.
I was able to fix this by putting a conditional in the style property.
const startQuizDisabled = () => props.deck.cards.length === 0;
<TouchableOpacity
style={startQuizDisabled() ? styles.androidStartQuizDisable : styles.androidStartQuiz}
onPress={startQuiz}
disabled={startQuizDisabled()}
>
<Text
style={styles.androidStartQuizBtn}
>Start Quiz</Text>
</TouchableOpacity>
const styles = StyleSheet.create({
androidStartQuiz: {
marginTop:25,
backgroundColor: "green",
padding: 10,
borderRadius: 5,
borderWidth: 1
},
androidStartQuizDisable: {
marginTop:25,
backgroundColor: "green",
padding: 10,
borderRadius: 5,
borderWidth: 1,
opacity: 0.4
},
androidStartQuizBtn: {
color: "white",
fontSize: 24
}
})
I think the most efficient way is to wrap the touchableOpacity with a view and add the prop pointerEvents with a style condition.
<View style={this.state.disabled && commonStyles.buttonDisabled}
pointerEvents={this.state.disabled ? "none" : "auto"}>
<TouchableOpacity
style={styles.connectButton}>
<Text style={styles.connectButtonText}">CONNECT </Text>
</TouchableOpacity>
</View>
CSS:
buttonDisabled: {
opacity: 0.7
}
Here's my work around for this I hope it helps :
<TouchableOpacity
onPress={() => {
this.onSubmit()
}}
disabled={this.state.validity}
style={this.state.validity ?
SignUpStyleSheet.inputStyle :
[SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}>
<Text style={SignUpStyleSheet.buttonsText}>Sign-Up</Text>
</TouchableOpacity>
in SignUpStyleSheet.inputStyle holds the style for the button when it disabled or not, then in style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]} I add the opacity property if the button is disabled.
You can enable and disable button or by using condition or directly by default it will be disable : true
// in calling function of button
handledisableenable()
{
// set the state for disabling or enabling the button
if(ifSomeConditionReturnsTrue)
{
this.setState({ Isbuttonenable : true })
}
else
{
this.setState({ Isbuttonenable : false})
}
}
<TouchableOpacity onPress ={this.handledisableenable} disabled=
{this.state.Isbuttonenable}>
<Text> Button </Text>
</TouchableOpacity>
Use disabled true property
<TouchableOpacity disabled={true}> </TouchableOpacity>
Here is the simplest solution ever:
You can add onPressOut event to the TouchableOpcaity
and do whatever you want to do.
It will not let user to press again until onPressOut is done