this works absolutely fine on android but not on IOS (not displaying value which user select from wheel picker). Check this Link.
https://drive.google.com/file/d/1y_ULGQuvPlzZj2V2zr1RAynrZKpme4Uc/view?usp=sharing
<Picker
style={{ width: 100, height: 80 }}
selectedValue={this.state.selectedHour}
itemStyle={{ color: "black", fontSize: 20 }}
onValueChange={index => this.onPickerHourSelect(index)}
>
{this.state.hourList.map((value, i) => (
<PickerItem label={value} value={i} key={"money" + value} />
))}
onPickerHourSelect(index) {
var hour = this.state.hourList[index];
this.setState({
selectedHour: hour,
}) }
Please suggest me another component or package of picker(Like Spinner Or Wheel Picker)
I've had the same problem! I solved it using selectedValue instead of selectedItem and passing the pickerItem's value.
This is my code:
<Picker style={{flex: 1, width: 150, height: 180}}
itemStyle={{color: 'black', fontSize: 26}}
selectedValue={this.state.minutes[this.state.indexSelected]}
onValueChange={(index) => {this.setState({indexSelected: index})}}>
{this.state.minutes.map((value, i) => (<PickerItem label={value} value={i} key={i}/>))}
</Picker>
Related
I want to customize this context menu rather than displaying default actions like copy, select all etc.
Here is my code snippet:
<TextInput
showSoftInputOnFocus={false}
multiline
value={text}
editable={false}
style={{
color: '#000',
maxWidth: Dimensions.get('screen').width / 1.25,
textAlign: 'center',
}}
onSelectionChange={(e) => {
let start = e.nativeEvent.selection.start;
let end = e.nativeEvent.selection.end;
setSelectedText(text.substring(start, end));
}}
/>
(Edit: I also tried putting overflow: 'visible' in various locations to no avail.)
I'm using a date for the x-axis tick labels so I would like them to be at an angle to prevent overlap. The issue is that they are not being cut off at the bottom, as seen here (the colors are there to show different component edges):
Here is my code:
<View style={{ backgroundColor: 'red', paddingBottom: 50 }}>
<VictoryChart
theme={chartTheme}
width={screenWidth - 10}
animate={{
onLoad: { duration: 100 },
duration: 500,
}}
containerComponent={<VictoryContainer style={{ backgroundColor: 'blue', paddingBottom: 50 }} />} >
<VictoryAxis
label={plotText.xLabel}
style={{ // adding padding here does nothing
tickLabels: { angle: -45, textAnchor: 'end' } // adding padding here does nothing
}}
tickValues={dispRSHistData.ticks}
tickFormat={(t) => getFormattedDate(t)}
/>
<VictoryAxis
dependentAxis
label={plotText.yLabel} />
<VictoryLine
data={dispRSHistData.data}
x="timestamp"
y="percentSuccess"
style={{ data: { stroke: "tomato" } }}
size={10} />
</VictoryChart>
</View>
I've tried setting various heights manually but nothing seems to give space to show the full tick labels.
I didnt find an automatic solution to your problem
but mannualy adding "padding" prop to the chart worked for me
btw this solution is for VictoryNative on react native but I guess something similar works on react.js version too
check the 'padding' prop here
<VictoryChart width={400} theme={VictoryTheme.material}
padding={{bottom:100,right:50,left:50}}
>
<VictoryAxis //the x axis
// axisLabelComponent={<VictoryLabel angle={-90}/>}
tickLabelComponent={<VictoryLabel angle={-90} dy={-7}
textAnchor='end'
// labelPlacement="perpendicular"
/>}
/>
<VictoryAxis dependentAxis //the y axis
/>
What I'm trying to do is the user to have the possibility to choose his contact(his contact list) and to save them.
The problem is when the user clicks the checkbox to chose the phone number, it delays 2-3 seconds.
After 2-3 seconds the checkbox is completed.
const onChangeValue = (item) => {
if (itemChecked.includes(item.phoneNumbers[0].digits)) {
itemChecked.splice(itemChecked.indexOf(item.phoneNumbers[0].digits), 1);
} else {
itemChecked.push(item.phoneNumbers[0].digits);
setCheckedBox(true);
}
setItemChecked(itemChecked);
console.log(itemChecked);
// console.log(item);
};
return(
<View>
{itemChecked.includes(item.phoneNumbers[0].digits) === false ? (
<CheckBox
style={{ width: 15, height: 15 }}
right={true}
checked={false}
onPress={() => {
onChangeValue(item, index);
}}
/>
) : (
<CheckBox
style={{ width: 15, height: 15, paddingTop: 8 }}
right={true}
checked={true}
onPress={() => {
onChangeValue(item, index);
}}
/>
)}
</View>
);
How can I solve the delay?
Did you try another ui library for checkbox?
If not, u can check React-Native-Elements and Native-Base
Displaying more than 200+ images in the flatlist and make the user to select or deselect by clicking an image. So, when the user is clicks a image, Need to show the check-circle icon on the image. Similarly, when the user is deselect the selected image, need to remove the icon. I got two arrays images[] and selectedImagesId[]. Whenever the user selects an image, the image id will be pushed into selectedImagesId array. By the way, Iam showing the icon if the rendered image id avaliable in the selectedImagesId. The problem here is, it takes so long to display or remove the icon.
<FlatList
data={props.images}
extraData={selectedImagesId}
initialNumToRender={10}
refreshing={true}
removeClippedSubviews={true}
maxToRenderPerBatch={1}
windowSize={7}
showsVerticalScrollIndicator={false}
numColumns={3}
keyExtractor={(item) => item.id.toString()}
renderItem={(itemData) => <RenderData itemData={itemData} />}
>
const RenderData = ({ itemData }) => (
<View>
<TouchableOpacity
activeOpacity={0.8}
style={{
width: width / 3.5,
height: height / 7,
padding: 2,
}}
onPress={() => {
console.log('pressed');
if (props.selectedImages.includes(itemData.item.uri)) {
const index = props.selectedImages.indexOf(itemData.item.uri);
if (index > -1) {
props.removeImageandId(index, itemData.item.id);
}
} else {
props.selectImageandId(itemData.item.uri, itemData.item.id);
}
}}>
<Image
style={{ width: '100%', height: '100%' }}
source={{
uri: itemData.item.uri,
}}
/>
{selectedImagesId.includes(itemData.item.id) && (
<AntDesign
name='checkcircle'
size={24}
color='white'
style={{ position: 'absolute', bottom: 5, right: 15 }}
/>
)}
</TouchableOpacity>
<Text style={{ backgroundColor: 'red', fontSize: 25 }}>
{render.current++}
</Text>
</View>
);
You can Refer This article
It will guide you on how to render Only particular selected components that change.
not the Whole flatList components.
so, that based Only selected particular component you can remove the icon. not whole flatList Re-render.
the problem is quite simple I think, but I can't seem to figure it out. I am using the react-native-router-flux library and the NativeBase library for the buttons.
This is my code:
<Button transparent onPress={Actions.MainOne } style={{ width: 50, height: 50 }} >
<Text>Option1</Text>
</Button>
<Button transparent onPress={Actions.MainTwo} style={{ width: 50, height: 50 }} >
<Text>Option2</Text>
</Button>
I want to change the background color of the button whenever i press it and it's active. And if I click another button, then the button I just pressed gets the background and the first button goes back to normal transparent background. I am not really sure how i can add two actions to the button. If anyone can assist I would appreciate it. I don't need to necessarily use the button library, so any ideas about this are welcome !
Thank you !
I use the flux-router to navigate through scenes. This is how I would change the background color of a button when pressed:
constructor() {
super();
state = {
color1: 'transparent',
color2: 'transparent',
}
}
setActive(button) {
if (button === 1) {
if (this.state.color1 === 'transparent') {
this.setState({
color1: 'red',
color2: 'transparent'
})
}
} else {
if (this.state.color2 === 'transparent') {
this.setState({
color2: 'red',
color1: 'transparent'
})
}
}
}
{ . . . }
<Button
onPress={this.setActive.bind(this, 1)}
style={{ width: 50, height: 50, backgroundColor: this.state.color1 }}
>
<Text>Option1</Text>
</Button>
<Button
this.setActive.bind(this, 2)
style={{ width: 50, height: 50, backgroundColor: this.state.color2 }}
>
<Text>Option2</Text>
</Button>