Skip to content

Commit 8607762

Browse files
kirillzyuskokirillzyusko
committed
fix: Fabric build
1 parent 53d688d commit 8607762

File tree

11 files changed

+238
-2
lines changed

11 files changed

+238
-2
lines changed

‎FabricExample/src/constants/screenNames.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,5 @@ export enum ScreenNames {
2626
USE_KEYBOARD_STATE = "USE_KEYBOARD_STATE",
2727
LIQUID_KEYBOARD = "LIQUID_KEYBOARD",
2828
KEYBOARD_SHARED_TRANSITIONS = "KEYBOARD_SHARED_TRANSITIONS",
29+
KEYBOARD_EXTENDER = "KEYBOARD_EXTENDER",
2930
}

‎FabricExample/src/navigation/ExamplesStack/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import InteractiveKeyboard from "../../screens/Examples/InteractiveKeyboard";
1313
import InteractiveKeyboardIOS from "../../screens/Examples/InteractiveKeyboardIOS";
1414
import KeyboardAnimation from "../../screens/Examples/KeyboardAnimation";
1515
import KeyboardAvoidingViewExample from "../../screens/Examples/KeyboardAvoidingView";
16+
import KeyboardExtender from "../../screens/Examples/KeyboardExtender";
1617
import KeyboardSharedTransitionExample from "../../screens/Examples/KeyboardSharedTransitions";
1718
import UseKeyboardState from "../../screens/Examples/KeyboardStateHook";
1819
import LiquidKeyboardExample from "../../screens/Examples/LiquidKeyboard";
@@ -52,6 +53,7 @@ export type ExamplesStackParamList = {
5253
[ScreenNames.USE_KEYBOARD_STATE]: undefined;
5354
[ScreenNames.LIQUID_KEYBOARD]: undefined;
5455
[ScreenNames.KEYBOARD_SHARED_TRANSITIONS]: undefined;
56+
[ScreenNames.KEYBOARD_EXTENDER]: undefined;
5557
};
5658

5759
const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -132,6 +134,10 @@ const options = {
132134
title: "Keyboard shared transitions",
133135
headerShown: false,
134136
},
137+
[ScreenNames.KEYBOARD_EXTENDER]: {
138+
title: "Keyboard Extender",
139+
headerShown: false,
140+
},
135141
};
136142

