CODEWITHSUNDEEP
react-native
Hyejung
Hyejung

Reputation: 1272

How to send data in real-time between two separate components without navigation in React Native?

Feed Screen

<WriterBox
  writerAvatar={feed?.user?.avatar}
  writerName={feed?.user?.name}
  writeTime={feed?.createdAt}
  editTime={feed?.updatedAt}
  feedId={feed?.id}
  writerId={feed?.user?.id}
/>

WriterBox Component

  const deleteClick = () => {};

      <SmallBtn
        text={"삭제"}
        color={"main"}
        pressFunction={deleteClick}
      />
    </View>

So I have WriterBox component in Feed screen.

And in WriterBox Component, I have a SmallBtn.

I want to inform Feed screen to show alert when I click SmallBtn of WriterBox without navigating to Feed screen.

Usually we handle this with useState.

But this is separate component, so I can't send this data from WriterBox to Feed.

AsyncStorage is not possible to keep eye on the change of state.

So Feed screen can't respond in real-item with AsyncStorage.

How to deal this this case?

Upvotes: 0

Views: 46

Answers (1)

Chari
Chari

Reputation: 134

you can pass a handler method to the WriterBox component.

const FeedScreen = () => {

    const handlDeletePress = () => {
      // do something in the feed screen
    }
    
    return (
        <WriterBox
          writerAvatar={feed?.user?.avatar}
          writerName={feed?.user?.name}
          writeTime={feed?.createdAt}
          editTime={feed?.updatedAt}
          feedId={feed?.id}
          writerId={feed?.user?.id}
          onDeletePress={handlDeletePress}
         />
     );
}

const WriterBox = props => {
    const deleteClick = () => {
      props.onDeletePress();
    };
    
    return (
        <SmallBtn
          text={"삭제"}
          color={"main"}
          pressFunction={deleteClick}
        />
    )
}

Upvotes: 1

Related Questions