How to make component re-rendering in react-native faster?

Question

I am trying to change the style of a component in the sideBar based on the state of the navigation drawer (opened / closed). I am already detecting the state of the navigation drawer and passing it to the sideBar component using props inside componentDidUpdate.

The problem is the re-rendering (change of style based on the state) is too slow.

The main problem is with the data of the props which tends to be available too late.

Here is the code of the navigation drawer

export const Drawer = createDrawerNavigator(
{
Home: { screen: HomeNavigator },
Anatomy: { screen: Anatomy },
Header: { screen: Header },
Footer: { screen: Footer },
NHBadge: { screen: NHBadge }
},
{
initialRouteName: "Home",
drawerLockMode: 'locked-closed',
drawerPosition: 'right',
drawerWidth: 300,
drawerBackgroundColor: 'rgba(255, 255, 255, .9)',
contentComponent: props => <SideBar {...props}/>,
contentOptions: {
  activeTintColor: '#fff',
  activeBackgroundColor: '#e91e63',
}
}
);

And here is the code of the SideBar component

class SideBar extends Component {
constructor(props) {
super(props);
this.state = {
  shadowOffsetWidth: 1,
  shadowRadius: 4,
  isOpened: false
};
}

componentDidUpdate(prevProps) {
const isDrawerOpen = this.props.navigation.state.isDrawerOpen;
const wasDrawerOpen = prevProps.navigation.state.isDrawerOpen;

if (!wasDrawerOpen && isDrawerOpen) {
  this.setState({ isOpened: true })
}
else if (wasDrawerOpen && !isDrawerOpen) {
  this.setState({ isOpened: false })
}
}


render() {
const isDrawerOpen = this.props.navigation.state.isDrawerOpen;
console.log(isDrawerOpen)
return (
  <Container>
    <View style={styles.drawerCover} />
    {this.state.isOpened && <Image square style={styles.drawerImage} source={drawerImage} />}

    <Content
      bounces={false}
      style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
    >

      <List
        dataArray={datas}
        renderRow={data =>
          <ListItem
            button
            noBorder
            onPress={() => this.props.navigation.navigate(data.route)}
          >
            <Left>
              <Icon
                active
                name={data.icon}
                style={{ color: "#777", fontSize: 26, width: 30 }}
              />
              <Text style={styles.text}>
                {data.name}
              </Text>
            </Left>
            {data.types &&
              <Right style={{ flex: 1 }}>
                <Badge
                  style={{
                    borderRadius: 3,
                    height: 25,
                    width: 72,
                    backgroundColor: data.bg
                  }}
                >
                  <Text
                    style={styles.badgeText}
                  >{`${data.types} Types`}</Text>
                </Badge>
              </Right>}
          </ListItem>}
      />
    </Content>
  </Container>
);
}
}

score 0 · Answer 1 · answered Feb 06 '20 at 13:45

I found a solution that I wanted to share with anyone that may have the same problem.

I changed the way to keep track of the state of the navigation drawer and it's working smooth

componentDidUpdate(prevProps) {
if (this.props.navigation.state.drawerMovementDirection !== prevProps.navigation.state.drawerMovementDirection && this.props.navigation.state.drawerMovementDirection == "opening") {
  this.setState({ showImg: true })
}
if (this.props.navigation.state.drawerMovementDirection !== prevProps.navigation.state.drawerMovementDirection && this.props.navigation.state.drawerMovementDirection == "closing") {
  this.setState({ showImg: false })
}
}

How to make component re-rendering in react-native faster?

1 Answers1

Linked