CODEWITHSUNDEEP
react-native-gifted-chat
aspiringsomeone
aspiringsomeone

Reputation: 623

Custom text input box, how to add margin

I'm trying to make the input bar look like this: enter image description here

but I can't get it to space properly. I also can't get rid of the line/divider. Right now, it looks like this: enter image description here

There's no spacing on the bottom or the top

This is my code:

            <GiftedChat
                messages={messages}
                onSend={newMessage => handleSend(newMessage)}
                user={{ _id: 1 }} // ideally this would be the current user id
                renderSystemMessage={customSystemMessage}
                renderBubble={renderBubble}
                renderInputToolbar={noinput ? () => (<View style = {{flex:1, backgroundColor: 'white'}}></View>) : (props) => renderInputToolbar(props)}
                renderSend = {renderSend}
                renderTime = {()=><View></View>}
                renderAvatar={() => null}
                placeholder='Write a message'
                alwaysShowSend
                inverted
            />
function renderInputToolbar(props) {
    return (
        <InputToolbar {...props} containerStyle={styles.input} />
    );
}
input: {
        borderRadius: 30,
        backgroundColor: colorScheme.lightTeal,
        marginLeft: 15,
        marginRight: 15,
    }

I can't seem to add a marginTop without because it makes my bar grow in height.

Upvotes: 0

Views: 3311

Answers (1)

Ken Kotch
Ken Kotch

Reputation: 21

I believe you want to use a custom renderInputToolbar:

...
renderInputToolbar={noinput ? () => (<View style={{flex:1, backgroundColor: 'white'}}></View>) : (props) => (
<InputToolbar
  renderActions={() => renderActions(props}
  renderComposer={() => renderComposer(props)}
  renderSend={() => renderSend(props)}
  containerStyle={{ ...containerStylesGoHere }}
/>
)}

Upvotes: 1

Related Questions