diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
index 1e6fb8a8765c8d..b0220db615c0b8 100644
--- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
+++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
@@ -13,71 +13,164 @@ const React = require('react');
const {
KeyboardAvoidingView,
Modal,
- SegmentedControlIOS,
StyleSheet,
Text,
TextInput,
- TouchableHighlight,
+ Button,
+ Pressable,
+ TouchableOpacity,
View,
} = require('react-native');
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const RNTesterPage = require('../../components/RNTesterPage');
+const { useState } = require('react');
-type Props = $ReadOnly<{||}>;
-type State = {|
- behavior: string,
- modalOpen: boolean,
-|};
+const TextInputForm = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
-class KeyboardAvoidingViewExample extends React.Component {
- state = {
- behavior: 'padding',
- modalOpen: false,
- };
+const CloseButton = (props) => {
+ return (
+
+ props.setModdalOpen(false)}
+ style={styles.closeButton}>
+ Close
+
+
+ );
+};
- onSegmentChange = (segment: String) => {
- this.setState({behavior: segment.toLowerCase()});
- };
-
- renderExample = () => {
+const KeyboardAvoidingViewBehaviour = () => {
+ const [modalOpen, setModdalOpen] = useState(false);
+ const [behavior, setBehavior] = useState('padding');
return (
-
+
-
-
+
+ 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
+
+
+
+
+
- this.setState({modalOpen: false})}
- style={styles.closeButton}>
- Close
-
+
+ setModdalOpen(true)}>
+ Open Example
+
+
+
+ );
+}
- this.setState({modalOpen: true})}>
+const KeyboardAvoidingDisabled = () => {
+ const [modalOpen, setModdalOpen] = useState(false);
+ return (
+
+
+
+
+
+
+
+
+ setModdalOpen(true)}>
Open Example
-
+
+
);
- };
+}
- render() {
+const KeyboardAvoidingVerticalOffset = () => {
+ const [modalOpen, setModdalOpen] = useState(false);
return (
-
-
- {this.renderExample()}
-
-
+
+
+
+
+
+
+
+
+ setModdalOpen(true)}>
+ Open Example
+
+
+
);
- }
}
const styles = StyleSheet.create({
@@ -87,6 +180,7 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
+ alignItems: 'center',
paddingHorizontal: 20,
paddingTop: 20,
},
@@ -94,15 +188,25 @@ const styles = StyleSheet.create({
borderRadius: 5,
borderWidth: 1,
height: 44,
+ width: 300,
+ marginBottom: 20,
paddingHorizontal: 10,
},
- segment: {
- marginBottom: 10,
+ closeView: {
+ alignSelf: 'stretch',
+ },
+ pillStyle: {
+ padding: 10,
+ marginHorizontal: 5,
+ marginVertical: 10,
+ borderRadius: 20,
+ borderWidth: 1,
+ borderColor: 'blue',
},
closeButton: {
- position: 'absolute',
- top: 40,
- left: 10,
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ marginVertical: 10,
padding: 10,
},
});
@@ -112,9 +216,23 @@ exports.description =
'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
exports.examples = [
{
- title: 'Simple keyboard view',
- render: function(): React.Element {
- return ;
+ title: 'Keyboard Avoiding View with different behaviors',
+ description: '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.',
+ render(): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Keyboard Avoiding View with keyboardVerticalOffset={distance}',
+ description: '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.',
+ render(): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Keyboard Avoiding View with enabled={false}',
+ render(): React.Node {
+ return ;
},
},
];