Skip to content

Commit

Permalink
Merge pull request #2402 from FaridSafi/functional-example
Browse files Browse the repository at this point in the history
refactor(example): change to functional component
  • Loading branch information
Johan-dutoit authored Jun 7, 2023
2 parents cb997c1 + 8c095b7 commit 32f0a34
Show file tree
Hide file tree
Showing 4 changed files with 265 additions and 246 deletions.
19 changes: 12 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,14 @@
</p>
</p>

## The future of GiftedChat 🎉
## The future of GiftedChat 🎉

Please give us your advice: [Related PR](https://github.com/FaridSafi/react-native-gifted-chat/pull/1775)

## Please vote

**GiftedChat** depends on other packages and some needs a boost, please vote for PRs will improve it, thanks:

- https://github.com/watadarkstar/react-native-typing-animation/issues/18

## Features
Expand Down Expand Up @@ -100,23 +102,24 @@ Please give us your advice: [Related PR](https://github.com/FaridSafi/react-nati
- Use version `0.0.10` for RN `< 0.40.0`

## Testing

`Test_ID` is exported as constants that can be used in your testing library of choice

Gifted Chat uses `onLayout` to determine the height of the chat container. To trigger `onLayout` during your tests, you can run the following bits of code.
Gifted Chat uses `onLayout` to determine the height of the chat container. To trigger `onLayout` during your tests, you can run the following bits of code.

```typescript
const WIDTH = 200 // or any number
const HEIGHT = 2000 // or any number

const loadingWrapper = getByTestId(Test_ID.LOADING.WRAPPER)
fireEvent(loadingWrapper, "layout", {
const loadingWrapper = getByTestId(TEST_ID.LOADING_WRAPPER)
fireEvent(loadingWrapper, 'layout', {
nativeEvent: {
layout: {
width: WIDTH,
height: HEIGHT,
},
},
});
})
```

## Installation
Expand All @@ -143,7 +146,7 @@ import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function Example() {
const [messages, setMessages] = useState([]);
const [messages, setMessages] = useState([])

useEffect(() => {
setMessages([
Expand All @@ -161,7 +164,9 @@ export function Example() {
}, [])

const onSend = useCallback((messages = []) => {
setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
setMessages(previousMessages =>
GiftedChat.append(previousMessages, messages),
)
}, [])

return (
Expand Down
Loading

0 comments on commit 32f0a34

Please sign in to comment.