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

fix: add ability to use custom flatlist implementation #173

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

arpitv96171
Copy link
Contributor

Add ability to use custom Flatlist as component with example

Before: Flatlist does not scroll when used inside bottomsheet

Screen.Recording.2024-07-27.at.22.31.55.mov

After: Using BottomSheetFlatlist which scrolls when used inside @gorhom/bottom-sheet

Screen.Recording.2024-07-27.at.22.32.16.mov

@arpitv96171
Copy link
Contributor Author

updated patch version based on suggestion: #170 (comment)

Please let me know if it is to be reverted

If this patch version update is to be kept, this PR is to be merged after #172

@arpitv96171
Copy link
Contributor Author

arpitv96171 commented Jul 29, 2024

@17Amir17 I've updated this PR too.

Previous PR to refer comments: #170

Copy link
Collaborator

@17Amir17 17Amir17 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a ton for the pr, however we found some issues that are blocking this

behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={exampleStyles.keyboardAvoidingView}
>
<Toolbar editor={editor} ListComponent={BottomSheetFlatList} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On IOS the toolbar is not visible

Screenshot 2024-07-29 at 14 12 40

On android we are unable to scroll inside the text editor

Screen.Recording.2024-07-29.at.14.16.59.mov

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@17Amir17 I have updated the PR. You can re-review it.

iOS:

Screen.Recording.2024-08-01.at.00.11.29.mov

Android:

Screen.Recording.2024-08-01.at.00.12.12.mov

Copy link
Collaborator

@17Amir17 17Amir17 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for updating - unfortunately I still see a few issues

When testing I got a bunch of these warnings:

 WARN  [Reanimated] Tried to modify key `reduceMotion` of an object which has been already passed to a worklet. See 
https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-modify-key-of-an-object-which-has-been-converted-to-a-shareable 
for more details.

} from 'react-native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

const useKeyboard = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be able to import this from @10play/tentap-editor

return keyboardHeight;
};

export const WithBottomSheet = ({}: NativeStackScreenProps<any, any, any>) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am still unable to scroll on Android - seems like the scroll is getting handled by the drawer

Screen.Recording.2024-08-04.at.14.31.44.mov

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

Successfully merging this pull request may close these issues.

2 participants