Skip to content

Commit

Permalink
refactor: port to fabric
Browse files Browse the repository at this point in the history
  • Loading branch information
kirillzyusko committed Oct 29, 2023
1 parent b2b93a6 commit 3044e02
Show file tree
Hide file tree
Showing 12 changed files with 104 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import Reanimated, {
} from 'react-native-reanimated';
import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler';

const BOTTOM_OFFSET = 50;
type KeyboardAwareScrollViewProps = {
bottomOffset?: number;
} & ScrollViewProps;

/**
* Everything begins from `onStart` handler. This handler is called every time,
Expand Down Expand Up @@ -53,8 +55,9 @@ const BOTTOM_OFFSET = 50;
* +============================+ +============================+ +=====================================+
*
*/
const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
children,
bottomOffset = 0,
...rest
}) => {
const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
Expand Down Expand Up @@ -85,11 +88,11 @@ const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
const visibleRect = height - keyboardHeight.value;
const point = (layout.value?.layout.absoluteY || 0) + (layout.value?.layout.height || 0);

if (visibleRect - point <= BOTTOM_OFFSET) {
if (visibleRect - point <= bottomOffset) {
const interpolatedScrollTo = interpolate(
e,
[initialKeyboardSize.value, keyboardHeight.value],
[0, keyboardHeight.value - (height - point) + BOTTOM_OFFSET]
[0, keyboardHeight.value - (height - point) + bottomOffset]
);
const targetScrollY =
Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
Expand All @@ -99,7 +102,7 @@ const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
}

return 0;
}, []);
}, [bottomOffset]);

useSmoothKeyboardHandler(
{
Expand Down Expand Up @@ -158,7 +161,7 @@ const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
scrollPosition.value = position.value;
},
},
[height]
[height, maybeScroll]
);

