I'm trying to create a settings menu for a react native project I am working on, and for the majority of my UI I am using react native elements. One of the settings I need is a boolean value, so I want to use a switch in order to change that value. However I can not get the switch to even show up on the list item.
Here are my imports in my settings.js file:
import React from 'react';
import { Switch, Dimensions, StyleSheet, Text, View } from 'react-native';
import {ListItem, Input, Button } from 'react-native-elements';
When I try to create a a List Item with a switch, Like so:
<ListItem
switch
title="Active"
switched = {this.state.active}
/>
I get an error that says: "TypeError: IN this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant"
If I try to create a ListItem like this:
<ListItem
switchButton
title="Active"
switched = {this.state.active}
/>
The item shows up but there is no switch. What am I missing?
First i think there is no switch props in Lists.
Second if you need to display the switchButton you need to add the hideChevron prop as well.
Example:
<List>
<ListItem
switchButton
title=":( Where is my switch?"
onSwitch={e => console.warning(e)}
/>
<ListItem
switchButton
hideChevron
title=":) Here it is!"
onSwitch={() => {}}
/>
</List>
Related
Please i need help trying to get the value/state of each selected checkbox in my react native project.
What I'm trying to do actually is to click on a button that navigates to "SelectProducts" screen. then the screen shows a list of items to select using checkboxes. I put the checkbox I imported from expo in a loop like the following:
import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View, Alert, Image, ScrollView, TouchableOpacity } from 'react-native';
import {useNavigation} from '#react-navigation/native';
import Checkbox from 'expo-checkbox';
const SelectProducts = ({route}) => {
const navigation = useNavigation();
const [checkedBox, setCheckedBox] = useState([]);
const [itemList, setItemList] = useState([]);
{itemList.map((item, index) => (
<View key={item.id} style={styles.checkboxContainer}>
<Checkbox
value={checkedBox[index]}
onValueChange={() => {
let checkedBox = [];
checkedBox[index] = !checkedBox[index];
setCheckedBox(checkedBox);
// console.log(setCheckedBox(checkedBox));
}}
color={checkedBox ? '#800080' : undefined}
style={styles.checkbox}
/>
</View>
))}
}
export default SelectProducts;
The code above is just a part of the entire code in the "SelectProducts" screen where I'm having issues. Please let me know what I'm not during right here.
So, after selecting the checkboxes for the items I want to include when recording a sales order, the system should get the price, item name, and picture to send back to the previous screen in order to calculate the total sum, etc. when done with the item selection.
But the result I'm getting is very weird. There is now a list of items with checkboxes as expected, but once I select one of the checkboxes, then try to select another one, the previous checkbox will be unselected automatically for the current one to be selected. The checkbox selection is behaving exactly like normal radio buttons that only accept one input at a time. Meaning that my checkbox implementation isn't allowing multiple selections. This is the main challenge I'm facing at the moment.
I have even tried to print out the output of the value when selected but it's showing 'undefined'. I'm so confused here. I know this is simple to some of the developers here but I'm quite finding it hard to implement. It has already taken me some days now. Please help. Thanks!
PS: I'm currently using this guy's solution How to handle checkbox in loop react native . He used a class component implementation while I used a function component. But it's not working for me. Don't know why. Please kindly help me look into it.
This might help
itemList.map((item, index) => (
.....
<Checkbox
...
onValueChange={() => {
const newCheckedBox = [...checkedBox];
newCheckedBox[index] = !newCheckedBox[index];
setCheckedBox(newCheckedBox);
}}
...
/>
....
))
I am currently trying to make this "project" work.
demo img
https://codesandbox.io/s/flatlisttesting-eiw0x
Expected behaviour:
a) clicking on element of FlatList should change their state resulting in the CheckBox being checked
b) clicking the "Select All" TouchableOpacity should result in all of the items' checkboxes being checked and clicking the TouchableOpacity again afterwards should uncheck the checkboxes
Result:
a) works as intended
b) When I click on an element (checking the CheckBox) and then try pressing the TouchableOpacity, the CheckBoxes are indeed checked, but when I click on the TouchableOpacity again it only unchecks the CheckBoxes that weren't previously checked(checked->unchecked)
Could anyone possibly shed some light on this problem?
Thanks in advance
It is generally not a good idea to keep a separate state inside the component, and also use another external data source, for a single data source. Here, your only data source is your array. So for a better convention, the only source of your FlatList should be the data you pass. So if you remove the extra state operations inside the CustomItem component, it will work as expected:
import { TouchableOpacity, View, Text, CheckBox } from "react-native";
import { useState } from "react";
export default function CustomItem({
item,
flatListData,
setFlatListData
}) {
function handlePress() {
setFlatListData(
flatListData.map((element) => {
if (item.id === element.id) {
return { ...item, isDone: !item.isDone };
}
return element;
})
);
}
return (
<TouchableOpacity onPress={handlePress} style={{ flexDirection: "row" }}>
<Text style={{ marginRight: 10 }}>{item.text}</Text>
<CheckBox value={item.isDone} onPress={handlePress} />
<Text>{JSON.stringify(item)}</Text>
</TouchableOpacity>
);
}
By doing that, the CustomItem will only rely on the data source and not need extra conditional renderings inside itself.
However, I also have one suggestion. Currently your Select All button does not work like a select all, but rather works like a toggle button. I would suggest you to modify it, so that it will select all if all items are not selected, and only uncheck all if all items is selected. It's up to you of course but the name and function does not look consistent.
I am building a React application and I wanted to use the material-ui framework.
I build a component with a textfield and a button but I can`t click the textfield neither the button their blocked.
Here is the component code:
import React, { Component } from 'react';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
class Descarcare extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return(
<div>
<h1>Descarcare</h1>
<TextField id="standard-required" label="ID" InputProps={{
readOnly: false,
}}/>
<Button variant="contained" color="primary">
Trimite
</Button>
</div>
);
}
}
export default Descarcare;
The component appears in the browser but I can`t press the button it is blocked and so is the input field. I can not write anything in it. Can please someone help me ? Thanks in advance
You have to provide the onClick and onChange functions respectively.
It might be related to your other configs, You could have a reference to this example:
In React you got to control inputs see here as for the material-ui library buttons default to disable if no onClick is provided (if I recall correctly)
and text fields need value and onChange to react!
hope it is helpfull
I'm learning basics of react and currently im exploring certain problem statements available on the internet.
One such problem statement required me to create a react app for a text slide creator with previous , next and reset buttons. I was able to create till here -
My app.js file looks something like this-
import React from 'react';
import MyComponent from './MyComponent'
import slidesData from './slidesData'
import SlideComponent from './SlideComponent'
import './App.css';
function App(){
const slidestate=slidesData.map(slide=><SlideComponent key={slide.id} sli={slide}/>)
return(
<div id="main-div">
{slidestate}
<MyComponent />
</div>
)
}
export default App;
and my SlideComponent.js looks something like -
import React from 'react'
function SlideComponent(props){
return(
<div>
<h1>{props.sli.title}</h1>
<p>{props.sli.description}</p>
</div>
)
}
export default SlideComponent
and my 'MyComponent.js' looks something like this -
import React from 'react'
function MyComponent(){
return(
<div>
<button>Reset</button>
<button>Previous</button>
<button>Next</button>
</div>
)
}
export default MyComponent
and the JSON file in which i wish to render the text slides from looks something like -
const slidesData = [{id:1,title:"title1",description:"hello first slide"},{id:2,title:"title2",description:"hello second slide"}]
export default slidesData
I have basic knowledge about states and props and useEffect() components and also functional and class components.
I want to use the buttons to change the slide to previous , next or reset and respectively want that slide(from json file only) to be rendered at once (also not worried about timing of slides as of now). I know i have to use state change here , but i do not know how to proceed.Please help me. please excuse me for not styling it properly. i basically wanted to provide this functionality and then proceed with the css part. Please help me achieve this. It would help me a lot.
From what I understood, you need to have a state as current_slide that will hold your current slide id. whenever you press next or previous button you need to trigger a function in App() that is passed through your MyComponent and that will change your current_slide value and you need to pass that to your slide component so that can be shown. In case of reset button press event, just set the value of current_slide to the default value. Hope that helps. If I misunderstood, please correct me.
I'd like to create a basic "setting toggle" component, with Title and Subtitle on the left, and a Switch on the right. I'd like to be able to switch the toggle when the whole component is clicked, not just when the switch is.
In order to achieve this is wrapped the component in a Touchable and execute the supplied onValueChange callback, so the container component can handle the state change of the switch.
export default function SettingToggle({
title,
subtitle,
toggled,
onValueChange,
}) {
return (
<TouchableWithoutFeedback
style={styles.container}
onPress={() => onValueChange(!toggled)}
>
<View>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
<Switch
value={toggled}
onValueChange={value => onValueChange(value)}
></Switch>
</TouchableWithoutFeedback>
)
}
Now when I click the Switch, it animates nicely to the other value, but when click the component, the whole component redrawn with the new value of {toggled}, thus on the UI it feels like the switch is instantly changing to the other value.
Question 1: How could I preserve the animation even when the component is clicked, and not just the Switch?
Question 2: From where does React know, that it doesn't need to redraw the view when only the Switch is clicked? The render() method is called, as the parent component's state changes with the onValueChange call, so the SettingToggle is rerendered with a new {toggled} value. I assume the view is "recreated" but under the hood React probably isn't changing the view in the hierarchy with the newly created one, as it somehow knows that it is not needed. How does this work?