I am using this dropdown picker library from import DropDownPicker from 'react-native-dropdown-picker'; which kinda doesnt expand properly when inside View that has certain styles.
Here is some code:
<View style={styles.cellBox}>
<DropDownPicker
items={[
{ label: '5', value: 5 },
{ label: '10', value: 10 },
{ label: '20`', value: 20 },
{ label: '45`', value: 45 },
{ label: '57`', value: 57 },
]}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{ backgroundColor: '#fafafa' }}
onChangeItem={item => buyOfferStore.setBatchQuantityInTons(item.value)}
/>
</View>
Style has cellbox property that looks like:
cellBox: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: theme.colors.lightSilver,
backgroundColor: 'white',
padding: 10,
minHeight: 55,
marginTop: -1,
},
Output:
enter image description here
If I remove style from View element works fine. No idea why is it behaving so, I cannot remove the style from View element as I need to style the View element to look in certain way!
I do not think it is aproblem with the View element, you see you have a style of cellbox and you probabaly used it for the cell below as well and they have the same zIndex level. So any overlays won't be shown. You could try to create a special class for DropDownPicker View and give it an extra style of zIndex: 2,
Such as:
View style={styles.cellBox1}>
<DropDownPicker
...
cellBox1: {
...
zIndex: 2,
},
Related
I have a variable named riskIndex and it can take on values from (0-8). I want to use a progress bar to show the value of this variable. I already have a code for the progress bar and I am not sure how to connect the above-mentioned variable to the code. The existing solutions on the internet seem to implement an animated progress bar and I am not sure if I should be using it, as the variable I am using will not be updating its value. It will have a fixed value on every run. For instance, in this example, I have taken its value to be 4.
I want to show this value 4 as progress on the progress bar.
The code for the progress bar is as follows
import * as React from 'react';
import { Animated,Text, View, StyleSheet } from 'react-native';
import { useEffect, useState } from "react"
import LinearGradient from 'react-native-linear-gradient';
export default function Progressbar() {
let riskIndex=6;
return (
<View style={styles.container}>
<View style={styles.progressLabels}>
<Text style={styles.progressLabel}>Low</Text>
{/* <View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Amateur</Text> */}
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Moderate</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>High</Text>
</View>
<View style={styles.progressContainer}>
<LinearGradient colors={["rgb(15, 25, 75)", "rgb(90, 95, 160)"]} style={styles.progress}/>
<View style={styles.milestonesContainer}>
<View style={styles.milestone}/><View style={styles.milestone}/><View style={styles.milestone}/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
// paddingTop: Constants.statusBarHeight,
backgroundColor: '#132542',
padding: 8,
},
progressLabels: {
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
width: "100%",
marginBottom: 10,
},
progressLabel: {
fontSize: 12,
fontWeight: 'bold',
//fontFamily: "sans-serif",
width: "19%",
textAlign: "center",
color:'white',
flexWrap:'wrap'
},
progressContainer: {
position: "relative",
height: 100
},
progress: {
marginLeft: "5%",
marginTop: 5,
width: "90%",
height: 30,
// backgroundColor: "rgb(7, 14, 60)",
borderRadius: 15
},
milestonesContainer: {
marginLeft: "5%",
position: "absolute",
width: "100%",
display: "flex",
flexDirection: "row"
},
milestone: {
height: 40,
width: "30%",
//backgroundColor: "white",
borderColor: "rgb(7, 11, 55)",
borderLeftWidth: 1,
borderRightWidth: 1,
}
});
The output of this code looks like
Let's assume you have riskIndex value from 0-10, just to make math simply. Your style milestone is showing progress with white background. All this style needs is to pass percentage of width. I wrote you answer without testing so maybe few tweaks need to be done.
riskIndex_passed = 8;
riskPerc = 8 * 10; // from 0-10, 8 is 80% of 10
riskPerc = riskPerc.toString() + "%"; // convert to string and add % at end
<View style={styles.milestonesContainer}>
<View style={[styles.milestone, {width: riskPerc}]} />
</View>
in StyleSheet I removed width and uncommented backgroundColor
milestone: {
height: 40,
backgroundColor: "white",
borderColor: "rgb(7, 11, 55)",
borderLeftWidth: 1,
borderRightWidth: 1,
}
I'm using react native radio-buttons-react-native package I need to reset the value of the radio button whenever my isFocused is false or when I navigate to any other page. I can't use any other package because it's restricted
How can I solve this issue??
`
<RadioButtonRN
data={[{ label: "Lead" }, { label: "Client" }]}
selectedBtn={(e) => {
setRadioValue(e.label);
handleChange(e.label, "type", el.uniqueId, index);
}}
ref={radioBtnRef}
style={{
width: 70,
height: 50,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: -15,
}}
box={false}
circleSize={10}
activeColor={fontStyle.PRIMARY_COLOR}
deactiveColor={"#000000"}
textColor={"#000000"}
textStyle={{
fontSize: 11,
textAlign: "center",
fontFamily: fontStyle.FONT_FAMILY,
color: fontStyle.COLOR_BLACK,
fontWeight: "normal",
marginLeft: 10,
}}
initial={1}
/>
`
I'd use ref and try to recreate the obj whenever I navigate to other screen
function clearData() {
setRadioValue('');
setTodayPlanData([
{
uniqueId: uuid.v4(),
type: "",
id: "",
time: null,
reason: "",
},
]);
clientRef.current[0].reset();
reasonRef.current[0].reset();
}
CardItem receives the cardIsLocked prop, which changes frequently and depends on user actions.
TouchableOpacity, that affected by this prop, reflects all app state correctly all the time. I can or can't press on it accordingly to my expectations. That is why I know that its disabled prop re-renders well. But prop style of top View component - doesn't.
So, all interaction works as demanded but styles not re-renders. How could this difference be possible during usage of the same prop cardIsLocked?
Thanks for ideas.
const CardItem = (props) => {
const card = props.card;
const cardIsLocked = props.cardIsLocked;
const handler = props.handler.bind(this, { card });
return (
<View style={cardIsLocked // <-- not causes re-renders
? styles.cardLocked
: styles.cardActive}>
<TouchableOpacity
disabled={cardIsLocked} // <-- causes re-renders
style={styles.innerCardSpace}
onPress={handler}
>
<View style={styles.card}>
<Text style={styles.text}>{card.cardName}</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CardItem;
const styles = StyleSheet.create({
cardActive: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#00ee00",
},
cardLocked: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#black",
},
innerCardSpace: {
flex: 1,
justifyContent: "center",
alignContent: "center",
flexDirection: "column",
margin: 1,
},
card: {
height: 26,
width: 46,
alignItems: "center",
backgroundColor: "#white",
},
text: { fontWeight: "700", fontSize: 10 },
});
Just to formalize the answer.
The error is the # at the beginning of the color's name.
The # must be used when declaring code RGB like #eeff00. For colors declared as names the # isn't necessary
So the re-rendering is occurring. But the problem is when any attribute of style has an unacceptable format, React doesn't apply it, and tries to keep the last identical attribute or will do nothing.
The code fixed
const styles = StyleSheet.create({
cardActive: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#00ee00",
},
cardLocked: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "black",
},
innerCardSpace: {
flex: 1,
justifyContent: "center",
alignContent: "center",
flexDirection: "column",
margin: 1,
},
card: {
height: 26,
width: 46,
alignItems: "center",
backgroundColor: "white",
},
text: { fontWeight: "700", fontSize: 10 },
});
Hi i'm new in REACT NATIVE, i have a in my react native app, with style of a card like the code below. first i want to split it into two horizontally parts with the ratio of( 3 for upper part and 2 for lower part). And second i want to write on each part.
I
import React from "react";
import {
Button,
StyleSheet,
Text,
View,
TouchableHighlight,
TouchableOpacity,
} from "react-native";
export default function App() {
return(
<View style={styles.card}>
<View style={styles.results}>
<Text style={styles.texty}>numbers</Text>
</View>
<View style={styles.calculations}>
<Text>numbers</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
card: {
flex: 1,
width: "80%",
height: 100,
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 5,
backgroundColor: "white",
padding: 100,
borderRadius: 15,
marginTop: 80,
margin: 42,
justifyContent: "center",
},
texty: {
fontSize: 30,
},
calculations: {
fontSize: 34,
},
results: {
flex: 6,
paddingTop: 25,
justifyContent: "center",
alignItems: "flex-end",
borderBottomWidth: 0.3,
borderBottomColor: "grey",
});
brought my code down there
Please use flex property to achieve this like:
card: { flex: 1 }
results: { flex: .6, flexWrap:'wrap'}
calculations: {flex:.4, flexWrap:'wrap'}
P.S:
You can add other styles as you like but don't use height property.
I am currently using:
react-native-responsive-screen package: "^1.4.2",
"react-native": "^0.64.0",
and I have the following problem:
One user claims that the UI layout does not fit the screen. He sent me the screenshot. (Attached)
size: 1080x2009
dpi: 420
I am using the package: react-native-responsive-screen in order to make the layout responsive.
It seems to work everywhere including an android emulator with the same screen characteristics like the device from the user. Same dpi, width & height.
Here is the code from my stylesheet Account.js:
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
container: {
flexDirection: "row",
flex: 1,
flexWrap: 'wrap',
alignItems: "center",
backgroundColor: "black"
},
menuContainer: {
flex: 1
},
onboardingWhole: {
justifyContent: 'center',
alignSelf: 'center',
marginTop: hp('20%'),
flex: 1,
alignItems: 'center',
padding: 10,
borderRadius: 5,
zIndex: 3,
elevation: 3,
position: 'absolute'
},
onboardingText: {
fontSize: hp('2%'),
marginTop: hp('1.5%'),
marginLeft: wp('5%'),
marginBottom: hp('1.5%'),
marginRight: wp('5%'),
color: "white",
textAlign: 'center',
fontFamily: "Anton-Regular"
},
onboardingTextHeadline: {
fontSize: hp('3%'),
marginTop: hp('1.5%'),
marginLeft: wp('5%'),
marginBottom: hp('1.5%'),
marginRight: wp('5%'),
color: orangeStyle,
textAlign: 'center',
fontFamily: "Anton-Regular"
},
cancelButtonOnboarding: {
justifyContent: 'center',
padding: 6,
width: wp('45%'),
margin: 5,
borderRadius: 5,
borderColor: redStyle,
borderWidth: 2,
height: hp('8%')
}
And my HTML:
<View style={styles.menu}>
<View style={styles.menuContainer}>
<View style={styles.onboardingWhole}><Text style={styles.onboardingTextHeadline}>WELCOME TO SAGLY! LETS IMPROVE YOUR SUSPENSION SETUP OF YOUR MTB. </Text><Text style={styles.onboardingText}>We would recommend to follow the following steps: </Text><Text style={styles.onboardingText}>1) Set up your profile so that SAGLY can make SMART SUGGESTIONS.</Text><Text style={styles.onboardingText}>2) Create a new setup. Optionally with the EASY SETUP GUIDE.</Text><Text style={styles.onboardingText}> 3) Inspect setups with MANAGE SETUPS and tune them with the WHAT SHOULD I DO WHEN ... guide.</Text><TouchableOpacity style={styles.submitButtonOnboarding} onPress={this.nextOnboardingView.bind(this)} title="next"><Text style={styles.buttonTextNext}>GOT IT!</Text></TouchableOpacity></View>
</View>
</View>
Is it bad practice what I doing here? Should I not use this package? Or am I doing smt wrong?
Thanks for your help!
To me this looks like the user has increased their OS font-size in the accessibility features. And since you are using relative font sizes (which is great, exactly for that reason) you might just want to wrap this screen inside a scroll view.