useAnimatedReaction(() => input.value, (current, previous) => {
Expand Down
1 change: 1 addition & 0 deletions FabricExample/src/components/AwareScrollView/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "./KeyboardAwareScrollView";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const TextInput = (props: TextInputProps) => {
placeholderTextColor="#6c6c6c"
style={styles.container}
multiline
numberOfLines={10}
numberOfLines={2}
{...props}
placeholder={`${props.placeholder} (${props.keyboardType === 'default' ? 'text' : 'numeric'})`}
/>
Expand Down
1 change: 1 addition & 0 deletions FabricExample/src/constants/screenNames.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export enum ScreenNames {
REANIMATED_CHAT = 'REANIMATED_CHAT',
EVENTS = 'EVENTS',
AWARE_SCROLL_VIEW = 'AWARE_SCROLL_VIEW',
AWARE_SCROLL_VIEW_STICKY_FOOTER = 'AWARE_SCROLL_VIEW_STICKY_FOOTER',
STATUS_BAR = 'STATUS_BAR',
LOTTIE = 'LOTTIE',
EXAMPLES_STACK = 'EXAMPLES_STACK',
Expand Down
10 changes: 10 additions & 0 deletions FabricExample/src/navigation/ExamplesStack/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ import InteractiveKeyboardIOS from '../../screens/Examples/InteractiveKeyboardIO
import NativeStack from '../NestedStack';
import KeyboardAvoidingViewExample from '../../screens/Examples/KeyboardAvoidingView';
import EnabledDisabled from '../../screens/Examples/EnabledDisabled';
import AwareScrollViewStickyFooter from '../../screens/Examples/AwareScrollViewStickyFooter';

export type ExamplesStackParamList = {
[ScreenNames.ANIMATED_EXAMPLE]: undefined;
[ScreenNames.REANIMATED_CHAT]: undefined;
[ScreenNames.EVENTS]: undefined;
[ScreenNames.AWARE_SCROLL_VIEW]: undefined;
[ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER]: undefined;
[ScreenNames.STATUS_BAR]: undefined;
[ScreenNames.LOTTIE]: undefined;
[ScreenNames.NON_UI_PROPS]: undefined;
Expand All @@ -46,6 +48,9 @@ const options = {
[ScreenNames.AWARE_SCROLL_VIEW]: {
title: 'Aware scroll view',
},
[ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER]: {
title: 'Aware scroll view sticky footer',
},
[ScreenNames.STATUS_BAR]: {
headerShown: false,
title: 'Status bar manipulation',
Expand Down Expand Up @@ -95,6 +100,11 @@ const ExamplesStack = () => (
component={AwareScrollView}
options={options[ScreenNames.AWARE_SCROLL_VIEW]}
/>
<Stack.Screen
name={ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER}
component={AwareScrollViewStickyFooter}
options={options[ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER]}
/>
<Stack.Screen
name={ScreenNames.STATUS_BAR}
component={StatusBar}
Expand Down
6 changes: 3 additions & 3 deletions FabricExample/src/screens/Examples/AwareScrollView/index.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react';
import { useResizeMode } from 'react-native-keyboard-controller';

import KeyboardAwareScrollView from './KeyboardAwareScrollView';
import TextInput from './TextInput';
import KeyboardAwareScrollView from '../../../components/AwareScrollView';
import TextInput from '../../../components/TextInput';
import { styles } from './styles';

export default function AwareScrollView() {
useResizeMode();

return (
<KeyboardAwareScrollView style={styles.container} contentContainerStyle={styles.content}>
<KeyboardAwareScrollView bottomOffset={50} style={styles.container} contentContainerStyle={styles.content}>
{new Array(10).fill(0).map((_, i) => (
<TextInput
key={i}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React, { useCallback, useMemo, useState } from 'react';
import { LayoutChangeEvent, View, Text, Button } from 'react-native';
import { useResizeMode, KeyboardStickyView } from 'react-native-keyboard-controller';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import KeyboardAwareScrollView from '../../../components/AwareScrollView';
import TextInput from '../../../components/TextInput';
import { styles } from './styles';

export default function AwareScrollViewStickyFooter() {
useResizeMode();

const { bottom } = useSafeAreaInsets();
const [footerHeight, setFooterHeight] = useState(0);

const handleLayout = useCallback((evt: LayoutChangeEvent) => {
setFooterHeight(evt.nativeEvent.layout.height);
}, []);
const offset = useMemo(() => ({closed: 0, opened: bottom }), [bottom]);

return (
<View style={[styles.pageContainer, { paddingBottom: bottom }]}>
<KeyboardAwareScrollView
style={styles.container}
contentContainerStyle={styles.content}
bottomOffset={footerHeight + 50}
keyboardShouldPersistTaps="handled"
>
{new Array(10).fill(0).map((_, i) => (
<TextInput
key={i}
placeholder={`TextInput#${i}`}
keyboardType={i % 2 === 0 ? 'numeric' : 'default'}
/>
))}
</KeyboardAwareScrollView>
<KeyboardStickyView offset={offset}>
<View onLayout={handleLayout} style={styles.footer}>
<Text style={styles.footerText}>A mocked sticky footer</Text>
<Button title="Click me" />
</View>
</KeyboardStickyView>
{/*<KeyboardStickyView offset={{closed: -50, opened: bottom - 25}}>
<View style={{position: 'absolute', bottom: 0, right: 30, justifyContent: "flex-end", width: 60, height: 60, borderRadius: 30, backgroundColor: "#002099"}} />
</KeyboardStickyView>*/}
</View>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
container: {
flexGrow: 1,
paddingHorizontal: 16,
},
content: {
paddingTop: 50,
},
pageContainer: {
flex: 1,
},
footer: {
backgroundColor: 'green',
alignItems: 'center',
justifyContent: 'center',
padding: 20,
width: '100%',
gap: 10,
},
footerText: {
color: 'white',
fontWeight: 'bold',
},
});
5 changes: 5 additions & 0 deletions FabricExample/src/screens/Examples/Main/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ export const examples: Example[] = [
info: ScreenNames.AWARE_SCROLL_VIEW,
icons: '🤓',
},
{
title: 'Aware scroll view sticky footer',
info: ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER,
icons: '🤓🩹',
},
{
title: 'Status Bar',
info: ScreenNames.STATUS_BAR,
Expand Down
10 changes: 0 additions & 10 deletions TODO

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { LayoutChangeEvent, View, Text, Button } from 'react-native';
import { useResizeMode, KeyboardStickyView } from 'react-native-keyboard-controller';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { randomColor } from '../../../utils';

import KeyboardAwareScrollView from '../../../components/AwareScrollView';
import TextInput from '../../../components/TextInput';
import { styles } from './styles';
Expand Down

0 comments on commit 3044e02

Please sign in to comment.