Can somebody please suggest any data table component for react native which can add rows dynamically and having editable cells. I am done searching in google. Thanks in advance.
Please find the package available for React Native data table
https://github.com/sussol/react-native-data-table
A React Native data table written purely in JSX with React. ## Installation npm install --save react-native-data-table ## Usage react-native-data-table provides a number of components for constructing a table through composition.
I introduced my own module for this feature from which you will be able to select row easily and much more.
You can use this component like this below
import DataTable, {COL_TYPES} from 'react-native-datatable-component';
const SomeCom = () => {
//You can pass COL_TYPES.CHECK_BOX Column's value in true/false, by default it will be false means checkBox will be uncheck!
const data = [
{ menu: 'Chicken Biryani', select: false }, //If user select this row then this whole object will return to you with select true in this case
{ menu: 'Chiken koofta', select: true },
{ menu: 'Chicken sharwma', select: false }
]
const nameOfCols = ['menu', 'select'];
return(
<DataTable
onRowSelect={(row) => {console.log('ROW => ',row)}}
data={data}
colNames={nameOfCols}
colSettings={[{name: 'select', type: COL_TYPES.CHECK_BOX}]}
/>
)
}
export default SomeCom;
React Native DataTable Component
Related
I've tried a lot of answers given to similar questions but nothing is fixing my problem as I'm changing the state in a function which I'm calling on the press of a button in a third-part library I'm using.
I'm using react-native-horizontal-date-picker and upon select a date I'm calling a function in which I'm changing the state.
<HorizontalDatePicker
pickerType={'date'}
dayFormat={'Do'}
monthFormat={'MMM'}
yearFormat={'YYYY'}
returnDateFormat={'DD-MM-YYYY'}
onDateSelected={(date) => {
if (date) {
getTimeData()
}
}}
/>
Then in my getTimeData function I'm updating the const [timeSlots, setTimeSlots] = useState([]); state:
function getTimeData() {
...
if (timeAvailable) {
setTimeSlots(finalTimeSlots)
} else if (!timeAvailable) {
setTimeSlots([])
}
...
}
based on the timeSlots array I'm updating the UI, now I have to tap twice on the date to be able to see the results getting rendered.
I'm passing timeSlots to another custom component that I made:
<TimePicker timeSlotsArray={timeSlots} />
How do I achieve this in this scenario?
I have requirement where I have to create the TextInputs, Buttons, and other UI components, but the issue is I have to create the UI directly from the JSON data provided like
{
key: "TextInput",
props: {
// some props of the component
}
}
I tried to find many libraries which can do such thing in React Native but not getting the results I want.
You import the JSON data and check if a value exists or map/loop through an array of values
So for instance
import data from 'data.json'
{data.key && (
<TextInput value={data.key}></TextInput>
)}
In React Native iOS, I would like to slide in and out of a like in the following picture.
So I installed this https://github.com/octopitus/rn-sliding-up-panel for ease.
but this error is showing =>
i cant understand whats wrong, I am new to react native. Please Help!
You cannot access variable called _panel from this object because you are inside a function itself. besides you are using function based react, in order to create a reference check useRef() hook or switch to class based component and then you can use this._panel;
smthg like this:
function AccessingElement() {
const elementRef = useRef();
const onPress = () => {
// e.g
elementRef.current.show();
}
return (
<View ref={elementRef}>
...child views
</View>
);
}
How to pass value and run function between two siblings component. I am using React , Hooks
Items list exist in CreateArea.jsx component, which I want to delete an item from.
The delete button exist in Note.jsx component
There are many ways of doing this.. but I find Context API to work great if the app is not too complicated. Its a simple process:
Configure a provider
Configure a consumer and read/write data
Configure a provider
//App.js
const [data, setData] = useState()
let contextValue = {
data: data,
handleChange: (d) => setData(d)
}
return (
<RootContext.Provider value ={contextValue}>
<AppContainer/>
</RootContext.Provider>
)
Configure consumer
//SomeComponent.js - you can use consumer in any number of components
return(
<RootContext.Consumer>
{(handleChange, data) => {
handleChange({key: value})
<Text>{JSON.stringify(data)}</Text>
}}
</RootContext.Consumer>
)
More information can be found here
I am new to React Native
I am trying to create a multiselect view where user can select and deselect the items and then the selected items should pass back to the previous container and when user comes back to the next view the selected items should be checked.
I am trying to implement but getting the issue it is not updating data accurately. It shows only 1 selected item when I came back again to the screen.
Can anyone tell me the best way to do that or if there is any tutorial.
Should I do it with Redux or using react native?
Any help would be appreciated!!
Thanks!!
I believe the issue you describe is due to the following:
In componentDidMount you are calling updateItemWithSelected in a loop. This updateItemWithSelected call is both overwriting the checked attributes for all of the arrayHolder values on each call and also not using the updater function version of setState, so the later call of the loop may overwrite the earlier calls since setState is async and batched. If you are not using updateItemWithSelected elsewhere you should simplify componentDidMount to:
componentDidMount() {
const selectedTitles = {};
const { state } = this.props.navigation
const params = state.params || {};
if (params.data.length){
params.data.forEach((element) => {
// create a map of selected titles
selectedTitles[element.title] = true;
})
}
const arrayHolder = this.array.map(item => {
// map over `this.array` and set `checked` if title is in `selectedTitles`
return {...item, checked: !!selectedTitles[item.title]};
});
this.setState({ arrayHolder });
}
and delete updateItemWithSelected.