Is there a way to modify the label prop from the gifted-chat component?

user_11530349 0
Viewed 741

I am using Gifted Chat https://github.com/FaridSafi/react-native-gifted-chat/ but I need some labels to be in another language, namely the LoadEarlier label found here: https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/LoadEarlier.tsx

defined here:

  static defaultProps = {
    onLoadEarlier: () => {},
    isLoadingEarlier: false,
    label: 'Load earlier messages',
    containerStyle: {},
    wrapperStyle: {},
    textStyle: {},
    activityIndicatorStyle: {},
    activityIndicatorColor: 'white',
    activityIndicatorSize: 'small',
  }

  static propTypes = {
    onLoadEarlier: PropTypes.func,
    isLoadingEarlier: PropTypes.bool,
    label: PropTypes.string,
    containerStyle: ViewPropTypes.style,
    wrapperStyle: ViewPropTypes.style,
    textStyle: PropTypes.any,
    activityIndicatorStyle: ViewPropTypes.style,
    activityIndicatorColor: PropTypes.string,
    activityIndicatorSize: PropTypes.string,
  }

I am using the chat like intended by importing the react-native-gifted-chat component and then just using <GiftedChat /> as part of the props it has:

loadEarlier={true}
          isLoadingEarlier={false}

I want to know if there's some way I can reach that label to modify the "Load earlier messages" to another language. I can't figure it out.

react-native components
1 Answers

Looks like you should use the renderLoadEarlier prop to render a <LoadEarlier> button with a custom label.

import it-

import { LoadEarlier } from 'react-native-gifted-chat';

then in render -

    render() {

        const myLoadEarlier = (props) => <LoadEarlier {...props} label="Custom Load Earlier Label" />;

        return(
            <View>
                ...
                <GiftedChat
                    ...
                    renderLoadEarlier={myLoadEarlier}
                />
            </View>
        );
   }

Hope this helps

user_117102160
Related