Rendering specific component in React Native

user_12594366 0
Viewed 260

I used the ScrollView's onMomentumScrollEnd handler to determine the current page based on the contentOffset in the recyclerlistview Component.

 const [currentPage, setCurrentPage] = useState(0);

 const onScrollEnd = (e) => {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    setCurrentPage(pageNum);
  };

return (
   <View style={{ flex: 1 }}>
        <RecyclerListView
          rowRenderer={({ item }, index) => <Page item={item} id={index} />}
          dataProvider={list}
          layoutProvider={layoutProvider}
          onMomentumScrollEnd={onScrollEnd}
          isHorizontal
          pagingEnabled
        />
        <View style={{ flex: 0.1, backgroundColor:"gold" }}>
          <Text>{`current page: ${currentPage}`}</Text>
       </View>
      </View>
  );

I want to display the current Page inside a Text component, but when currentPage state changes in onMomentumScrollEnd handler the whole app is re-render. I need to re-render only the Text Component, any suggestion for that.

react-native reactjs
2 Answers

I find a solution. the easiest way is to create a class component and put the displayed component in it, then I reference it and change the current page with ref hook.

 class DisplayCurrentPage extends React.Component {
   contractor(prop){
    super(prop)
    state:{currentPage:0}
   }
   updateCurrentPage = (index) => {this.setState({CurrentPage: index})}
   render(){
    return(
      <View style={{ flex: 0.1, backgroundColor:"gold" }}>
          <Text>{`current page: ${this.state.currentPage}`}</Text>
       </View>
     );

   }

 };
  

 const reference = createRef();
 const onScrollEnd = (e) => {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    reference.current.updateCurrentPage(pageNum);
  };

return (
   <View style={{ flex: 1 }}>
        <RecyclerListView
          rowRenderer={({ item }, index) => <Page item={item} id={index} />}
          dataProvider={list}
          layoutProvider={layoutProvider}
          onMomentumScrollEnd={onScrollEnd}
          isHorizontal
          pagingEnabled
        />
        <DisplayCurrentPage ref={reference} />
      </View>
  );

When the page is changed, only DisplayCurrentPage is re-render.

user_125943660

You can use React.memo which is an alternative to shouldComponentUpdate for functional components. It tells React when to re-render the component based on prev and next props.

const Item = React.memo(({ item }) => {  
  return (
    <View>
      ........
    </View>
  );
});
user_12833450
Related