Skip to content

NavigatorIOS optimizations break functional components #13539

Closed
@algesten

Description

@algesten

Description

NavigatorIOS method for providing props to the child components passProps. A functional component should (at the very least) be redrawn when the props change (argument to function changes), however internal optimizations of NavigatorIOS means the children are never redrawn.

Reproduction Steps and Sample Code

const MyScene= (props) => {
    return (
      <View><Text>{props.message}</Text></View>
    )
}
const App = (props) => {
  return (
    <NavigatorIOS
      initialRoute={{
        component: MyScene,
        title: 'My Initial Scene',
        // XXX when these props change, no redraw occurs
        passProps: {message:props.incomingMessage}
      }}
      style={{flex: 1}}
    />
  )
}

Solution

Redraws get stuck on the optimization logic on these lines.

https://github.com/facebook/react-native/blob/master/Libraries/Components/Navigation/NavigatorIOS.ios.js#L855-L861

At the very least passing new props should cause a redraw (i.e. treating the function as a React.PureComponent), but maybe even better to identify functional components as children and always propagate the parent redraw to them.

Additional Information

  • React Native version: 0.42.0, 0.43.0
  • Platform: iOS
  • Development MacOS
  • Dev tools: XCode 8.3.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions