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
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.
In my ReactNative app, I'm using "SafeAreaView" to restrict my content in the visible area. My app runs in landscape mode. Look at the image
My app has FlatList with 2 Items rendered. If you notice the FlatList (in green color), on the left it has some padding of 20 pixels and on the right, it has notch (though it has padding of 20 pixels to the border). Due to notch on right my FlatList don't seem to be centered.
Is there a way to handle the content size considering the notch area?
try wrapping your Flatlists with an inner View between the Flatlists and the SafeAreaView and add the padding the inner View e.g
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1, padding: 24, justifyContent: 'center', alignItems: 'center'}}>
{/* your flatlists here */}
</View>
</SafeAreaView>
this should make it look more natural.
For iOS, you can use this package: https://www.npmjs.com/package/react-native-iphone-x-helper
getBottomSpace() and getStatusBarHeight()
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>
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
Here is the code:
<View
style={{transform: [{translateX: this.state.translateX}], width: '120%'}}>
<View style={{width: '20%'}}>{someText}</View>
<View style={{width: '80%'}}>{someText}</View>
<View style={{width: '20%'}}>{someText}</View>
</View>
this.state.translateX was respond to swipe gesture which worked fine, the first two View did move but the last View was not visible (or not moved?). I want to show the last View when this.state.translateX changed. But it seems not being properly rendered?
It is because Android does not render element which is off screen. Solution is place the element in screen with position: 'absolute' and then use translateX to hide it from screen.