React native navigate to other screen

Question

I am trying to redirect to CallScreen, but the redirect() function isnt being called. My code is in https://pastebin.com/FKLfGxhR, the function is supposed to be called

  options={{
  'Choose From Library': () => {
    this.redirect();
  },
}} 

here.

The function is in the class, and is

  redirect = () => {
this.props.navigation.navigate('CallScreen')
console.log('test')

}

Answer 1

renderActions should be a method of the class. Making it a method you also have to use this.renderActions instead of renderActions

class ChatScreen extends React.Component {
  renderActions = (props) => {
    return <Actions
      {...props}
      containerStyle={{
        width: 44,
        height: 44,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 4,
        marginRight: 4,
        marginBottom: 0,
      }}
      icon={() => (
        <Image
          style={{ width: 32, height: 32 }}
          source={{
            uri: 'https://placeimg.com/32/32/any',
          }}
        />
      )}
      options={{
        'Choose From Library': () => {
          this.redirect();
        },
      }}
      optionTintColor="#222B45"
    />
  };
    
  redirect = () => {
    this.props.navigation.navigate('CallScreen')
    console.log('test')
  }
  
  state = {
    messages: [],
  };

  get user() {
    const { name, id, avatar } = this.props.route.params;
    return {
      name: name,
      _id: id,
      avatar: avatar,
    };
  }

    componentDidMount() {
      FirebaseStorage.shared.on(message =>
        this.setState(previousState => ({
          messages: GiftedChat.append(previousState.messages, message),
        }))
      );
  }
  
  componentWillUnmount() {
      FirebaseStorage.shared.off();
  }

  render() {
    return <SafeAreaView style={{flex: 1}}>
        <GiftedChat
              messages={this.state.messages}
              onSend={FirebaseStorage.shared.send}
              user={this.user}
              alwaysShowSend
              showUserAvatar
              isAnimated
              showAvatarForEveryMessage
              renderBubble={this.renderBubble}
              renderMessageImage={() => this.showImage}
              renderUsernameOnMessage
              isTyping
              renderActions={this.renderActions}
        />
    </SafeAreaView>
  }
}

Answer 2

renderActions should live inside Component before calling this.

class ChatScreen extends React.Component {
  
  //..your stuff

  const renderActions = (props) => {
    return <Actions
      ...props
      options={{
        'Choose From Library': () => {
          //It is safe to call this.XXX from here
          this.redirect();
        },
      }}
    />
  };

  render() {
    return <SafeAreaView style={{flex: 1}}>
        <GiftedChat
              messages={this.state.messages}
              onSend={FirebaseStorage.shared.send}
              user={this.user}
              alwaysShowSend
              showUserAvatar
              isAnimated
              showAvatarForEveryMessage
              renderBubble={this.renderBubble}
              renderMessageImage={() => this.showImage}
              renderUsernameOnMessage
              isTyping
              renderActions={renderActions}
        />
    </SafeAreaView>
  }
  redirect = () => {
    this.props.navigation.navigate('CallScreen')
    console.log('test')
  }
}