React-native-gifted-chat: How to use scrollToBottomComponent?

[ckwee-alex]

Issue Description

I'm not sure how to use scrollToBottomComponent to customize the component with scrollToBottom={true}.

Got the following error when trying to use this two props together:
ExceptionsManager.js:82 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Steps to Reproduce / Code Snippets

private _scrollToBottomComponent(props) {
  return (
    <View style={styles.scrollToBottomContainer}>
      <TouchableOpacity {...props}>
        <Text>Image here</Text>
     </TouchableOpacity>
   </View>
  );
}

Expected Results

To be able to center the component and change the current V to an image or possibly animation with either lottie-react-native or react-native-element.

Additional Information

• Nodejs version: 11.13.0
• React version: 16.8.3
• React Native version: 0.59.3
• react-native-gifted-chat version: 0.7.2
• Platform(s) (iOS, Android, or both?): Both

[wincjh]

+1

[junminleeKS]

I found this snippet pertaining to the bottom scroll component inside the source code:

renderScrollToBottomWrapper() {
  const scrollToBottomComponent = (
    <View style={styles.scrollToBottomStyle}>
      <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
        <Text>V</Text>
      </TouchableOpacity>
    </View>
  );

  if (this.props.scrollToBottomComponent) {
    return (
      <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
        {this.props.scrollToBottomComponent}
      </TouchableOpacity>
    );
  }
  return scrollToBottomComponent;
}

It seems this.props.scrollToBottomComponent should be this.props.scrollToBottomComponent() since the documentation states that you need to pass in a function.

I also noticed that the default component is styled so that it appears on the bottom right of the screen as seen here:

scrollToBottomStyle: {
  opacity: 0.8,
  position: 'absolute',
  paddingHorizontal: 15,
  paddingVertical: 8,
  right: 10,
  bottom: 30,
  zIndex: 999,
  height: 40,
  width: 40,
  borderRadius: 20,
  backgroundColor: Color.white,
  alignItems: 'center',
  justifyContent: 'center',
  shadowColor: Color.black,
  shadowOpacity: 0.5,
  shadowOffset: { width: 0, height: 0 },
  shadowRadius: 1,
}

If we try to do the same absolute positioning by styling our own component that is passed in then it will not achieve the same behavior. Our component is wrapped by TouchableOpacity whereas the default component wraps TouchableOpacity in a view that receives the above style.

[ckwee-alex]

I noticed that as well. Is there then any way to allow to change the content wrapped by TouchableOpacity which in this case is the <Text>V</Text> ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[msqar]

Hey guys, i found there's no way to customize the container, I don't want it to be a circle-shaped with opacity. How can I edit the container? in the props it says i can pass the scrollToBottomStyle, but it's not using it anywhere within the code.

[ismdcf]

Hi
Any update on this