Working on a react-native application where I've to list Custom Items in a FlatList. This custom items contains two buttons. Clicking on each of it will get some data regarding to that clicked item and will display another FlatList with custom items in between that clicked item and it's next item.
Here in this link I've drawn that screen looks. Clicking on button B2 will get a list and display in between Parent FlatList item See Screens Here
I've tried with the SectionList where I'm displaying my first list data in Headers of SectionList with Custom Component with two buttons. Clicking on any, will get another list of items and assigned those data to clicked section header data. Those data will be displayed as child items to selected Header section. But it didn't workout as expected so looking for some alternate way with FlatList.
Your main component will be like below:
export default class MainClass from React.Component{
render(){
<FlatList
data={items}
renderItem={({item}) => <ListItem/>}
/>
}
}
Your custom list item component will be like below:
export default class ListItem from React.Component{
render(){
<View>
<View>
//your card view which will contain B1 and B2 button
</View>
//below views will render conditionally
<FlatList/> //if B2 button clicked then show fetched list
<CalendarWidget/> //if B1 button clicked then show calendar data
</View>
}
}
Try to build your code like above solution. It should solve your problem.
Related
I'm using the react-select control. The items displayed in the dropdown list are a combination of fixed items plus dynamically added items.
I'd like to be able to delete the dynamically generated items directly in the dropdown panel by adding an icon next to the label. When clicked this should remove the item.
I know the code to add/remove items programmatically. It's just a case of updating state. The thing I'm stuck on is how to add UI to the react-select dropdown panel and fire a click event when it's clicked on.
According to the docs you can replace the option component in react-select.
import React from 'react';
import Select from 'react-select';
const CustomOption = ({ innerProps }) =>
<div {...innerProps}>{/* your component internals */}</div>
class Component extends React.Component {
render() {
return <Select components={{ Option: CustomOption }} />;
}
}
That way you could add an icon <span onClick={() => this.deleteOption(optionId)}>×</span> to the CustomOption component and use css position: absolute etc. to get it where you want and style it, preferably through a className
I am creating a custom dropdown component in React Native. I want to close it contents, when user presses screen outside of the component on any other part of the application.
However, I cannot know if user pressed outside the component. Is there a global OnPress event that can accessed or some other way, kindly let me know.
Edited:
add a logic when you click dropdown it should create a transparent view covering wholescreen in a absolute position.
Do it Like this:
// inside render
<Fragment>
<Nested>
<DropDown/>
</Nested>
{isDrop &&
<View style={styles.container} // height:'100%', width:'100%', backgroundColor:transparent , position: 'absolute'
//Trigger for pressing outside DropDown
onResponderStart={() => { condition for dropdown}}
//Required to start interacting with touches
onStartShouldSetResponder={(e) => {return true}}/>}
</Fragment>
DropDown component and view with touch must be the same level
I have a view that has top banner and some text, and after that there is a list of product which uses pagination, what I want to do is use flat list, Is there a way to configure it so that in my renderItems I'll return my products and have the the static content in same flat list?
If your Banner and text will always be on top of product list then you can use ListHeaderComponent prop of Flatlist to render static content(e.g. banner and text).
<FlatList
...
ListHeaderComponent={this.renderHeader}
/>
If you have fixed banner and some text before the flatlist. You can wrap the banner, text and flatlist in scrollView.This will work as you wanted.
render(){
return(
<ScrollView>
this.renderBanner();
this.renderText();
this.renderFlatList();
</ScrollView)
}
I have an openDrawer method via React Navigation 2 working great in my View. However, when I create a child component and place my openDrawer button in it, I can no longer access this.props.navigation. How do I pass that down into the child component? I looked at state but that doesn't seem to be the correct way to address this? I am new to React/Native. Here is my button inside the main view and it works fine this way.
<View style={styles.menuBar}>
<TouchableOpacity style={styles.menuButton}
onPress={() => this.props.navigation.openDrawer()}>
<Text>☰</Text>
</TouchableOpacity>
// Other Stuff inside menuBar.
</View>
This menu button has a few other items as well and I am wanting to group together in a class component as a child that I can just import into various screens.
import { topMenuBar } from '../components/menuBar';
<topMenuBar />
However, the menu button no longer works now. I know it's because this.props is now referring to class topMenuBar and not the original class which is part of the nav structure. But I don't know the proper procedure for this step, whether it's using state or calling NavigationActions from react-navigation in the child method somehow.
Thanks for the help!
Every component opened using react-navigation has "this.props.navigation".
If you need it in child components you should pass to them as a prop:
export default class Home extends Component{
render(){
<View>
<OtherComponent navigation = {this.props.navigation}/>
</View>
}
}
Note: if you want a better help you should always provide code creating a fiddle and organize better your answers..
I have a one autocomplete textinput in react native.This autocomplete textinput shows suggestion below the area of textinput and once the user tap on that value ,that value gets set in textinput.Now i want to navigate to next page once the user selects the suggestion value and it set to textinput.Its like when you search search on google it give you suggestions and when you select any one suggestion,here i want to navigate to next scene once user selects suggestion and set those values to textinput
As I understood, you want to push next component on navigation stack with selected props.
You need to provide navigation for your components, take a look at navigator component:
https://facebook.github.io/react-native/docs/navigator.html
When navigation is set, you can navigate and pass props with method:
this.props.navigator.push({
name: 'name_of_your_component',
passProps: {
title: 'Components title',
data: someObject
}
});
If you have a listview providing suggestions, than you can wrap every row to TouchableHighligt. That way you are providing function that fires when row is tapped.
renderRow(data) {
return (
<TouchableHighlight
onPress={this.rowTapped.bind(this, data)}>
<View>
<Text>This is a row.</Text>
</View>
</TouchableHighlight>
);
}