I have a Sign In button that has an opacity of 50% normally but when you enter text in both the username and password or you click the Sign In button it is supposed to have an opacity of 100% (no transparency left at all). However, when the button is clicked it changes the background color but the opacity remains at 50%. Does anyone know why the opacity is not getting updated?
let readyForSignIn = this.state.email && this.state.password ? true : false;
let updateButton = this.state.loggingIn || readyForSignIn;
<TouchableOpacity style={[styles.buttonContainer, updateButton ? styles.buttonActive : styles.buttonDefault]} onPress={() => this.onSubmitEmail()}>
{this.state.loggingIn ?
<Text style={[styles.buttonText, {color: '#000'}]}>
Signing you in...
</Text>
:
<Text style={[styles.buttonText, {color: '#fff'}]}>
Sign In
</Text>
}
</TouchableOpacity>
and here are the styles for the button:
buttonContainer: {
marginTop: 20,
backgroundColor: '#3A3A3A',
paddingVertical: 16,
borderRadius: 3,
shadowOpacity: 0.35,
shadowColor: '#000',
shadowOffset: {widget: 0, height: 2},
shadowOpacity: 2
},
buttonDefault: {
opacity: 0.5
},
buttonActive: {
backgroundColor: '#fce443',
opacity: 1
},
I made a video of the issue as well:
https://www.youtube.com/watch?v=mp1fXVyHxoY&feature=youtu.be
Inline-style does not guarantee the order in which styles are applied (e.g. can be alphabetically order). So you should use the most specific style names you can.
For background opacity, use this instead:
buttonDefault: {
backgroundColor: rgba(58, 58, 58, 0.5);
},
buttonActive: {
backgroundColor: rgba(252, 228, 67, 1);
},
Related
I have an issue with the text of the TabBar that is not written on same line like shown in the photo. On small screen (Iphone 12) it works perfectly but when i changed to big screen of (Ipad 12.9 inch) How can i prevent that?
I have my code:
<Tab.Screen
name="Shop"
component={ShopNavigator}
options={(navigation, route) => ({
title: 'Shop',
tabBarVisible: false,
tabBarIcon: ({ props, focused }) => (
<View {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={SHOP} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Vente en ligne</Text>
</View>
</View>
)
})}
/>
imgSize: {
height: 30,
width: 30,
padding: 15,
opacity: 0.8,
},
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
}
Just give it more space:
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
width: "100%" //should take. 100% of the available space
}
I would also add the numberOfLines = 1 prop to the Text component to prevent incredibly small screens
Nothing works except returning empty function for renderLabel then having renderIcon display icon and text (placed side by side)
here is the code for more understanding
const renderTabBar = props => {
return <TabBar
{...props}
indicatorStyle={{ backgroundColor: 'grey' }}
style={{ backgroundColor: '#fff' }}
renderIcon={({ route, focused, color }) => {
return <Text style={{ color: '#000', margin: 8 }}><AntIcon
size={13}
name={route?.icon}
color={'#000'}
/>
{" "} {route.title}
</Text>}
}
renderLabel={({ route, focused, color }) => {}}
/>
}
I'm in need of applying a box shadow to one of my buttons in my react native application but box shadow property is not supported in android. So i'm trying to create a shadow view from LinearGradient and place the button at center of that view. Something like this
<LinearGradient
colors={['transparent', backgroundColor]}
start={{ x: 0.5, y: 0.5 }}
end={{ x: 1, y: 1 }}
style={{
width: '100%',
padding: 5,
height: 60,
justifyContent: 'center',
alignItems: 'flex-start',
marginTop: 0,
borderRadius: 2,
backgroundColor: 'transparent',
zIndex: 2,
bottom: 0,
}}>
<Pressable
onPress={onPress}
disabled={disabled}
style={({ pressed }) => [
{
borderWidth: state === 'primary_link' ? 0 : pressed ? 4 : borderWidth,
},
styles.background,
]}>
<ButtonTitle />
</Pressable>
</LinearGradient>
I tried changing the start and end values but could not get it to start from the center. Is there a way to do this using LinearGradient? I'm trying to get something like this
As the name implies, LinearGradient is for linear gradients only. What you described is a radial gradient. See this issue: https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/29
You may have box shadows as described here: Creating a UI with box shadow in react native
boxWithShadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}
I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
I want to use autoComplete input in react-native, the best option i found was
react-native-autocomplete-input, my problem is that i can't scroll my drop down list in IOS but in android i can.
I tried this solution and it's doesn't help :(
https://github.com/mrlaessig/react-native-autocomplete-input/issues/57#issuecomment-332723713
I checked a lot of suggestions and nothing doesn't help, i will be glad if someone that used it will help, thank you!
return (
<View style={styles.container}>
{showAddChar && (
<Text style={styles.addChar} onPress={this.onChoosenItem}>
+
</Text>
)}
<Autocomplete
data={data}
defaultValue={query}
onChangeText={(text: string) =>
this.setState({ query: text, hideResult: false })
}
keyExtractor={index => index['id'].toString()}
inputContainerStyle={styles.inputContainerStyle}
listContainerStyle={{}}
listStyle={styles.listStyle}
style={{ fontSize: 18 }}
hideResults={hideResult}
placeholder={placeholder}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.item}
onPress={() => this.onChoosenItem(item)}
>
<Text>{item['name']}</Text>
</TouchableOpacity>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
left: 0,
position: 'absolute',
right: 0,
top: 0
},
addChar: {
zIndex: 1,
position: 'absolute',
fontSize: 30,
right: 0,
top: 0
},
inputContainerStyle: {
borderColor: 'rgb(70, 48, 235)',
borderBottomWidth: 3,
borderTopWidth: 0,
borderRightWidth: 0,
borderLeftWidth: 0
},
// listContainerStyle: {height:filteredMembers.length * 70},
listStyle: {
borderColor: 'grey',
margin: 0,
overflow: 'scroll',
maxHeight: 200
},
item: {
fontSize: 16,
borderBottomColor: 'grey',
borderBottomWidth: 2,
padding: 12
}
});
enter image description here
I am using TextInput in my React Native app and the placeholder text does not align with the border underneath it. The placeholder text appears about 10 pixels indented away from the left side. Our UX does not like this and wants it to align exactly with the border underneath it. Basically, to start at the left without any indentation. I have researched this but have not being able to find anything out. Does anyone know how to fix this??
<View style={styles.emailInputBar}>
{this.state.showUsernameLabel &&
<Text style={styles.formLabel}>username</Text>
}
<TextInput
underlineColorAndroid="transparent"
style={styles.textInput}
placeholder="username"
placeholderTextColor="rgba(255,255,255,0.7)"
autoCorrect={false}
autoFocus={autoFocus}
returnKeyType={'next'}
autoCaptialize={'none'}
keyboardType={'email-address'}
enablesReturnKeyAutomatically={true}
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={(text) => this.handleUsernameChange(text)}
value={email}
/>
</View>
Here is the css:
passInputBar: {
display: 'flex',
flex: 1,
backgroundColor: 'transparent'
},
textInput: {
fontSize: 16,
color: 'white',
textAlign: 'left',
width: '100%',
flexDirection: 'row',
paddingHorizontal: 10,
borderBottomWidth: 2,
borderBottomColor: '#FCE443',
flex: 1,
paddingTop:Platform.OS === 'ios' ? 7 : 0,
paddingBottom:Platform.OS === 'ios' ? 7 : 0,
marginTop:Platform.OS === 'ios' ? 6 : 0,
marginBottom:Platform.OS === 'ios' ? 6 : 0
}
Remove
paddingHorizontal: 10,
from
textInput: {
[...]
}
Try this bro..
paddingVertical: 0
Some times there are default parameters, to delete "paddingHorizontal" can't be enough. You should set it to 0.
paddingHorizontal: 0