so I'm navigating to FooItems page from my first ponent and I'm passing props to navigation.

    showFooItemsPage = () => {
        this.props.navigation.navigate('FooItemsComponent', {
            fooItems: this.props.fooItems});
  };

On my FooItemsComponents, I have a Flatlist with renderItems function and that is working. However, I want to make changes to the Flatlist items list, then I want to click on Save in my header of my Flatlist ponent.

The main issue I'm having right now is sending props to the Header Component of my Flatlist. Props is undefined and I have no idea how to send it props from my FooItemsComponent or when I'm navigating between pages?

Here's some snippets from my FooItemsComponent:

class Header extends Component {

    constructor(props) {
        super(props);

    }

    async ponentDidMount() {
       //call some reducer action 
      }

    save = items => {
        this.props.saveItems(items);
        this.props.navigation.navigate("previousComponent");
    }

    render() {
        const {navigation, loading } = this.props;

        return (
        <View>
            <View style={styles.header}>
                <TouchableOpacity onPress={this.save}>
                    <Text style={styles.saveText}>Save</Text> 
                    </TouchableOpacity>
                </View>
            <View
                style={{
                borderTopWidth: 1,
                borderTopColor: Colors.grey,
                height: 1,
                }}> 
            </View>
        </View>
        );
    }
}

export class FooItemsComponent extends Component {

    constructor(props) {
        super(props);
    }

    async ponentDidMount() {
        //some reducer action 
      }

    renderItem = item => {
         if (item.load) {
          return <ActivityIndicator color={Colors.activityColor} size="small" />;
        } else {

          return (
              <View>
                <FooItems
                    {...item}
                    navigation={this.props.navigation}
                    showParticularItems={true}
                />
                </View>
          ); }
      };

    render() {
        const { fooItems, navigation, loading, props} = this.props;
        if (!fooItems) fooItems = [];

        return (
            <View style={styles.container}>
                <FlatList
                keyExtractor={(item, index) => `key-${index}`}
                data={fooItems}
                renderItem={item => this.renderItem(fooItems.item)}
                ItemSeparatorComponent={Separator}
                ListHeaderComponent={Header}
                ListFooterComponent={loading ? LoadingFooter : Separator}
                />
          </View>

        );
    }
}

so I'm navigating to FooItems page from my first ponent and I'm passing props to navigation.

    showFooItemsPage = () => {
        this.props.navigation.navigate('FooItemsComponent', {
            fooItems: this.props.fooItems});
  };

On my FooItemsComponents, I have a Flatlist with renderItems function and that is working. However, I want to make changes to the Flatlist items list, then I want to click on Save in my header of my Flatlist ponent.

The main issue I'm having right now is sending props to the Header Component of my Flatlist. Props is undefined and I have no idea how to send it props from my FooItemsComponent or when I'm navigating between pages?

Here's some snippets from my FooItemsComponent:

class Header extends Component {

    constructor(props) {
        super(props);

    }

    async ponentDidMount() {
       //call some reducer action 
      }

    save = items => {
        this.props.saveItems(items);
        this.props.navigation.navigate("previousComponent");
    }

    render() {
        const {navigation, loading } = this.props;

        return (
        <View>
            <View style={styles.header}>
                <TouchableOpacity onPress={this.save}>
                    <Text style={styles.saveText}>Save</Text> 
                    </TouchableOpacity>
                </View>
            <View
                style={{
                borderTopWidth: 1,
                borderTopColor: Colors.grey,
                height: 1,
                }}> 
            </View>
        </View>
        );
    }
}

export class FooItemsComponent extends Component {

    constructor(props) {
        super(props);
    }

    async ponentDidMount() {
        //some reducer action 
      }

    renderItem = item => {
         if (item.load) {
          return <ActivityIndicator color={Colors.activityColor} size="small" />;
        } else {

          return (
              <View>
                <FooItems
                    {...item}
                    navigation={this.props.navigation}
                    showParticularItems={true}
                />
                </View>
          ); }
      };

    render() {
        const { fooItems, navigation, loading, props} = this.props;
        if (!fooItems) fooItems = [];

        return (
            <View style={styles.container}>
                <FlatList
                keyExtractor={(item, index) => `key-${index}`}
                data={fooItems}
                renderItem={item => this.renderItem(fooItems.item)}
                ItemSeparatorComponent={Separator}
                ListHeaderComponent={Header}
                ListFooterComponent={loading ? LoadingFooter : Separator}
                />
          </View>

        );
    }
}

• javascript
• reactjs
• react-native
• react-native-flatlist

2 Answers 2

Pass your ponent as a React element:

 <FlatList
    keyExtractor={(item, index) => `key-${index}`}
    data={fooItems}
    renderItem={item => this.renderItem(fooItems.item)}
    ItemSeparatorComponent={Separator}
    ListHeaderComponent={<Header yourProps={'blabla title'}/>}
    ListFooterComponent={loading ? LoadingFooter : Separator}
   />

and in Header ponent use this.props.yourProps

Never use arrow functions to render ponents passed as props, React won't have a stable reference to the function and therefor will not know that the header ponent is supposed to be the same ponent between renders. It can cause bugs and will hurt performance. See SearchBar in FlatList loses focus after typing for an example of a bug it can cause. Although, Idan was pretty close to having the correct solution. Instead, do this:

 <FlatList
    keyExtractor={(item, index) => `key-${index}`}
    data={fooItems}
    renderItem={item => this.renderItem(fooItems.item)}
    ItemSeparatorComponent={Separator}
    ListHeaderComponent={<Header yourProps={'blabla title'}/> }
    ListFooterComponent={loading ? LoadingFooter : Separator}
   />