Search code examples
listreact-nativescrollviewnative-base

How to prevent automatic scroll to top when rerender component?

I am facing one issue in react native with nativebase. 

<Content> 
   <List> 
     <ListItem> 
      <Left style={{ flex: 0 }}>
         <Icon name="user" type="SimpleLineIcons"></Icon>
      </Left>
      <Body>
         <Text> Profile </Text>
      </Body>
      <Right>
         <Switch value={this.state.profile} />
      </Right>
     </ListItem>
     ....
   </List> 
</Content>

When i update state(rerender component) list automatically scroll to top/first : 

this.setState({profile: true });

How to prevent autoscroll for better user experience?

Solution

  • I created functional list component and render in drawer. In drawer there text and switch component.

    My list component was inside renderer method so whenever i toggle switch render method fire and list autocamatilly go to up.

    Now, I put list component out of render method. This resolve my issue.

    Thanks all guys for your quick response and suggestion.

    Example : 

    render(){
const drawerContent = ()=>(
<Content> 
 <List> 
  <Switch value={this.state.flag) />
 </List>
</Content> 
)
return(
<Drawer content={drawerContent}>
 <Container> 
  ....
 </Container> 
</Drawer>
)
}

    To 

    drawerContent = ()=>(
<Content> 
 <List> 
   <Switch value={this.state.flag) />
 </List>
</Content> 
)
render(){
return(
<Drawer content={this.drawerContent}>
 <Container> 
  ....
 </Container> 
</Drawer>
)
}