create-expo-cljs-app
Version:
Create a react native application with Expo and Shadow-CLJS!
428 lines (415 loc) • 12.2 kB
JavaScript
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
;
const React = require('react');
const {
Text,
TextInput,
View,
StyleSheet,
Slider,
Switch,
} = require('react-native');
const TextInputSharedExamples = require('./TextInputSharedExamples.js');
import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
class ToggleDefaultPaddingExample extends React.Component<
$FlowFixMeProps,
$FlowFixMeState,
> {
constructor(props) {
super(props);
this.state = {hasPadding: false};
}
render() {
return (
<View>
<TextInput style={this.state.hasPadding ? {padding: 0} : null} />
<Text
onPress={() => this.setState({hasPadding: !this.state.hasPadding})}>
Toggle padding
</Text>
</View>
);
}
}
class AutogrowingTextInputExample extends React.Component<{...}> {
constructor(props) {
super(props);
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
this.state = {
width: 100,
multiline: true,
text: '',
contentSize: {
width: 0,
height: 0,
},
};
}
UNSAFE_componentWillReceiveProps(props) {
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
this.setState({
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
multiline: props.multiline,
});
}
render() {
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
const {style, multiline, ...props} = this.props;
return (
<View>
<Text>Width:</Text>
<Slider
value={100}
minimumValue={0}
maximumValue={100}
step={10}
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */
onValueChange={value => this.setState({width: value})}
/>
<Text>Multiline:</Text>
<Switch
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */
value={this.state.multiline}
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */
onValueChange={value => this.setState({multiline: value})}
/>
<Text>TextInput:</Text>
{/* $FlowFixMe(>=0.122.0 site=react_native_android_fb) This comment
* suppresses an error found when Flow v0.122.0 was deployed. To see
* the error, delete this comment and run Flow. */}
<TextInput
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */
multiline={this.state.multiline}
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */
style={[style, {width: this.state.width + '%'}]}
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */
onChangeText={value => this.setState({text: value})}
onContentSizeChange={event =>
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */
this.setState({contentSize: event.nativeEvent.contentSize})
}
{...props}
/>
<Text>Plain text value representation:</Text>
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */}
<Text>{this.state.text}</Text>
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
* found when making Flow check .android.js files. */}
<Text>Content Size: {JSON.stringify(this.state.contentSize)}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
multiline: {
height: 60,
fontSize: 16,
},
singleLine: {
fontSize: 16,
},
singleLineWithHeightTextInput: {
height: 30,
},
});
exports.title = 'TextInput';
exports.documentationURL = 'https://reactnative.dev/docs/textinput';
exports.category = 'Basic';
exports.description = 'Single and multi-line text inputs.';
exports.examples = ([
...TextInputSharedExamples,
{
title: 'Colors and text inputs',
render: function(): React.Node {
return (
<View>
<TextInput
style={[styles.singleLine]}
defaultValue="Default color text"
/>
<TextInput
style={[styles.singleLine, {color: 'green'}]}
defaultValue="Green Text"
/>
<TextInput
placeholder="Default placeholder text color"
style={styles.singleLine}
/>
<TextInput
placeholder="Red placeholder text color"
placeholderTextColor="red"
style={styles.singleLine}
/>
<TextInput
placeholder="Default underline color"
style={styles.singleLine}
/>
<TextInput
placeholder="Blue underline color"
style={styles.singleLine}
underlineColorAndroid="blue"
/>
<TextInput
defaultValue="Same BackgroundColor as View "
style={[
styles.singleLine,
{backgroundColor: 'rgba(100, 100, 100, 0.3)'},
]}>
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
Darker backgroundColor
</Text>
</TextInput>
<TextInput
defaultValue="Highlight Color is red"
selectionColor={'red'}
style={styles.singleLine}
/>
</View>
);
},
},
{
title: 'Text input, themes and heights',
render: function(): React.Node {
return (
<TextInput
placeholder="If you set height, beware of padding set from themes"
style={[styles.singleLineWithHeightTextInput]}
/>
);
},
},
{
title: 'letterSpacing',
render: function(): React.Node {
return (
<View>
<TextInput
style={[styles.singleLine, {letterSpacing: 0}]}
placeholder="letterSpacing = 0"
/>
<TextInput
style={[styles.singleLine, {letterSpacing: 2}]}
placeholder="letterSpacing = 2"
/>
<TextInput
style={[styles.singleLine, {letterSpacing: 9}]}
placeholder="letterSpacing = 9"
/>
<TextInput
style={[styles.singleLine, {letterSpacing: -1}]}
placeholder="letterSpacing = -1"
/>
</View>
);
},
},
{
title: 'Passwords',
render: function(): React.Node {
return (
<View>
<TextInput
defaultValue="iloveturtles"
secureTextEntry={true}
style={styles.singleLine}
/>
<TextInput
secureTextEntry={true}
style={[styles.singleLine, {color: 'red'}]}
placeholder="color is supported too"
placeholderTextColor="red"
/>
</View>
);
},
},
{
title: 'Editable',
render: function(): React.Node {
return (
<TextInput
defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
editable={false}
style={styles.singleLine}
/>
);
},
},
{
title: 'Multiline',
render: function(): React.Node {
return (
<View>
<TextInput
autoCorrect={true}
placeholder="multiline, aligned top-left"
placeholderTextColor="red"
multiline={true}
style={[
styles.multiline,
{textAlign: 'left', textAlignVertical: 'top'},
]}
/>
<TextInput
autoCorrect={true}
placeholder="multiline, aligned center"
placeholderTextColor="green"
multiline={true}
style={[
styles.multiline,
{textAlign: 'center', textAlignVertical: 'center'},
]}
/>
<TextInput
autoCorrect={true}
multiline={true}
style={[
styles.multiline,
{color: 'blue'},
{textAlign: 'right', textAlignVertical: 'bottom'},
]}>
<Text style={styles.multiline}>
multiline with children, aligned bottom-right
</Text>
</TextInput>
</View>
);
},
},
{
title: 'Fixed number of lines',
platform: 'android',
render: function(): React.Node {
return (
<View>
<TextInput
numberOfLines={2}
multiline={true}
placeholder="Two line input"
/>
<TextInput
numberOfLines={5}
multiline={true}
placeholder="Five line input"
/>
</View>
);
},
},
{
title: 'Auto-expanding',
render: function(): React.Node {
return (
<View>
<AutogrowingTextInputExample
enablesReturnKeyAutomatically={true}
returnKeyType="done"
multiline={true}
style={{maxHeight: 400, minHeight: 20, backgroundColor: '#eeeeee'}}>
generic generic generic
<Text style={{fontSize: 6, color: 'red'}}>
small small small small small small
</Text>
<Text>regular regular</Text>
<Text style={{fontSize: 30, color: 'green'}}>
huge huge huge huge huge
</Text>
generic generic generic
</AutogrowingTextInputExample>
</View>
);
},
},
{
title: 'Return key',
render: function(): React.Node {
const returnKeyTypes = [
'none',
'go',
'search',
'send',
'done',
'previous',
'next',
];
const returnKeyLabels = ['Compile', 'React Native'];
const examples = returnKeyTypes.map(type => {
return (
<TextInput
key={type}
returnKeyType={type}
placeholder={'returnKeyType: ' + type}
style={styles.singleLine}
/>
);
});
const types = returnKeyLabels.map(type => {
return (
<TextInput
key={type}
returnKeyLabel={type}
placeholder={'returnKeyLabel: ' + type}
style={styles.singleLine}
/>
);
});
return (
<View>
{examples}
{types}
</View>
);
},
},
{
title: 'Inline Images',
render: function(): React.Node {
return (
<View>
<TextInput
inlineImageLeft="ic_menu_black_24dp"
placeholder="This has drawableLeft set"
style={styles.singleLine}
/>
<TextInput
inlineImageLeft="ic_menu_black_24dp"
inlineImagePadding={30}
placeholder="This has drawableLeft and drawablePadding set"
style={styles.singleLine}
/>
<TextInput
placeholder="This does not have drawable props set"
style={styles.singleLine}
/>
</View>
);
},
},
{
title: 'Toggle Default Padding',
render: function(): React.Node {
return <ToggleDefaultPaddingExample />;
},
},
]: Array<RNTesterExampleModuleItem>);