React-native-gifted-chat: 2 UI issues with custom Composer

[Gabsys]

Issue Description

There are 2 issues:

1) I styled the Composer with marginTop and marginBottom to have a gap between the Composer and the InputToolbar. Unfortunately, it ends up with the whole InputToolbar overlapping with the last chat bubble, blocking the chat bubble

2) After styling the Composer and pass it in with renderComposer function, the Composer will no longer increase its height on multiline input. :( (Update: Solved by passing in {...props})

Steps to Reproduce / Code Snippets

My renderComposer function:

renderComposer(props){
    return(
      <Composer
      textInputStyle={styles.composer}
      onTextChanged={(text) => this.setState({ composerText: text })}
      text={this.state.composerText}
      multiline={true} 
      ></Composer>
    )
  }

This is the styling for my composer:

composer:{
      backgroundColor:'rgba(217, 217, 217, 0.37)',
      color:'#00346D',
      borderRadius:15,
      borderColor:'#C0CCDA',
      borderWidth:1,
      marginTop:10,
      marginBottom:10,
      paddingLeft: 10,
    },

Expected Results

I expect the Composer to work like default but with own customised design.

Additional Information

• Nodejs version: v13.7.0
• React version: v16.13.0
• React Native version: v0.61.5
• react-native-gifted-chat version: v0.13.0
• Platform(s) (iOS, Android, or both?): Currently only tested on Android
• TypeScript version: -

[charles-goode]

Try the following:
const { textInputStyle, onTextChanged, text, multiline, ...remainingProps} = props;
and then after you replace each of these with your custom values drop in the rest:
{...remainingProps}

[Gabsys]

Try the following:
const { textInputStyle, onTextChanged, text, multiline, ...remainingProps} = props;
and then after you replace each of these with your custom values drop in the rest:
{...remainingProps}

Thanks for the tips! It solved issue 2. Btw, I just have to pass in {...props} before I start my other props in my composer tag ~~

My final code for composer:

renderComposer(props){
     return(
      <Composer
      {...props}
      textInputStyle={styles.composer}
      onTextChanged={(text) => this.setState({ composerText: text })}
      text={this.state.composerText}
      multiline={true} 
      ></Composer>
    )
  }

[Gabsys]

I solved issue 1 with a workaround - Adding renderChatFooter. As of below is my code in case anyone facing the same issue:

renderChatFooter(){
    return(
      <View style={{height:20}}></View>
    )
  }