Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add children props to Send component #487

merged 1 commit into from Aug 28, 2017


Copy link

@sf27 sf27 commented Jun 21, 2017

With this fix, you can set an image as a sender button or anything you want to.

renderSend(props) {
        return (
                <View style={{marginRight: 10, marginBottom: 5}}>
                    <Image source={require('../../assets/send.png')} resizeMode={'center'}/>

@cooperka cooperka force-pushed the master branch 5 times, most recently from 092db6b to 730bab3 Compare Jul 16, 2017
@cooperka cooperka merged commit 6be3db1 into FaridSafi:master Aug 28, 2017
Copy link

Thank you @sf27. FYI I couldn't push to your branch, so I added an extra commit manually: b669f3b.

sondremare pushed a commit to EdtechFoundry/react-native-gifted-messenger that referenced this pull request Oct 23, 2017
* [Request] Add prop for tintColor for ActionSheet in Actions FaridSafi#185

Add prop optionTintColor for ActionSheet options text

* Update default optionTintColor to native color

* Initial support tick messages

* The message sent and delivered props have been removed from GiftedChat and are now read from the message state

* Added possibility to override the behaviour of renderTicks, deleted nested function in renderTicks

* Updated example and ticks on the right the time and ticks only appear for the sent messages

* renderTick: Move the constant declaration to the top of the function

* Expose GiftedAvatar

* renderTick: Possibility to change style of the ticks passing the parameter tickStyle to GiftedChat

* Change the new messages' ids

Now are UUIDs generated with `node-uuid` and is possible to change this
behavior using `messageIdGenerator` prop.

* fixed chat height bug

* Refactor utils into stand-alone functions

* Improve readability of utils

* Keep improving readability of utils

* Add utils to root exports

* Add prop onInputTextChanged on GiftedChat API and help fix FaridSafi#286

* Maintain backward compatibility with deprecation warning

* Add eslint script (extends airbnb + react + react-native)

Currently 506 errors, 7 warnings :D

* Upgrade to eslint config v0.2.3

Removed a few unnecessarily strict rules, so we're
down to 486 errors now.

* Add react-native-lightbox for enlarging chat images

* Add navigator to propTypes

* Use a commit hash to fix Lightbox warning [Android]

Currently the fix is unpublished.

* Remove touch events and external keyboard dependency

* Bump RN version

* Remove commented code

* Downgrade RN version

* Enabling access to Library

Example crashes when you want to choose an image via „choose from
library“ . Fixed that.  Example should work with this edit like

* Remove dependency from package.json

* Update property

Deprecated property true for keyboardShouldPersistTaps

* Update property for Gifted Chat

Deprecated property true for keyboardShouldPersistTaps

* Add 'onPressActionButton' prop

* Add 'imageProps' prop, passed through to <Image>

* Use 'lightboxProps' instead of just 'navigator'

* config ListView props support

* fix warning for Avatar

Warning: Failed prop type: Invalid prop `left` of type `object` supplied to `Avatar`, expected `number`.
Bad object: {
  "left": {
    "borderWidth": 1,
    "borderColor": "#236CC3"

* avoid listViewProps to override render methd and datasources

* Add listViewPoprs description to README

* add listViewProps to default props and propTypes

* Downgrade RN version to original

* Update prop validation for keyboardShouldPersistTaps

* Update Readme

* Update RN version to 0.40

* readme for 0.1.0

* bump npm versions

* Improve send message performance

* add missing props to inner message components

* v0.1.0

* fix for npm dependency

* node-uuid -> uuid

* v0.1.1

* Create GiftedChatInteractionManager.js

* Update GiftedChat.js

* v0.1.2

* v0.1.3

* render avatar on top

* Remove duplicated enableEmptySections

* If the keyboard has been dismissed and the user sends a message, the text input tool bar can be rendered incorrectly due to the bottom offset

* Allow minimum input tool bar height to be configurable in properties

* Update Bubble.js

* Export MessageContainer in GiftedChat

* fix for _messageContainerRef === null

* Bubble.js: Default value for prop bottomContainerStyle

* Applying fixes per comments

* rename @exponent to @expo

* v0.1.4

* image source add number type

* formatting

* Bump react-native-communications version to 2.2.1

* Support for orientation changes.

Turned on onLayout handler for all platforms.

Android only: on-screen keyboard resized main container and has own height.
So for calculate the messages container height need ignore keyboard height.

* Fix messagesContainerHeight resetting on orientation change

By using the same formula for messagesContainerHeight
in onMainViewLayout as everywhere else.

* Factor out repeated math into getBasicMessagesContainerHeight()

* Factor out repeated math into getMessagesContainerHeightWithKeyboard()

* Add onPressAvatar prop

* Pass currentMessage to onLongPress callback

* Add maxLength parameter for Composer input

* fix-extra spacing shown when avatar is not rendered

* fix isSameDay function

* Update @expo/react-native-action-sheet

* incorporate review and documentation

* incorporate review

* Fix default rendering of avatars (FaridSafi#479)

* Default renderAvatar to undefined so that it renders by default

Fixes bug introduced in FaridSafi#447

* Ignore .idea for IntelliJ

* Commit yarn.lock files

No changes to dependencies

* Remove `runAfterInteractions` during init (FaridSafi#380)

Fixes FaridSafi#377.
Fixes FaridSafi#228.

* 0.1.5

* Upgrade all dependencies to latest

And RN v0.45 on the example app

* [Example] Remove extraneous files when installing

They get copied by Yarn, or libraries that publish their babel configs

* Temporarily fork shallowequal to get rid of babel config


* Upgrade shallowequal now that PR is merged

* Change deprecated View.propTypes to ViewPropTypes (FaridSafi#478)

* [Example] Migrate to react-native-maps (MapView was deprecated)

* [Example] Temporarily fork react-native-nav to update ViewPropTypes


* Temporarily fork RN-action-sheet for deprecated React.PropTypes


* Update README with new RN dependency requirements

* Clean up README

* 0.2.0

* [Example] Run react-native upgrade for RN v0.45

* [Example] Add back RCTCameraRoll.xcodeproj for camera roll picker

* Replace deprecated `onChange` with `onContentSizeChange` (FaridSafi#500)

* Migrate from deprecated React.PropTypes to prop-types (FaridSafi#508)

* Commit new prop-types dependency in yarn.lock

* Fix URLs that get linkified but are missing a scheme (FaridSafi#506)

* Add code comment and error logging for MessageText.onUrlPress

* Clarify Android installation steps for CRNA/Expo (FaridSafi#482)

Explain that no native project changes are required in Create React Native App or Expo

* Fix janky fullscreen Lightbox images by using flex: 1 (FaridSafi#467)

Setting image to full width/height makes animation returning image to previous spot look extremely awkward. flex: 1 allows image to resize between thumbnail and fullscreen as was intended with lightbox.

* Add `timeFormat` prop (FaridSafi#273)

* Added property for time format

* Added property to readme

* Add `dateFormat` prop

* Add .watchmanconfig and README notes for local development

* [Example] Upgrade to RN v0.46 to verify compatibility

* 0.2.1

* Add some README badges

* 0.2.2

* Remove dead code introduced by FaridSafi#467 (FaridSafi#509)

* Add 'showUserAvatar' prop; don't render null avatars (FaridSafi#511)

* fix(Avatar): display user chat message avatar

- check if current message user has an avatar to display
- don't base the logic of the display of the avatar on the user object id

Issue: FaridSafi#495
Issue URL: FaridSafi#495

* Only return null if avatar is set to null (otherwise render initials)

* Add 'showUserAvatar' prop, default to false

* Rearrange existing propTypes to match the README

* Add missing props to GiftedChat root component

* 0.2.3

* Accept a 'text' prop to override the internal state (e.g. redux)

* Add Redux notes to the README

* 0.2.4

* Use both onChange and onContentSizeChange to support Android RN <0.46

* 0.2.5

* Fix call/text onPhonePress actions ordering (FaridSafi#521)

* Fix email sending recipient array (FaridSafi#522)

* Fix minor typo in README (FaridSafi#517)

* Fix `Linking.canOpenURL` usage (FaridSafi#516)

* Add children props to Send component (FaridSafi#487)

* Simplify logic for Send component children

* 0.2.6

* Add imperative focusTextInput() method

* 0.2.7

* Add `parsePatterns` prop for custom message links (FaridSafi#551)

* Add a more generic function prop `parsePatterns`

* Clean up README

* [Example] Don't remove extraneous git dir

Just in case someone is mistakenly trying to use symlinks with RN.

* [Example] Update path to scripts/ for RN v0.46

* Use better doc link for onLongPress (FaridSafi#573)

* Fixed doc link for long press

* Hard-code date for code link

* rm test command

* clean up

* fix: use newer version of parsed-text which has fixed propTypes

* fix: use newer version of lightbox which has fixed propTypes

* fix: use newer invertible-scroll-view that has fixed propTypes for react 16

* fix: do not account for keyboard here, as we have our own component in differ which does that

* reimplement inputToolbar ref

* reimplement listview ref

* add proptype for renderSuggestions
Copy link

ryskiz commented Nov 4, 2017

For some reason @cooperka , I'm getting an error saying that the send component is undefined. I'm not sending a bound function.

Copy link

mafiusu commented Nov 13, 2017

@ryskiz you have to import Send from 'react-native-gifted-chat like this code-line.
import { GiftedChat, Actions, SystemMessage, Send } from 'react-native-gifted-chat';

Copy link

How to center the image. Does image needs be given dimensions?

Copy link

skizzo commented Feb 19, 2019

Similar to @pavanmehta91 's question, I'd like to know how I can stretch my custom component to all of the input's height. Is that somehow possible?

Copy link

@skizzo @pavanmehta91 this is how I've done it.

renderSend={(props) => (
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
                width: 40,
                height: 40,

Copy link

I resolved vertical center issue like this:

  renderSend = (props) => {
    return (
        <SendIcon width={22.7} height={22.38} />


  sendContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    marginRight: 15,

Don't forget to import Send
import { GiftedChat, Send } from 'react-native-gifted-chat';

In my case SendIcon is svg, so you can use your custom styling inside Send component.

Copy link

AMoktar commented Jan 29, 2021

@latovicalmin is SendIcon part of 'react'native'gifted-chat' ?

Copy link

chinyart commented Feb 9, 2021

@latovicalmin is SendIcon part of 'react'native'gifted-chat' ?


Copy link

iway1 commented Jul 21, 2021

Just remember to set alwaysShowSend={true} if you want the send button to always be present! this confused me for a few minutes.

Copy link

FaisalKhawaj commented Aug 29, 2021

 I can't send message when I click on my button image:
 Here is the code
                    placeholder="Type any text here"
                    onSend={messages => onSend(messages)}
                        _id: 1,
                    renderSend={props => {
                        return (
                            <Send {...props}>
                                <TouchableOpacity onPress={(messages) => onSend(messages)} style={styles.sendBtn}>
                                    <Image style={{ width: 25, height: 25 }} resizeMode="contain" source={require('../../assets/images/send.png')} />

renderBubble={props => {
return (

                                    right: {
                                        padding: 10,
                                        color: '#000',

                                    left: {

                                        color: '#ffff',
                                        padding: 10,

                                    left: styles.leftTextView,
                                    right: styles.rightTextView,


                    renderComposer={(props) => {
                        const { text, messageIdGenerator, user, onSend } = props

                        return (
                            <View style={{
                                backgroundColor: '#FFFF',
                                flexDirection: 'row',
                                flex: 1,
                                // width: wp('90%'),
                                alignItems: "center",

                                        marginHorizontal: 2

                                    <Icon name="mic-outline" size={20} color={greenText} />

                                    <FontAwesome name="image" size={20} color={greenText} />
                                <View style={{
                                    borderColor: LightGreyColor,
                                    backgroundColor: LightGreyColor,
                                    borderWidth: 1,
                                    width: wp('70%'),
                                    margin: 2,
                                    borderRadius: 25, flexDirection: 'row'

                                    <Composer {...props} />

                                        // }}
                                        style={{ alignSelf: 'center', marginLeft: 10 }}>
                                        <Icon name="happy-outline" size={30}
                                                alignSelf: "center",
                                                marginRight: 5
                                            }} />
                                    {/* {
                                        text == '' ? (<>

                                        ) : (
                                                    marginHorizontal: '4%',
                                                    alignSelf: 'center'
                                                <Icon name="send" size={30} color="#007AFF" />
                                    } */}


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet