renderFooter is not working.

[Ahsanali012]

renderFooter is not working, As i want to show custom buttons , Can you provide me the example how can i work to show buttons?

const stories = [
    {
      id: 'user1',
      name: 'User 1',
      imgUrl: 'imageUrl.png',
      stories: [
        {
          id: 'story1',
          sourceUrl: 'imageUrl.png',
          renderContent: () => (
            <View style={tw`mt-[15%] p-3`}>
              <Text style={tw`font-bold text-white`}>This is custom content for User 1's first story</Text>
            </View>
          ),
          renderFooter: () => (
            <View style={{ backgroundColor: 'red', padding: 10, alignSelf: 'center' }}>
              <Button title="Like" onPress={handleLikePress} />
              <Button title="Share" onPress={handleSharePress} />
            </View>
          ),
        }

      ],
    }
  ];

[LukasFridmansky]

Hi, I checked both android and ios and both worked as expected. I used this function: () => <View style={{ backgroundColor: 'red', width: '100%', height: 100 }} />. Are you sure your Button component renders correctly? I don't see any issue in your code.

[Ahsanali012]

Hi, I checked both android and ios and both worked as expected. I used this function: () => <View style={{ backgroundColor: 'red', width: '100%', height: 100 }} />. Are you sure your Button component renders correctly? I don't see any issue in your code.

I'll try again and let you know

[visace]

@Ahsanali012 You are missing the return ..

renderFooter: () => return ( <View style={{ backgroundColor: 'red', padding: 10, alignSelf: 'center' }}>

          <Button title="Share" onPress={handleSharePress} />
        </View>

),

[Ahsanali012]

I cant show footer and also i need to show delete button so i can trigger delete for each story how can i do that ?

`  const InstaStories = AllStoriesPosts?.map((story) => ({
    id: story.id,
    name: story.name,
    imgUrl: story.imgUrl,
    stories: story.stories.map((item) => ({
      id: item.id,
      mediaType: item.mediaType,
      sourceUrl: item.sourceUrl,
      renderContent: () => (
        <View style={tw`mt-[15%] flex-row justify-between  w-full p-3`}>
          <Text style={tw`font-bold mx-2 text-base text-white`}>
            {item?.description}
          </Text>
          {auth.isauth && (
            <View style={tw``}>
              {/* <Button title="Delete" onPress={() => deleteStory(item?.id)} /> */}
              <Text style={tw`font-bold mx-2 text-base text-white`}>
                delete
              </Text>
            </View>
          )}
        </View>
      ),
      renderFooter: () => (
        <View
          style={{
            backgroundColor: "red",
            height: 50,
            width: "100%",
            padding: 10,
            alignSelf: "center",
          }}
        >
          <Text style={tw`font-bold mx-2 text-base text-white`}>Footer</Text>
        </View>
      ),
    })),
  }));`