I have ListView Component in a js file and I want to use it another js file and show/hide the component on click of a button dynamically - react-native

Question

How should i do it? My code is :
ListComponent.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableHighlight
} from 'react-native';
class ListComponent extends Component {
constructor(props) {
super(props);
var dataSource = new ListView.DataSource(
{rowHasChanged: (r1, r2) => r1!== r2});
this.state = {
dataSource: dataSource.cloneWithRows(['A','B','C'])
};
}
renderRow(rowData, sectionID, rowID) {
return (
<TouchableHighlight
<View>
<Text style={styles.instructions}>{rowData}</Text>
</View>
</TouchableHighlight>
);
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}/>
);
}
}
module.exports=ListComponent;
CreateMessage.js
'use strict'
var React= require('react');
var ReactNative = require('react-native');
var {
View,
Text,
Image,
StyleSheet,
TouchableHighlight,
TextInput,
Dimensions,
}= ReactNative;
import { Container, Content, Picker } from 'native-base';
var ListComp=require('./ListComponent');
class CreateMessage extends React.Component{
constructor(props) {
super(props);
this.state = { email: 'Email ID' , pass:'Password', name:'Name', isLoginClicked:'true',language:'ABC',pickerState:false};
}
press(){
this.setState({
pickerState : !this.state.pickerState
});
}
_renderList() {
if (this.state.pickerState) {
return (
<ListComp/>
);
}
else {
return null;
}
}
render(){
return (
<View>
<View>
<View>
<TouchableHighlight
style={{flex:1}}>
<Image
style={styles.headerImage}
source={require('./images/back-arrow.png')}/>
</TouchableHighlight>
<Text> Create Message</Text>
</View>
<View>
<TouchableHighlight>
<Text>Done</Text>
</TouchableHighlight>
</View>
</View>
<View>
<Text>Post to</Text>
<View>
<View>
<Image
style={{height:70,width:70,}}
source={require('./images/no-image.png')}/>
</View>
<View>
<Text
style={styles.text}>name of community</Text>
<Text
style={styles.text1}>no. of members</Text>
</View>
**<TouchableHighlight
underlayColor="gray"
onPress={this.press.bind(this)}>
<Image
style={{height:20,width:20,}}
source={require('./images/add-button.png')}/>
</TouchableHighlight>**
</View>
<Text
style={styles.headingText}>Subject</Text>
<TextInput></TextInput>
<Text
style={styles.headingText}>Message</Text>
<TextInput></TextInput>
<View>
<TouchableHighlight}>
<View>
<Image
style={{height:20,width:20,marginLeft:0,}}
source={require('./images/image-add-button.png')}/>
<Text>Add Photo</Text>
</View>
</TouchableHighlight>
<Text>ADD PROJECT</Text>
</View>
</View>
</View>
);
}
}
module.exports=CreateMessage;
I am displaying CreateMessage.js in my index.ios.js file and it is working fine , but i want to show/hide a list on click of a button (3rd TochableHighlight ).

Answer 1

I assume _renderList is responsible for render your listview component. You can call it in render function.
render(){
return (
<View>
{this._renderList()}
/*......rest of your code....*/
</View>
);