137143
const ExamplesStack = () => (
@@ -256,6 +262,11 @@ const ExamplesStack = () => (
256262
name={ScreenNames.KEYBOARD_SHARED_TRANSITIONS}
257263
options={options[ScreenNames.KEYBOARD_SHARED_TRANSITIONS]}
258264
/>
265+
<Stack.Screen
266+
component={KeyboardExtender}
267+
name={ScreenNames.KEYBOARD_EXTENDER}
268+
options={options[ScreenNames.KEYBOARD_EXTENDER]}
269+
/>
259270
</Stack.Navigator>
260271
);
261272

‎FabricExample/src/screens/Examples/KeyboardExtender/background.jpg

15.8 KB
Loading

‎FabricExample/src/screens/Examples/KeyboardExtender/index.tsx

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React, { useEffect, useState } from "react";
2+
import {
3+
Alert,
4+
Image,
5+
Keyboard,
6+
StyleSheet,
7+
Text,
8+
TextInput,
9+
TouchableOpacity,
10+
TouchableWithoutFeedback,
11+
} from "react-native";
12+
import { KeyboardExtender } from "react-native-keyboard-controller";
13+
import Reanimated, {
14+
useAnimatedStyle,
15+
useSharedValue,
16+
withTiming,
17+
} from "react-native-reanimated";
18+
import { SafeAreaView } from "react-native-safe-area-context";
19+
20+
// TODO: remove _touchHandler when view gets detached from keyboard?
21+
// TODO: test how GestureHandler works there
22+
// TODO: don't overwrite existing inputAccessoryView?
23+
24+
export default function KeyboardExtendExample() {
25+
const [showExtend, setShowExtend] = useState(true);
26+
const opacity = useSharedValue(1);
27+
28+
useEffect(() => {
29+
opacity.set(withTiming(showExtend ? 1 : 0));
30+
}, [showExtend]);
31+
32+
const animatedStyle = useAnimatedStyle(
33+
() => ({
34+
opacity: opacity.value,
35+
}),
36+
[],
37+
);
38+
39+
return (
40+
<>
41+
<Image source={require("./background.jpg")} style={styles.background} />
42+
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
43+
<SafeAreaView edges={["top"]} style={styles.container}>
44+
<TextInput
45+
keyboardType="numeric"
46+
placeholder="Donation amount"
47+
placeholderTextColor="#5c5c5c"
48+
style={styles.input}
49+
testID="donation_amount"
50+
onFocus={() => setShowExtend(true)}
51+
/>
52+
<TextInput
53+
keyboardType="numeric"
54+
placeholder="Postal code"
55+
placeholderTextColor="#5c5c5c"
56+
style={styles.input}
57+
testID="postal_code"
58+
onFocus={() => setShowExtend(false)}
59+
/>
60+
</SafeAreaView>
61+
</TouchableWithoutFeedback>
62+
<KeyboardExtender enabled={showExtend}>
63+
<Reanimated.View style={[styles.keyboardExtend, animatedStyle]}>
64+
<TouchableOpacity
65+
testID="donation_10"
66+
onPress={() => Alert.alert("10 dollars")}
67+
>
68+
<Text style={styles.priceText}>10$</Text>
69+
</TouchableOpacity>
70+
<TouchableOpacity
71+
testID="donation_20"
72+
onPress={() => Alert.alert("20 dollars")}
73+
>
74+
<Text style={styles.priceText}>20$</Text>
75+
</TouchableOpacity>
76+
<TouchableOpacity
77+
testID="donation_50"
78+
onPress={() => Alert.alert("50 dollars")}
79+
>
80+
<Text style={styles.priceText}>50$</Text>
81+
</TouchableOpacity>
82+
</Reanimated.View>
83+
</KeyboardExtender>
84+
</>
85+
);
86+
}
87+
88+
const styles = StyleSheet.create({
89+
background: {
90+
...StyleSheet.absoluteFillObject,
91+
flex: 1,
92+
width: "100%",
93+
},
94+
container: {
95+
flex: 1,
96+
paddingHorizontal: 20,
97+
},
98+
input: {
99+
height: 40,
100+
borderWidth: 2,
101+
borderColor: "#1c1c1c",
102+
borderRadius: 8,
103+
padding: 10,
104+
fontSize: 18,
105+
marginBottom: 20,
106+
},
107+
keyboardExtend: {
108+
width: "100%",
109+
flexDirection: "row",
110+
justifyContent: "space-around",
111+
alignItems: "center",
112+
},
113+
priceText: {
114+
color: "black",
115+
fontSize: 18,
116+
fontWeight: "600",
117+
padding: 20,
118+
},
119+
});

‎FabricExample/src/screens/Examples/Main/constants.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,4 +147,10 @@ export const examples: Example[] = [
147147
info: ScreenNames.KEYBOARD_SHARED_TRANSITIONS,
148148
icons: "🔄",
149149
},
150+
{
151+
title: "Keyboard Extender",
152+
testID: "keyboard_extender",
153+
info: ScreenNames.KEYBOARD_EXTENDER,
154+
icons: "🧩",
155+
},
150156
];

‎common/cpp/react/renderer/components/reactnativekeyboardcontroller/RNKCKeyboardExtenderComponentDescriptor.h

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
//
2+
// RNKCKeyboardExtenderComponentDescriptor.h
3+
// Pods
4+
//
5+
// Created by Kiryl Ziusko on 25/06/2025.
6+
//
7+
8+
#pragma once
9+
10+
#include "RNKCKeyboardExtenderShadowNode.h"
11+
12+
#include <react/debug/react_native_assert.h>
13+
#include <react/renderer/components/reactnativekeyboardcontroller/Props.h>
14+
#include <react/renderer/core/ConcreteComponentDescriptor.h>
15+
16+
namespace facebook::react {
17+
class KeyboardExtenderComponentDescriptor final
18+
: public ConcreteComponentDescriptor<KeyboardExtenderShadowNode> {
19+
public:
20+
using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
21+
void adopt(ShadowNode &shadowNode) const override {
22+
react_native_assert(dynamic_cast<KeyboardExtenderShadowNode *>(&shadowNode));
23+
ConcreteComponentDescriptor::adopt(shadowNode);
24+
}
25+
};
26+
27+
} // namespace facebook::react

