listview


react native navigator parent component is not drawn after pop


I have a problem with Navigator ... I have 2 scenes, the main scene contains a ListView and the second scene contains a selection list that allows me to filter the elements of the ListView of the main scene ... the problem is that when I return from the second scene, the filtered elements of the ListView are not drawn ... the rows are displayed but they are empty
I know they are displayed because I've styled the rows with a different color and the color is shown correctly, do I have to force the rendering of the ListView component somehow? If yes, how should I do it?
Here are some parts of the code (I've removed the irrelevant parts):
class App extends Component {
renderScene(route, navigator) {
switch (route.id) {
case 'Main':
return (<Main navigator={navigator} />);
case 'FilterByBrand':
return (<FilterByBrand navigator={navigator} brands={route.brands} callback={route.callback}/>);
}
}
render () {
return (
<Navigator
initialRoute={{id: 'Main'}}
renderScene={this.renderScene}
/>
);
}
}
--
class Main extends Component {
// code removed (irrelevant)
updateBrands(brands) {
var filter = {};
// code to generate filter to be used not shown, is working ok
this.setState({ brandFilter: filter });
}
render () {
return (
<Container>
<Header>
<Button>
<Icon name='md-pricetags'
onPress={()=>this.props.navigator.push({
id: 'FilterByBrand',
brands: this.state.brands,
callback: this.updateBrands}
)}
/>
</Button>
</Header>
<Content>
<ProdList
item={this.state.items}
brandFilter={this.state.brandFilter}
/>
</Content>
</Container>
);
}
}
--
class ProdList extends Component {
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this._filter = this._filter.bind(this);
this._genRow = this._genRow.bind(this);
}
_genRow(item) {
// code not shown (irrelevant)
}
_filter() {
let output = this.props.items;
// filtering code not shown, working ok
return output;
}
render() {
var dataSource = this.dataSource.cloneWithRows(this._filter());
return (
<ListView
style={styles.container}
dataSource={dataSource}
renderRow={this._genRow}
enableEmptySections={true}
/>
);
}
}
--
class FilterByBrand extends Component {
selectBrand(id) {
brands = // save here the selected brands
// callback
this.props.callback(brands);
this.setState({brands: brands});
}
render () {
return (
<Container>
<Header>
<Button transparent onPress={()=>this.props.navigator.pop()}>
<Icon name='ios-arrow-back' />
</Button>
<Title>Select brand(s)</Title>
</Header>
<Content>
<List
dataArray={this.state.brands}
renderRow={ (brand) =>
<ListItem onPress={() => this.selectBrand(brand.id)}>
<Text>{brand.name}</Text>
</ListItem>
}
/>
</Content>
</Container>
);
}
}
may be you forget to add ref.
var navigator;
class App extends Component {
renderScene(route, navigator) {
switch (route.id) {
case 'Main':
return (<Main navigator={navigator} />);
case 'FilterByBrand':
return (<FilterByBrand navigator={navigator} brands={route.brands} callback={route.callback}/>);
}
}
render () {
return (
<Navigator
ref={(nav) => { navigator = nav; }}
initialRoute={{id: 'Main'}}
renderScene={this.renderScene}
/>
);
}
}

Related Links

Removing items from ListView strange behaviour
Click events in Sencha touch
Get more than one rows item for one iteration in ADF-Mobile
Sencha Touch merging ListView back button bar with custom toolbar
understanding cellFactories and CallBack
how to set image to ImageView inside ListView in Xamarin?
Sencha Touch consecutive listviews double back buttons issue
Listview loaded twice
Different height in ListView
How to set selected item of ListView without scrolling the view
Can't update data from Kendo DataSource
Closed or circular Vertical ListView Android
How to set layout for topEmptyRegion in WearablListView?
How to disable groupedlist i.e. SemanticZoom+ListView virtualization in WP8.1 WinRT?
Listview item with NM_CUSTOMDRAW is flickering
How to stretch ListView items width to fill parent container?

Categories

HOME
ionic-framework
google-chrome-extension
coq
mediawiki
angular-material
iterator
lodash
framework7
retrofit
echarts
podio
etl
lombok
telephony
ef-migrations
autoconf
mps
graphicsmagick
language-agnostic
zurb-foundation-6
one-to-many
qhull
status
pingfederate
xacml
windowbuilder
procdump
oracle-fusion-middleware
http-get
perlin-noise
google-api-nodejs-client
main
xcode-extension
x11-forwarding
sharefile
greenrobot-eventbus
mapzen
janrain
node-gyp
nxlog
netcdf4
checkboxlist
sencha-touch-2.3
segment
apple-news
flickr-api
dotcover
xml-documentation
network-flow
pnotify
lync-client-sdk
orthogonal
passport-google-oauth
home-directory
trash
google-web-starter-kit
ptrace
hsv
rtbkit
purge
map-projections
riak-cs
cakephp-3.1
appfabric-cache
sniffer
ami
sonarqube5.1.2
bigbluebutton
oxwall
ng-animate
nstableviewcell
java-metro-framework
mechanize-ruby
html5-notifications
batterylevel
dmoz
libstdc++
pendrive
zpt
lang
h.323
blitz++
wise
gamma
nhibernate.search
mirah
asp.net-profiles
rescale
eqatec
avatar
gacutil
misv

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App