zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-12 14:04:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update prettier and reformat source code

Browse Source
This commit is contained in:
Nicolas Gallagher
2022-07-03 17:37:19 -07:00
parent c8f6db8bfc
commit 174b8f505a
162 changed files with 2950 additions and 1370 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web-examples/pages/activity-indicator/index.js
Vendored
+10 -2
View File
@@ -18,8 +18,16 @@ export default function ActivityIndicatorPage() {
<Example title="ActivityIndicator">
<View style={styles.row}>
<ActivityIndicator style={styles.item} />
<ActivityIndicator animating={false} hidesWhenStopped={false} style={styles.item} />
<ActivityIndicator animating={animating} hidesWhenStopped={false} style={styles.item} />
<ActivityIndicator
animating={false}
hidesWhenStopped={false}
style={styles.item}
/>
<ActivityIndicator
animating={animating}
hidesWhenStopped={false}
style={styles.item}
/>
</View>
<View style={styles.row}>
<ActivityIndicator color="#1DA1F2" size="small" style={styles.item} />
packages/react-native-web-examples/pages/app-state/index.js
Vendored
+2 -1
View File
@@ -27,7 +27,8 @@ export default function AppStatePage() {
return (
<Example title="AppState">
<Text style={{ marginTop: '1rem' }}>
AppState.currentState: <Text style={{ fontWeight: 'bold' }}>{state.currentState}</Text>
AppState.currentState:{' '}
<Text style={{ fontWeight: 'bold' }}>{state.currentState}</Text>
</Text>
<Text>Active count: {state.active}</Text>
<Text>Background count: {state.background}</Text>
packages/react-native-web-examples/pages/checkbox/index.js
Vendored
+5 -1
View File
@@ -44,7 +44,11 @@ export default function CheckboxPage() {
<CheckBox color="#E0245E" value={true} />
</View>
<View style={styles.row}>
<CheckBox color="#1DA1F2" style={{ height: 32, width: 32 }} value={checked} />
<CheckBox
color="#1DA1F2"
style={{ height: 32, width: 32 }}
value={checked}
/>
</View>
</Example>
);
packages/react-native-web-examples/pages/clipboard/index.js
Vendored
+3 -1
View File
@@ -4,7 +4,9 @@ import Example from '../../shared/example';
export default function ClipboardPage() {
const setString = () => {
const success = Clipboard.setString('This text was copied to the clipboard by React Native');
const success = Clipboard.setString(
'This text was copied to the clipboard by React Native'
);
console.log(`Clipboard.setString success? ${success}`);
};
packages/react-native-web-examples/pages/dimensions/index.js
Vendored
+3 -1
View File
@@ -23,7 +23,9 @@ export default function DimensionsPage() {
<Text style={{ marginVertical: '1em' }} suppressHydrationWarnings={true}>
window: {JSON.stringify(windowDims, null, 2)}
</Text>
<Text suppressHydrationWarnings={true}>screen: {JSON.stringify(screenDims, null, 2)}</Text>
<Text suppressHydrationWarnings={true}>
screen: {JSON.stringify(screenDims, null, 2)}
</Text>
</Example>
);
}
packages/react-native-web-examples/pages/flatlist/index.js
Vendored
+16 -5
View File
@@ -3,7 +3,10 @@ import { StyleSheet } from 'react-native';
import Example from '../../shared/example';
import { FlatList, Text, TouchableOpacity, View } from 'react-native-web';
const multiSelectData = ['First', 'Second', 'Third'].map((title, id) => ({ id, title }));
const multiSelectData = ['First', 'Second', 'Third'].map((title, id) => ({
id,
title
}));
const minimalData = ['a', 'b', 'c', 'd', 'e'].map((key) => ({ key }));
const pageExamplesData = ['minimal', 'multiSelect'].map((type) => ({ type }));
@@ -17,7 +20,9 @@ class MyListItem extends React.PureComponent {
return (
<TouchableOpacity onPress={this._onPress}>
<View>
<Text style={[styles.listItemText, { color: textColor }]}>{this.props.title}</Text>
<Text style={[styles.listItemText, { color: textColor }]}>
{this.props.title}
</Text>
</View>
</TouchableOpacity>
);
@@ -70,7 +75,9 @@ function renderExampleItem({ item }) {
<Text style={styles.exampleHeaderText}>Minimal FlatList:</Text>
<FlatList
data={minimalData}
renderItem={({ item }) => <Text style={styles.listItemText}>{item.key}</Text>}
renderItem={({ item }) => (
<Text style={styles.listItemText}>{item.key}</Text>
)}
/>
</View>
);
@@ -93,10 +100,14 @@ export default function FlatListPage() {
<Example title="FlatList">
<FlatList
ListFooterComponent={
<Text style={styles.allExamplesFooter}>(Example ListFooterComponent Here)</Text>
<Text style={styles.allExamplesFooter}>
(Example ListFooterComponent Here)
</Text>
}
ListHeaderComponent={
<Text style={styles.allExamplesHeader}>(Example ListHeaderComponent Here)</Text>
<Text style={styles.allExamplesHeader}>
(Example ListHeaderComponent Here)
</Text>
}
data={pageExamplesData}
renderItem={renderExampleItem}
packages/react-native-web-examples/pages/image/index.js
Vendored
+20 -4
View File
@@ -80,22 +80,38 @@ export default function ImagePage() {
<View style={styles.row}>
<View style={styles.column}>
<Text style={[styles.text]}>Center</Text>
<Image resizeMode="center" source={resizesource} style={styles.resizeMode} />
<Image
resizeMode="center"
source={resizesource}
style={styles.resizeMode}
/>
</View>
<View style={styles.column}>
<Text style={[styles.text]}>Contain</Text>
<Image resizeMode="contain" source={resizesource} style={styles.resizeMode} />
<Image
resizeMode="contain"
source={resizesource}
style={styles.resizeMode}
/>
</View>
</View>
<Divider />
<View style={styles.row}>
<View style={styles.column}>
<Text style={[styles.text]}>Cover</Text>
<Image resizeMode="cover" source={resizesource} style={styles.resizeMode} />
<Image
resizeMode="cover"
source={resizesource}
style={styles.resizeMode}
/>
</View>
<View style={styles.column}>
<Text style={[styles.text]}>Stretch</Text>
<Image resizeMode="stretch" source={resizesource} style={styles.resizeMode} />
<Image
resizeMode="stretch"
source={resizesource}
style={styles.resizeMode}
/>
</View>
</View>
</Example>
packages/react-native-web-examples/pages/index.js
Vendored
+4 -2
View File
@@ -30,8 +30,10 @@ export default function IndexPage() {
<Text style={styles.title}>React Native for Web</Text>
</View>
<Text style={styles.text}>
<Link href="https://github.com/necolas/react-native-web">React Native for Web</Link> example
app built on Next.js
<Link href="https://github.com/necolas/react-native-web">
React Native for Web
</Link>{' '}
example app built on Next.js
</Text>
<View accessibilityRole="list">
packages/react-native-web-examples/pages/lists/index.js
Vendored
+46 -15
View File
@@ -22,7 +22,13 @@ import {
} from 'react-native';
import Example from '../../shared/example';
type Item = { title: string, text: string, key: string, pressed: boolean, noImage?: ?boolean };
type Item = {
title: string,
text: string,
key: string,
pressed: boolean,
noImage?: ?boolean
};
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
@@ -103,7 +109,10 @@ class ItemComponent extends React.PureComponent<{
]}
>
{!item.noImage && <Image source={imgSource} style={styles.thumb} />}
<Text numberOfLines={horizontal || fixedHeight ? 3 : undefined} style={styles.text}>
<Text
numberOfLines={horizontal || fixedHeight ? 3 : undefined}
style={styles.text}
>
{item.title} - {item.text}
</Text>
</View>
@@ -147,7 +156,10 @@ class SeparatorComponent extends React.PureComponent<{}> {
class ItemSeparatorComponent extends React.PureComponent<{}> {
render() {
const style = this.props.highlighted
? [styles.itemSeparator, { marginLeft: 0, backgroundColor: 'rgb(217, 217, 217)' }]
? [
styles.itemSeparator,
{ marginLeft: 0, backgroundColor: 'rgb(217, 217, 217)' }
]
: styles.itemSeparator;
return <View style={style} />;
}
@@ -251,16 +263,24 @@ class SingleColumnExample extends React.PureComponent {
};
_onChangeScrollToIndex = (text) => {
this._listRef.getNode().scrollToIndex({ viewPosition: 0.5, index: Number(text) });
this._listRef
.getNode()
.scrollToIndex({ viewPosition: 0.5, index: Number(text) });
};
_scrollPos = new Animated.Value(0);
_scrollSinkX = Animated.event([{ nativeEvent: { contentOffset: { x: this._scrollPos } } }], {
useNativeDriver: true
});
_scrollSinkY = Animated.event([{ nativeEvent: { contentOffset: { y: this._scrollPos } } }], {
useNativeDriver: true
});
_scrollSinkX = Animated.event(
[{ nativeEvent: { contentOffset: { x: this._scrollPos } } }],
{
useNativeDriver: true
}
);
_scrollSinkY = Animated.event(
[{ nativeEvent: { contentOffset: { y: this._scrollPos } } }],
{
useNativeDriver: true
}
);
componentDidUpdate() {
this._listRef.getNode().recordInteraction(); // e.g. flipping logViewable switch
@@ -268,7 +288,8 @@ class SingleColumnExample extends React.PureComponent {
render() {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = (item) => filterRegex.test(item.text) || filterRegex.test(item.title);
const filter = (item) =>
filterRegex.test(item.text) || filterRegex.test(item.title);
const filteredData = this.state.data.filter(filter);
return (
<View style={styles.container}>
@@ -279,7 +300,10 @@ class SingleColumnExample extends React.PureComponent {
placeholder="Search..."
value={this.state.filterText}
/>
<PlainInput onChangeText={this._onChangeScrollToIndex} placeholder="scrollToIndex..." />
<PlainInput
onChangeText={this._onChangeScrollToIndex}
placeholder="scrollToIndex..."
/>
</View>
<View style={styles.options}>
{renderSmallSwitchOption(this, 'virtualized')}
@@ -300,17 +324,24 @@ class SingleColumnExample extends React.PureComponent {
data={filteredData}
debug={this.state.debug}
disableVirtualization={!this.state.virtualized}
getItemLayout={this.state.fixedHeight ? this._getItemLayout : undefined}
getItemLayout={
this.state.fixedHeight ? this._getItemLayout : undefined
}
horizontal={this.state.horizontal}
inverted={this.state.inverted}
key={(this.state.horizontal ? 'h' : 'v') + (this.state.fixedHeight ? 'f' : 'd')}
key={
(this.state.horizontal ? 'h' : 'v') +
(this.state.fixedHeight ? 'f' : 'd')
}
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="always"
legacyImplementation={false}
numColumns={1}
onEndReached={this._onEndReached}
onRefresh={this._onRefresh}
onScroll={this.state.horizontal ? this._scrollSinkX : this._scrollSinkY}
onScroll={
this.state.horizontal ? this._scrollSinkX : this._scrollSinkY
}
onViewableItemsChanged={this._onViewableItemsChanged}
ref={this._captureRef}
refreshing={false}
packages/react-native-web-examples/pages/localization/index.js
Vendored
+27 -7
View File
@@ -309,7 +309,9 @@ const BorderRadiiExample = withRTLState(({ isRTL, setRTL }) => {
function Block(props) {
let description;
if (props.description) {
description = <Text style={blockStyles.descriptionText}>{props.description}</Text>;
description = (
<Text style={blockStyles.descriptionText}>{props.description}</Text>
);
}
return (
@@ -379,13 +381,19 @@ class LayoutRTLExample extends React.Component {
render() {
return (
<ScrollView dir={this.state.isRTL ? 'rtl' : 'ltr'} style={[styles.container]}>
<ScrollView
dir={this.state.isRTL ? 'rtl' : 'ltr'}
style={[styles.container]}
>
<Block title={'Current layout direction'}>
<View dir="ltr" style={styles.directionBox}>
<Text style={styles.directionText}>
{this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
</Text>
<Switch onValueChange={this._onDirectionChange} value={this.state.isRTL} />
<Switch
onValueChange={this._onDirectionChange}
value={this.state.isRTL}
/>
</View>
</Block>
@@ -419,13 +427,22 @@ class LayoutRTLExample extends React.Component {
<Block title={'A simple list-item layout'}>
<View style={styles.list}>
<ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=222' }} />
<ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=250' }} />
<ListItem
imageSource={{ uri: 'https://picsum.photos/130/130?image=222' }}
/>
<ListItem
imageSource={{ uri: 'https://picsum.photos/130/130?image=250' }}
/>
</View>
</Block>
<Block title={'Working with icons'}>
<View style={[styles.flexDirectionRow, { justifyContent: 'space-around' }]}>
<View
style={[
styles.flexDirectionRow,
{ justifyContent: 'space-around' }
]}
>
<View style={{ alignItems: 'center' }}>
<Image source={iconSource} style={styles.image} />
<Text style={styles.fontSizeSmall}>No RTL flip</Text>
@@ -433,7 +450,10 @@ class LayoutRTLExample extends React.Component {
<View style={{ alignItems: 'center' }}>
<Image
source={iconSource}
style={[styles.image, { transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] }]}
style={[
styles.image,
{ transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] }
]}
/>
<Text style={styles.fontSizeSmall}>RTL flip</Text>
</View>
packages/react-native-web-examples/pages/modal/index.js
Vendored
+22 -5
View File
@@ -11,7 +11,10 @@ function AnimatedModal({ animationType }) {
return (
<>
<Button onPress={() => setIsVisible(true)} title={`Animation '${animationType}'`} />
<Button
onPress={() => setIsVisible(true)}
title={`Animation '${animationType}'`}
/>
<Modal
animationType={animationType}
onRequestClose={() => setIsVisible(false)}
@@ -54,13 +57,21 @@ function Modalception({ depth = 1 }) {
return (
<>
<Button onPress={() => setIsVisible(true)} title={'Open modal'} />
<Modal onRequestClose={() => setIsVisible(false)} transparent visible={isVisible}>
<Modal
onRequestClose={() => setIsVisible(false)}
transparent
visible={isVisible}
>
<View style={[styles.containeralt, offset]}>
<Text>This is in Modal {depth}</Text>
<Gap />
{isVisible ? <Modalception depth={depth + 1} /> : null}
<Gap />
<Button color="red" onPress={() => setIsVisible(false)} title={'Close'} />
<Button
color="red"
onPress={() => setIsVisible(false)}
title={'Close'}
/>
</View>
</Modal>
</>
@@ -90,9 +101,15 @@ function TransparentModal() {
return (
<>
<Button onPress={() => setIsVisible(true)} title={'Transparent modal'} />
<Modal onRequestClose={() => setIsVisible(false)} transparent visible={isVisible}>
<Modal
onRequestClose={() => setIsVisible(false)}
transparent
visible={isVisible}
>
<View style={styles.containeralt}>
<Text style={{ textAlign: 'center' }}>Modal with "transparent" value</Text>
<Text style={{ textAlign: 'center' }}>
Modal with "transparent" value
</Text>
<Gap />
<Button onPress={() => setIsVisible(false)} title={'Close'} />
</View>
packages/react-native-web-examples/pages/pan-responder/index.js
Vendored
+13 -3
View File
@@ -42,7 +42,11 @@ class DraggableCircle extends React.PureComponent {
render() {
return (
<View style={styles.container}>
<View ref={this._setCircleRef} style={styles.circle} {...this._panResponder.panHandlers} />
<View
ref={this._setCircleRef}
style={styles.circle}
{...this._panResponder.panHandlers}
/>
</View>
);
}
@@ -65,12 +69,18 @@ class DraggableCircle extends React.PureComponent {
this.circle && this.circle.setNativeProps(this._circleStyles);
}
_handleStartShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
_handleStartShouldSetPanResponder = (
e: Object,
gestureState: Object
): boolean => {
// Should we become active when the user presses down on the circle?
return true;
};
_handleMoveShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
_handleMoveShouldSetPanResponder = (
e: Object,
gestureState: Object
): boolean => {
// Should we become active when the user moves a touch over the circle?
return true;
};
packages/react-native-web-examples/pages/pressable/index.js
Vendored
+8 -1
View File
@@ -1,5 +1,12 @@
import React from 'react';
import { Button, ScrollView, StyleSheet, View, Text, Pressable } from 'react-native';
import {
Button,
ScrollView,
StyleSheet,
View,
Text,
Pressable
} from 'react-native';
import Example from '../../shared/example';
export default function PressablePage() {
packages/react-native-web-examples/pages/progress-bar/index.js
Vendored
+16 -3
View File
@@ -23,9 +23,17 @@ export default function ProgressBarPage() {
<Divider />
<ProgressBar color="#E0245E" progress={1} />
<Divider />
<ProgressBar color="rgb(23, 191, 99)" progress={0.1} trackColor="rgba(23, 191, 99, 0.3)" />
<ProgressBar
color="rgb(23, 191, 99)"
progress={0.1}
trackColor="rgba(23, 191, 99, 0.3)"
/>
<Divider />
<ProgressBar color="rgb(244, 93, 34)" progress={0.2} trackColor="rgba(244, 93, 34, 0.3)" />
<ProgressBar
color="rgb(244, 93, 34)"
progress={0.2}
trackColor="rgba(244, 93, 34, 0.3)"
/>
<Divider />
<ProgressBar
color="rgb(121, 75, 196)"
@@ -33,7 +41,12 @@ export default function ProgressBarPage() {
trackColor="rgba(121, 75, 196, 0.3)"
/>
<Divider />
<ProgressBar color="#1DA1F2" progress={0.33} style={styles.custom} trackColor="#D1E3F6" />
<ProgressBar
color="#1DA1F2"
progress={0.33}
style={styles.custom}
trackColor="#D1E3F6"
/>
</View>
</Example>
);
packages/react-native-web-examples/pages/scroll-view/index.js
Vendored
+8 -1
View File
@@ -1,5 +1,12 @@
import React from 'react';
import { Button, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {
Button,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import Example from '../../shared/example';
const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
packages/react-native-web-examples/pages/section-list/index.js
Vendored
+15 -4
View File
@@ -29,14 +29,21 @@ function renderItem({ item }) {
function renderSectionHeader({ section }) {
const extraStyle = { backgroundColor: section.color };
return (
<Text key={`sh_${section.key}`} style={[styles.sectionHeaderText, extraStyle]}>
<Text
key={`sh_${section.key}`}
style={[styles.sectionHeaderText, extraStyle]}
>
{section.title}
</Text>
);
}
function renderSectionFooter({ section }) {
const footerStyle = { height: 10, backgroundColor: section.color, marginBottom: 10 };
const footerStyle = {
height: 10,
backgroundColor: section.color,
marginBottom: 10
};
return <View key={`sf_${section.key}`} style={footerStyle} />;
}
@@ -45,10 +52,14 @@ export default function SectionListPage() {
<Example title="SectionList">
<SectionList
ListFooterComponent={
<Text style={styles.examplesFooter}>(Example ListFooterComponent Here)</Text>
<Text style={styles.examplesFooter}>
(Example ListFooterComponent Here)
</Text>
}
ListHeaderComponent={
<Text style={styles.examplesHeader}>(Example ListHeaderComponent Here)</Text>
<Text style={styles.examplesHeader}>
(Example ListHeaderComponent Here)
</Text>
}
renderItem={renderItem}
renderSectionFooter={renderSectionFooter}
packages/react-native-web-examples/pages/switch/index.js
Vendored
+87 -17
View File
@@ -25,13 +25,31 @@ export default function SwitchPage() {
<Divider />
<Switch disabled={true} value={true} />
<Divider />
<Switch activeThumbColor="#fff" activeTrackColor="#E0245E" disabled={true} value={true} />
<Switch
activeThumbColor="#fff"
activeTrackColor="#E0245E"
disabled={true}
value={true}
/>
<Divider />
<Switch disabled={true} thumbColor="#fff" trackColor="#E0245E" value={false} />
<Switch
disabled={true}
thumbColor="#fff"
trackColor="#E0245E"
value={false}
/>
<Divider />
<Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={false} />
<Switch
disabled={true}
trackColor={{ true: '#E0245E', false: '#1DA1F2' }}
value={false}
/>
<Divider />
<Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={true} />
<Switch
disabled={true}
trackColor={{ true: '#E0245E', false: '#1DA1F2' }}
value={true}
/>
</View>
<View style={styles.row}>
<Switch value={false} />
@@ -39,30 +57,78 @@ export default function SwitchPage() {
<Switch value={true} />
</View>
<View style={styles.row}>
<Switch activeThumbColor="#1DA1F2" activeTrackColor="#ccc" value={true} />
<Switch
activeThumbColor="#1DA1F2"
activeTrackColor="#ccc"
value={true}
/>
<Divider />
<Switch activeThumbColor="#17BF63" activeTrackColor="#ccc" value={true} />
<Switch
activeThumbColor="#17BF63"
activeTrackColor="#ccc"
value={true}
/>
<Divider />
<Switch activeThumbColor="#FFAD1F" activeTrackColor="#ccc" value={true} />
<Switch
activeThumbColor="#FFAD1F"
activeTrackColor="#ccc"
value={true}
/>
<Divider />
<Switch activeThumbColor="#F45D22" activeTrackColor="#ccc" value={true} />
<Switch
activeThumbColor="#F45D22"
activeTrackColor="#ccc"
value={true}
/>
<Divider />
<Switch activeThumbColor="#794BC4" activeTrackColor="#ccc" value={true} />
<Switch
activeThumbColor="#794BC4"
activeTrackColor="#ccc"
value={true}
/>
<Divider />
<Switch activeThumbColor="#E0245E" activeTrackColor="#ccc" value={true} />
<Switch
activeThumbColor="#E0245E"
activeTrackColor="#ccc"
value={true}
/>
</View>
<View style={styles.row}>
<Switch activeThumbColor="#fff" activeTrackColor="#1DA1F2" value={true} />
<Switch
activeThumbColor="#fff"
activeTrackColor="#1DA1F2"
value={true}
/>
<Divider />
<Switch activeThumbColor="#fff" activeTrackColor="#17BF63" value={true} />
<Switch
activeThumbColor="#fff"
activeTrackColor="#17BF63"
value={true}
/>
<Divider />
<Switch activeThumbColor="#fff" activeTrackColor="#FFAD1F" value={true} />
<Switch
activeThumbColor="#fff"
activeTrackColor="#FFAD1F"
value={true}
/>
<Divider />
<Switch activeThumbColor="#fff" activeTrackColor="#F45D22" value={true} />
<Switch
activeThumbColor="#fff"
activeTrackColor="#F45D22"
value={true}
/>
<Divider />
<Switch activeThumbColor="#fff" activeTrackColor="#794BC4" value={true} />
<Switch
activeThumbColor="#fff"
activeTrackColor="#794BC4"
value={true}
/>
<Divider />
<Switch activeThumbColor="#fff" activeTrackColor="#E0245E" value={true} />
<Switch
activeThumbColor="#fff"
activeTrackColor="#E0245E"
value={true}
/>
</View>
<View style={styles.row}>
<Switch activeTrackColor="#ccc" thumbColor="#1DA1F2" value={false} />
@@ -92,7 +158,11 @@ export default function SwitchPage() {
</View>
<View style={styles.row}>
<Switch style={{ height: 32, width: 32 }} thumbColor="#1DA1F2" value={checked} />
<Switch
style={{ height: 32, width: 32 }}
thumbColor="#1DA1F2"
value={checked}
/>
</View>
</Example>
);
packages/react-native-web-examples/pages/text-input/index.js
Vendored
+20 -4
View File
@@ -33,14 +33,26 @@ export default function TextInputPage() {
ref={nextFocus}
style={styles.textinput}
/>
<TextInput defaultValue="disabled" disabled={true} style={styles.textinput} />
<TextInput defaultValue="editable (false)" editable={false} style={styles.textinput} />
<TextInput
defaultValue="disabled"
disabled={true}
style={styles.textinput}
/>
<TextInput
defaultValue="editable (false)"
editable={false}
style={styles.textinput}
/>
<TextInput
keyboardType="numeric"
placeholder="keyboardType 'numeric'"
style={styles.textinput}
/>
<TextInput maxLength={5} placeholder="maxLength" style={styles.textinput} />
<TextInput
maxLength={5}
placeholder="maxLength"
style={styles.textinput}
/>
<TextInput
placeholder="placeholderTextColor"
@@ -52,7 +64,11 @@ export default function TextInputPage() {
selectTextOnFocus={true}
style={styles.textinput}
/>
<TextInput defaultValue="secureTextEntry" secureTextEntry={true} style={styles.textinput} />
<TextInput
defaultValue="secureTextEntry"
secureTextEntry={true}
style={styles.textinput}
/>
<TextInput
multiline={true}
numberOfLines={3}
packages/react-native-web-examples/pages/text/index.js
Vendored
+64 -27
View File
@@ -36,7 +36,9 @@ function FontFamily() {
Cochin bold
</Text>
<Text style={{ fontFamily: 'Helvetica' }}>Helvetica</Text>
<Text style={{ fontFamily: 'Helvetica', fontWeight: 'bold' }}>Helvetica bold</Text>
<Text style={{ fontFamily: 'Helvetica', fontWeight: 'bold' }}>
Helvetica bold
</Text>
<Text style={{ fontFamily: 'Verdana' }}>Verdana</Text>
<Text
style={{
@@ -107,11 +109,21 @@ function FontWeight() {
return (
<View>
<Heading>fontWeight</Heading>
<Text style={{ fontSize: 20, fontWeight: '100' }}>Move fast and be ultralight</Text>
<Text style={{ fontSize: 20, fontWeight: '200' }}>Move fast and be light</Text>
<Text style={{ fontSize: 20, fontWeight: 'normal' }}>Move fast and be normal</Text>
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Move fast and be bold</Text>
<Text style={{ fontSize: 20, fontWeight: '900' }}>Move fast and be ultrabold</Text>
<Text style={{ fontSize: 20, fontWeight: '100' }}>
Move fast and be ultralight
</Text>
<Text style={{ fontSize: 20, fontWeight: '200' }}>
Move fast and be light
</Text>
<Text style={{ fontSize: 20, fontWeight: 'normal' }}>
Move fast and be normal
</Text>
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>
Move fast and be bold
</Text>
<Text style={{ fontSize: 20, fontWeight: '900' }}>
Move fast and be ultrabold
</Text>
</View>
);
}
@@ -124,12 +136,23 @@ function LetterSpacing() {
<Text style={{ letterSpacing: 2, marginTop: 5 }}>letterSpacing = 2</Text>
<Text style={{ letterSpacing: 9, marginTop: 5 }}>letterSpacing = 9</Text>
<View style={{ flexDirection: 'row' }}>
<Text style={{ fontSize: 12, letterSpacing: 2, backgroundColor: 'fuchsia', marginTop: 5 }}>
<Text
style={{
fontSize: 12,
letterSpacing: 2,
backgroundColor: 'fuchsia',
marginTop: 5
}}
>
With size and background color
</Text>
</View>
<Text style={{ letterSpacing: -1, marginTop: 5 }}>letterSpacing = -1</Text>
<Text style={{ letterSpacing: 3, backgroundColor: '#dddddd', marginTop: 5 }}>
<Text style={{ letterSpacing: -1, marginTop: 5 }}>
letterSpacing = -1
</Text>
<Text
style={{ letterSpacing: 3, backgroundColor: '#dddddd', marginTop: 5 }}
>
[letterSpacing = 3]
<Text style={{ letterSpacing: 0, backgroundColor: '#bbbbbb' }}>
[Nested letterSpacing = 0]
@@ -147,9 +170,9 @@ function LineHeight() {
<View>
<Heading>lineHeight</Heading>
<Text style={{ lineHeight: 35 }}>
A lot of space should display between the lines of this long passage as they wrap across
several lines. A lot of space should display between the lines of this long passage as they
wrap across several lines.
A lot of space should display between the lines of this long passage as
they wrap across several lines. A lot of space should display between
the lines of this long passage as they wrap across several lines.
</Text>
</View>
);
@@ -166,18 +189,21 @@ function TextAlign() {
'RTL'}
</Text>
<Text style={{ textAlign: 'left' }}>
left left left left left left left left left left left left left left left
left left left left left left left left left left left left left left
left
</Text>
<Text style={{ textAlign: 'center' }}>
center center center center center center center center center center center
center center center center center center center center center center
center
</Text>
<Text style={{ textAlign: 'right' }}>
right right right right right right right right right right right right right
right right right right right right right right right right right right
right
</Text>
<Text style={{ textAlign: 'justify' }}>
justify: this text component{"'"}s contents are laid out with "textAlign: justify" and as
you can see all of the lines except the last one span the available width of the parent
container.
justify: this text component{"'"}s contents are laid out with
"textAlign: justify" and as you can see all of the lines except the last
one span the available width of the parent container.
</Text>
</View>
);
@@ -306,8 +332,9 @@ export default function TextPage() {
<Example title="Text">
<View style={{ maxWidth: 500 }}>
<Text>
Text wraps across multiple lines by default. Text wraps across multiple lines by default.
Text wraps across multiple lines by default. Text wraps across multiple lines by default.
Text wraps across multiple lines by default. Text wraps across
multiple lines by default. Text wraps across multiple lines by
default. Text wraps across multiple lines by default.
</Text>
<Spacer />
@@ -351,8 +378,10 @@ export default function TextPage() {
<Text>
This text contains an inline blue view{' '}
<View style={{ width: 25, height: 25, backgroundColor: 'steelblue' }} /> and an inline
image{' '}
<View
style={{ width: 25, height: 25, backgroundColor: 'steelblue' }}
/>{' '}
and an inline image{' '}
<Image
source={{ uri: 'http://lorempixel.com/30/11' }}
style={{ width: 30, height: 11, resizeMode: 'cover' }}
@@ -365,8 +394,12 @@ export default function TextPage() {
<Text>
This text contains a view{' '}
<View style={{ borderColor: 'red', borderWidth: 1 }}>
<Text style={{ borderColor: 'blue', borderWidth: 1 }}>which contains</Text>
<Text style={{ borderColor: 'green', borderWidth: 1 }}>another text.</Text>
<Text style={{ borderColor: 'blue', borderWidth: 1 }}>
which contains
</Text>
<Text style={{ borderColor: 'green', borderWidth: 1 }}>
another text.
</Text>
<Text style={{ borderColor: 'yellow', borderWidth: 1 }}>
And contains another view
<View style={{ borderColor: 'red', borderWidth: 1 }}>
@@ -380,10 +413,12 @@ export default function TextPage() {
</Text>
<Text selectable={true}>
This text is <Text style={{ fontWeight: 'bold' }}>selectable</Text> if you click-and-hold.
This text is <Text style={{ fontWeight: 'bold' }}>selectable</Text> if
you click-and-hold.
</Text>
<Text selectable={false}>
This text is <Text style={{ fontWeight: 'bold' }}>not selectable</Text> if you
This text is{' '}
<Text style={{ fontWeight: 'bold' }}>not selectable</Text> if you
click-and-hold.
</Text>
@@ -421,7 +456,9 @@ export default function TextPage() {
</LineExample>
<LineExample description="With very long word, text is limited to 1 line and long word is truncated.">
<Text numberOfLines={1}>goal aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
<Text numberOfLines={1}>
goal aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</Text>
</LineExample>
<LineExample description="With space characters within adjacent truncated lines">
packages/react-native-web-examples/pages/view/index.js
Vendored
+4 -1
View File
@@ -16,7 +16,10 @@ function Box({ pointerEvents }) {
pointerEvents={pointerEvents}
style={({ pressed }) => [styles.box, pressed && styles.purple]}
>
<Pressable onPress={log} style={({ pressed }) => [styles.content, pressed && styles.orange]}>
<Pressable
onPress={log}
style={({ pressed }) => [styles.content, pressed && styles.orange]}
>
<Text>{pointerEvents}</Text>
</Pressable>
</Pressable>