Changing the locale dynamically

[Frexuz]

Issue Description

GiftedChat does not re-render when locale is a prop (from Redux in my case)

Steps to Reproduce / Code Snippets

1. Initial locale zh-cn
2. Go to settings and change to en-gb
3. Go back to Chat, date still zh-cn
4. Go back to "Conversation list"
5. Go to the Chat again, it re-renders properly and the language is now correct (en-gb)

Simplified example

require('moment/locale/en-gb')
require('moment/locale/zh-cn')

const mapStateToProps = (state) => ({
  appLanguage: state.language.appLanguage
})

class ChatScreen extends Component {
  render () {
    const locale = this.props.appLanguage.key
    return <GiftedChat
          user={{
          _id: currentUser.id
          }}
          messages={messages}
          locale={locale}
        />
  }
}

export default connect(mapStateToProps)(ChatScreen)

Expected Results

GiftedChat should re-render

Additional Information

• React Native version: 0.49.3
• react-native-gifted-chat version: ^0.2.7
• Platform(s) (iOS, Android, or both?): ios emulator

[Frexuz]

I'd appreciate any insights.. We're actually closing in our product launch :) This is one of our outstanding "bugs".

[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.

[olegderecha]

Did not find the 'normal' solution, but needed to resolve it. To make it work, it is needed to re-render/init chat. I did it the next way:

import 'dayjs/locale/es'

const { locale } = useSelector(state => state. ...)
const [ isChatInitialized, setIsChatInitialized ] = useState(true)

useEffect(() => {
    if (locale) {
      setIsChatInitialized(false)
      setTimeout(() => setIsChatInitialized(true), 250)
    }
  }, [locale])

<View>
  {isChatInitialized &&
    <GiftedChat
      locale={locale}
     ...
    />
  }
</View>