‎common/cpp/react/renderer/components/reactnativekeyboardcontroller/RNKCKeyboardExtenderShadowNode.cpp

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
//
2+
// RNKCKeyboardExtenderShadowNode.cpp
3+
// Pods
4+
//
5+
// Created by Kiryl Ziusko on 25/06/2025.
6+
//
7+
8+
#include "RNKCKeyboardExtenderShadowNode.h"
9+
10+
namespace facebook::react {
11+
12+
extern const char KeyboardExtenderComponentName[] = "KeyboardExtender";
13+
14+
} // namespace facebook::react

‎common/cpp/react/renderer/components/reactnativekeyboardcontroller/RNKCKeyboardExtenderShadowNode.h

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
//
2+
// RNKCKeyboardExtenderShadowNode.h
3+
// Pods
4+
//
5+
// Created by Kiryl Ziusko on 25/06/2025.
6+
//
7+
8+
#pragma once
9+
10+
#include "RNKCKeyboardExtenderState.h"
11+
12+
#include <react/renderer/components/reactnativekeyboardcontroller/EventEmitters.h>
13+
#include <react/renderer/components/reactnativekeyboardcontroller/Props.h>
14+
#include <react/renderer/components/view/ConcreteViewShadowNode.h>
15+
#include <jsi/jsi.h>
16+
17+
namespace facebook::react {
18+
19+
JSI_EXPORT extern const char KeyboardExtenderComponentName[];
20+
21+
/*
22+
* `ShadowNode` for <KeyboardExtender> component.
23+
*/
24+
using KeyboardExtenderShadowNode = ConcreteViewShadowNode<
25+
KeyboardExtenderComponentName,
26+
KeyboardExtenderProps,
27+
KeyboardExtenderEventEmitter,
28+
KeyboardExtenderState>;
29+
30+
} // namespace facebook::react

‎common/cpp/react/renderer/components/reactnativekeyboardcontroller/RNKCKeyboardExtenderState.h

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
//
2+
// RNKCKeyboardExtenderState.h
3+
// Pods
4+
//
5+
// Created by Kiryl Ziusko on 25/06/2025.
6+
//
7+
8+
#pragma once
9+
10+
#ifdef ANDROID
11+
#include <folly/dynamic.h>
12+
#endif
13+
14+
namespace facebook::react {
15+
16+
class KeyboardExtenderState {
17+
public:
18+
KeyboardExtenderState() = default;
19+
20+
#ifdef ANDROID
21+
KeyboardExtenderState(KeyboardExtenderState const &previousState, folly::dynamic data) {}
22+
folly::dynamic getDynamic() const {
23+
return {};
24+
}
25+
#endif
26+
};
27+
28+
} // namespace facebook::react

‎ios/views/KeyboardExtenderManager.mm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
233233
const auto &newViewProps = *std::static_pointer_cast<const KeyboardExtenderProps>(props);
234234

235235
if (newViewProps.enabled != oldViewProps.enabled) {
236-
// TODO: implement
236+
[self updateEnabledState:newViewProps.enabled];
237237
}
238238

239239
[super updateProps:props oldProps:oldProps];

‎src/specs/KeyboardExtenderNativeComponent.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { HostComponent } from "react-native";
44
import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
55

66
export interface NativeProps extends ViewProps {
7-
visible?: boolean;
7+
enabled?: boolean;
88
}
99

1010
export default codegenNativeComponent<NativeProps>("KeyboardExtender", {

0 commit comments

Comments
 (0)