I am trying to change the color of disabled React-native-elements component TextInput. Default behaviour is to grey out everything but I would like to have solid black color of the text even if it's disabled. Has anybody tips of how to do it?
Same question as Don't grey out Disabled Input in React Native Elements but for TextInput component.
TextInput don't have a disabledInputStyle prop.
You can use editable. It won't grey out it.
<View style={styles.app}>
<TextInput
style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
value={"values"}
editable={false}
/>
</View>
Related
I have a problem with ScrollView in React-Natives. I've already looked for it in the react-native docs, but still unable to find it. Because of this I need to include an image since I don't even know how to call it.
Is it possible to change the "purple" color in this picture? How? And what is this "purple" thing called?
Here's my code to give a clue.
The ScrollView:
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
>
The styles
scrollContainer: {
marginTop: 20,
marginHorizontal: 10,
color: "#fff",
},
Thank you
This is the overScroll glow effect on android devices and can be disabled using the overScrollMode prop. You need to set it to never as follows.
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
overScrollMode="never"
>
I have created a little snack that showcases this prop. Notice that I have disabled this for the horizontal scrollview and enabled it for the vertical scrollview.
Changing the color is only possible by adding <item name="android:colorEdgeEffect">#E53644</item> to your styles.xml as discussed here, whereby #E53644 is the hexcode of the color of choice.
How Can I change the Color or style the Arrow inside the "rightcircle" Icon in React Native?
the default Color of the Arrow is White
https://icons.expo.fyi/AntDesign/rightcircle
The SVG of that icon is the filled part, that means the arrow is not white, is actually transparent, so you need to wrap the icon on a sized view and change the background color:
<View style={{
backgroundColor:"red",
width:24,
height:24,
borderRadius:12
}}>
<AntDesign style={{
}} name="rightcircle" size={24} color="black"/>
</View>
I'm working on react native project , I'm creating page with Text and TextInput , I want that the label's text disappear when I type in TextInput Field .
This is the code of the TextInput:
<TextInput
label="Classification"
keyboardType="default"
underlineColor="#009688"
blurOnSubmit={false}
// editable={false}
theme={{
colors: {primary: '#009688'},
}}
style={ThirdScreenStyle.Text}></TextInput>
This is the style ThirdScreenStyle.Text:
Text: {
backgroundColor: 'transparent',
marginBottom: 5,
marginLeft: 30,
width: 300,
fontSize: 11,
padding: 3,
},
I want that the label classification disappear , also I want to decrease the size of the TextInput's field.
Use onFocus props of TextInput to save in state. Use that state to selectively show or hide text/label
<Text>{focused&&"Classification"}</Text>
Where "focused" comes from state you modify from onFocus method.
There is no TextInput prop called "label", i think what you are looking for is "placeholder".
<TextInput
placeholder="Classification"
keyboardType="default"
underlineColor="#009688"
blurOnSubmit={false}
// editable={false}
theme={{
colors: {primary: '#009688'},
}}
style={ThirdScreenStyle.Text}/>
Otherwise your label should be in a seperate component and use #Yogesh's approach with onFocus.
I have problems with the transparency of a View in React Native Expo, within the View I have text but this is not seen on iphone devices and on androids the text is seen with transparency but it is not what I want.
Code:
<View style= {{paddingHorizontal:30, borderRadius:1, marginTop:5}}>
<View style={{alpha = 1.0, alignItems:'center', borderRadius:10, backgroundColor: 'white', alignContent:'center', paddingVertical:10}}>
<Text style={{fontSize:15, color:'white', fontWeight: 'bold'}}>Iniciar Sesión</Text>
</View>
</View>
What I want to do:
enter image description here
What i get:
enter image description here
The alpha on the style is applied to the entire view and as a result also causes the all child components to become transparent. You want to apply your alpha only to the background color of the parent view. In react-native you can achieve that by defining your backgroundcolor rgba format
Color documentation can be found
https://reactnative.dev/docs/colors
And here is an expo snack to demonstrate the behavior.
https://snack.expo.io/sl8VafHil
in html I can achieve this by
<span style="background-color:red">ketan</span>
but in react native how to implement this so that color will be applied to the text only.
If you want the background color to only encompass the text, you can use this:
<Text style={{backgroundColor: 'blue', alignSelf: 'flex-start'}}>
Ketan
</Text>
And just change alignSelf as needed, you need to set this property if you dont want the text to take the whole width of the container
In react native you can directly use "Text" component and apply "backgroundColor" style to it as follows:
<Text>
<Text style={{ backgroundColor: "red", color: "white" }}>color
</Text>
</Text>
In react native you have Text component to display text.
To set color of Text, you can use color property of it
<Text style={{color:'#ff0000'}}>Your Text</Text>
And for background color of that text, you can use View and than set backgroundColor of that View
you can't on IOS. set backgroundColor for extra View
<View style={{backgroundColor: 'red',flex:1}}><Text >ketan
</Text></View>
try this one:
<Text style={{backgroundColor:'red', color:'white'}}>{'Message'}</Text>
import { Text } from 'react-native';
<Text style={{backgroundColor: 'green'}}>
Ketan
</Text>
In order to put text in ReactNative, you need Text component. And you can apply backgroundColor onto style property.
Here's a snack as a demo to show usage and as playground for you to play around