Skip to content

Commit 2969c7b

Browse files
authored
[Fabric] Implement keyboardDismissMode in ScrollView (#14723)
* [Fabric] Implement keyboardDismissMode in ScrollView * Change files * Resolve comments * Update ScrollViewComponentView.cpp
1 parent 56637fc commit 2969c7b

File tree

3 files changed

+58
-17
lines changed

3 files changed

+58
-17
lines changed
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "[Fabric] Implement keyboardDismissMode in ScrollView",
4+
"packageName": "react-native-windows",
5+
"email": "54227869+anupriya13@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

packages/playground/Samples/scrollViewSnapSample.tsx

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ScrollView,
1515
TouchableOpacity,
1616
RefreshControl,
17+
TextInput,
1718
} from 'react-native';
1819

1920
function wait(timeout: number) {
@@ -247,23 +248,6 @@ export default class Bootstrap extends React.Component<{}, any> {
247248
value={this.state.pagingEnabled}
248249
/>
249250
</View>
250-
<View
251-
style={{
252-
flexDirection: 'column',
253-
alignSelf: 'stretch',
254-
justifyContent: 'center',
255-
padding: 20,
256-
}}>
257-
<Text>
258-
{'KeyboardDismiss: '.concat(
259-
this.state.keyboardDismiss ? 'on-drag' : 'none',
260-
)}
261-
</Text>
262-
<Switch
263-
onValueChange={this.toggleSwitch8}
264-
value={this.state.keyboardDismiss}
265-
/>
266-
</View>
267251
</View>
268252
<View style={{flex: 0.8, alignSelf: 'center', flexDirection: 'column'}}>
269253
<ScrollView
@@ -312,6 +296,45 @@ export default class Bootstrap extends React.Component<{}, any> {
312296
{this.makeItems(20, [styles.itemWrapper])}
313297
</ScrollView>
314298
</View>
299+
<View
300+
style={{
301+
flexDirection: 'column',
302+
alignSelf: 'stretch',
303+
justifyContent: 'center',
304+
padding: 20,
305+
}}>
306+
<Text>
307+
{'KeyboardDismiss: '.concat(
308+
this.state.keyboardDismiss ? 'on-drag' : 'none',
309+
)}
310+
</Text>
311+
<Switch
312+
onValueChange={this.toggleSwitch8}
313+
value={this.state.keyboardDismiss}
314+
/>
315+
</View>
316+
<View style={{height: 200}}>
317+
<ScrollView
318+
style={{borderWidth: 2, borderColor: 'green'}}
319+
keyboardDismissMode={
320+
this.state.keyboardDismiss ? 'on-drag' : 'none'
321+
}
322+
contentContainerStyle={{padding: 20}}>
323+
<TextInput
324+
style={{
325+
borderWidth: 1,
326+
marginBottom: 20,
327+
padding: 8,
328+
height: 40,
329+
}}
330+
placeholder="Touch here for keyboard"
331+
/>
332+
<Text>Scroll to test keyboard dismiss behavior.</Text>
333+
<View style={{height: 100, marginTop: 20}}>
334+
<Text>Scroll down to see more empty content.</Text>
335+
</View>
336+
</ScrollView>
337+
</View>
315338
</View>
316339
);
317340

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
#pragma warning(pop)
1616

1717
#include <windows.ui.composition.interop.h>
18+
#include <winrt/Windows.UI.ViewManagement.Core.h>
1819

1920
#include <AutoDraw.h>
2021
#include <Fabric/DWriteHelpers.h>
@@ -1276,6 +1277,16 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
12761277
auto now = std::chrono::steady_clock::now();
12771278
auto elapsed = std::chrono::duration_cast<std::chrono::duration<double>>(now - m_lastScrollEventTime).count();
12781279

1280+
// Dismiss keyboard if mode is "on-drag"
1281+
auto keyboardDismissMode =
1282+
std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->keyboardDismissMode;
1283+
if (keyboardDismissMode == facebook::react::ScrollViewKeyboardDismissMode::OnDrag) {
1284+
auto coreInputView = winrt::Windows::UI::ViewManagement::Core::CoreInputView::GetForCurrentView();
1285+
if (coreInputView) {
1286+
coreInputView.TryHide();
1287+
}
1288+
}
1289+
12791290
if (m_allowNextScrollNoMatterWhat ||
12801291
(m_scrollEventThrottle < std::max(std::chrono::duration<double>(0.017).count(), elapsed))) {
12811292
updateStateWithContentOffset();

0 commit comments

Comments
 (0)