diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
index 9bf56b7f6a16..c793d4370830 100644
--- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
+++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
@@ -20,6 +20,7 @@ import {
KeyboardAvoidingView,
Modal,
Pressable,
+ ScrollView,
StyleSheet,
Text,
TextInput,
@@ -47,74 +48,67 @@ const TextInputForm = () => {
);
};
-const CloseButton = (
- props:
- {behavior: any, setModalOpen: any} | {behavior: string, setModalOpen: any},
-) => {
+const CloseButton = (props: {setModalOpen: boolean => void}) => {
+ return (
+ props.setModalOpen(false)}
+ style={styles.closeButton}>
+ Close
+
+ );
+};
+
+type KeyboardAvoidingBehavior = 'padding' | 'position' | 'height';
+
+const BEHAVIORS: Array = [
+ 'padding',
+ 'position',
+ 'height',
+];
+
+const BehaviorPicker = (props: {
+ behavior: KeyboardAvoidingBehavior,
+ setBehavior: KeyboardAvoidingBehavior => void,
+}) => {
return (
- props.setModalOpen(false)}
- style={styles.closeButton}>
- Close
-
+ style={{
+ flexDirection: 'row',
+ justifyContent: 'center',
+ }}>
+ {BEHAVIORS.map(behavior => {
+ const selected = props.behavior === behavior;
+ return (
+ props.setBehavior(behavior)}
+ style={[
+ styles.pillStyle,
+ {backgroundColor: selected ? 'blue' : 'white'},
+ ]}>
+
+ {behavior}
+
+
+ );
+ })}
);
};
const KeyboardAvoidingViewBehaviour = () => {
const [modalOpen, setModalOpen] = useState(false);
- const [behavior, setBehavior] = useState('padding');
+ const [behavior, setBehavior] = useState('padding');
return (
- {/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
- * https://fburl.com/workplace/6291gfvu */}
-
- setBehavior('padding')}
- style={[
- styles.pillStyle,
- {backgroundColor: behavior === 'padding' ? 'blue' : 'white'},
- ]}>
-
- Padding
-
-
- setBehavior('position')}
- style={[
- styles.pillStyle,
- {backgroundColor: behavior === 'position' ? 'blue' : 'white'},
- ]}>
-
- Position
-
-
- setBehavior('height')}
- style={[
- styles.pillStyle,
- {backgroundColor: behavior === 'height' ? 'blue' : 'white'},
- ]}>
-
- Height
-
-
-
-
+
+
@@ -140,7 +134,7 @@ const KeyboardAvoidingDisabled = () => {
enabled={false}
behavior={'height'}
style={styles.container}>
-
+
@@ -162,7 +156,7 @@ const KeyboardAvoidingVerticalOffset = () => {
keyboardVerticalOffset={20}
behavior={'padding'}
style={styles.container}>
-
+
@@ -185,7 +179,7 @@ const KeyboardAvoidingContentContainerStyle = () => {
behavior={'position'}
style={styles.container}
contentContainerStyle={styles.contentContainer}>
-
+
@@ -198,6 +192,46 @@ const KeyboardAvoidingContentContainerStyle = () => {
);
};
+const KeyboardAvoidingScrollView = () => {
+ const [modalOpen, setModalOpen] = useState(false);
+ const [behavior, setBehavior] = useState('padding');
+ return (
+
+
+
+
+
+
+
+
+ {Array.from({length: 10}, (_, index) => (
+
+ Item {index + 1}
+
+ ))}
+
+
+
+
+
+
+ setModalOpen(true)}>
+ Open Example
+
+
+
+ );
+};
+
const styles = StyleSheet.create({
outerContainer: {
flex: 1,
@@ -205,24 +239,41 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center',
- paddingHorizontal: 20,
paddingTop: 20,
+ width: 300,
+ alignSelf: 'center',
},
contentContainer: {
paddingTop: 20,
backgroundColor: '#abdebf',
},
+ scrollViewContainer: {
+ flex: 1,
+ paddingTop: 100,
+ },
+ scrollViewContent: {
+ paddingBottom: 60,
+ paddingHorizontal: 20,
+ },
+ fillerItem: {
+ backgroundColor: '#eeeeee',
+ borderRadius: 8,
+ paddingVertical: 16,
+ paddingHorizontal: 12,
+ marginBottom: 20,
+ alignItems: 'center',
+ },
textInput: {
borderRadius: 5,
borderWidth: 1,
- height: 44,
- width: 300,
+ minHeight: 44,
marginBottom: 20,
paddingHorizontal: 10,
},
- closeView: {
- alignSelf: 'stretch',
+ multilineTextInput: {
+ minHeight: 88,
+ paddingVertical: 10,
+ textAlignVertical: 'top',
},
pillStyle: {
padding: 10,
@@ -233,8 +284,7 @@ const styles = StyleSheet.create({
borderColor: 'blue',
},
closeButton: {
- flexDirection: 'row',
- justifyContent: 'flex-end',
+ alignSelf: 'flex-end',
marginVertical: 10,
padding: 10,
},
@@ -251,7 +301,7 @@ exports.examples = [
{
title: 'Keyboard Avoiding View with different behaviors',
description:
- ('Specify how to react to the presence of the keyboard. Android and iOS both interact' +
+ ('Specify how to react to the presence of the keyboard. Android and iOS both interact ' +
'with this prop differently. On both iOS and Android, setting behavior is recommended.') as string,
render(): React.Node {
return ;
@@ -260,7 +310,7 @@ exports.examples = [
{
title: 'Keyboard Avoiding View with keyboardVerticalOffset={distance}',
description:
- ('This is the distance between the top of the user screen and the react native' +
+ ('This is the distance between the top of the user screen and the React Native ' +
'view, may be non-zero in some use cases. Defaults to 0.') as string,
render(): React.Node {
return ;
@@ -268,14 +318,26 @@ exports.examples = [
},
{
title: 'Keyboard Avoiding View with enabled={false}',
+ description: 'Disables the KeyboardAvoidingView.' as string,
render(): React.Node {
return ;
},
},
{
title: 'Keyboard Avoiding View with contentContainerStyle',
+ description:
+ 'Specify the style of the content container View when behavior is set to position.' as string,
render(): React.Node {
return ;
},
},
+ {
+ title: 'Keyboard Avoiding View with ScrollView',
+ description:
+ ('A ScrollView with filler content and TextInputs at the bottom inside the scrollable content. ' +
+ 'TextInputs should still be visible when focused.') as string,
+ render(): React.Node {
+ return ;
+ },
+ },
] as Array;