kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Format 'examples' directory

Browse Source
This commit is contained in:
Nicolas Gallagher
2017-05-24 15:23:13 -07:00
parent 864250f34d
commit 61356a786b
24 changed files with 1379 additions and 1392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
examples/.storybook/config.js
View File

@@ -1,12 +1,12 @@
import { configure, addDecorator } from '@kadira/storybook'
import centered from './decorator-centered'
import { configure, addDecorator } from '@kadira/storybook';
import centered from './decorator-centered';
const context = require.context('../', true, /Example\.js$/)
const context = require.context('../', true, /Example\.js$/);
addDecorator(centered)
addDecorator(centered);
function loadStories() {
context.keys().forEach(context)
context.keys().forEach(context);
}
configure(loadStories, module)
configure(loadStories, module);

6
examples/.storybook/decorator-centered.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { StyleSheet, View } from 'react-native'
import { StyleSheet, View } from 'react-native';
const styles = StyleSheet.create({
root: {
@@ -9,9 +9,9 @@ const styles = StyleSheet.create({
}
});
export default function (renderStory) {
export default function(renderStory) {
return (
<View style={[ StyleSheet.absoluteFill, styles.root ]}>
<View style={[StyleSheet.absoluteFill, styles.root]}>
{renderStory()}
</View>
);

6
examples/.storybook/webpack.config.js
View File

@@ -1,5 +1,5 @@
const path = require('path')
const webpack = require('webpack')
const path = require('path');
const webpack = require('webpack');
const DEV = process.env.NODE_ENV !== 'production';
@@ -30,4 +30,4 @@ module.exports = {
'react-native': path.join(__dirname, '../../src/module')
}
}
}
};

17
examples/apis/Clipboard/ClipboardExample.js
View File

@@ -1,4 +1,4 @@
import { Clipboard, Text, TextInput, View } from 'react-native'
import { Clipboard, Text, TextInput, View } from 'react-native';
import React, { Component } from 'react';
import { action, storiesOf } from '@kadira/storybook';
@@ -12,13 +12,17 @@ class ClipboardExample extends Component {
placeholder={'Try pasting here afterwards'}
style={{ borderWidth: 1, height: 200, marginVertical: 20 }}
/>
<Text onPress={this._handleGet}>(Clipboard.getString returns a Promise that always resolves to an empty string on web)</Text>
<Text onPress={this._handleGet}>
(Clipboard.getString returns a Promise that always resolves to an empty string on web)
</Text>
</View>
)
);
}
_handleGet() {
Clipboard.getString().then((value) => { console.log(`Clipboard value: ${value}`) });
Clipboard.getString().then(value => {
console.log(`Clipboard value: ${value}`);
});
}
_handleSet() {
@@ -27,7 +31,4 @@ class ClipboardExample extends Component {
}
}
storiesOf('api: Clipboard', module)
.add('setString', () => (
<ClipboardExample />
));
storiesOf('api: Clipboard', module).add('setString', () => <ClipboardExample />);

29
examples/apis/I18nManager/I18nManagerExample.js
View File

@@ -1,50 +1,50 @@
import { storiesOf } from '@kadira/storybook';
import { I18nManager, StyleSheet, TouchableHighlight, Text, View } from 'react-native'
import { I18nManager, StyleSheet, TouchableHighlight, Text, View } from 'react-native';
import React, { Component } from 'react';
class I18nManagerExample extends Component {
componentWillUnmount() {
I18nManager.setPreferredLanguageRTL(false)
I18nManager.setPreferredLanguageRTL(false);
}
render() {
return (
<View style={styles.container}>
<Text accessibilityRole='heading' style={styles.welcome}>
<Text accessibilityRole="heading" style={styles.welcome}>
LTR/RTL layout example!
</Text>
<Text style={styles.text}>
The writing direction of text is automatically determined by the browser, independent of the global writing direction of the app.
</Text>
<Text style={[ styles.text, styles.rtlText ]}>
<Text style={[styles.text, styles.rtlText]}>
أحب اللغة العربية
</Text>
<Text style={[ styles.text, styles.textAlign ]}>
<Text style={[styles.text, styles.textAlign]}>
textAlign toggles
</Text>
<View style={styles.horizontal}>
<View style={[ styles.box, { backgroundColor: 'lightblue' } ]}>
<View style={[styles.box, { backgroundColor: 'lightblue' }]}>
<Text>One</Text>
</View>
<View style={[ styles.box ]}>
<View style={[styles.box]}>
<Text>Two</Text>
</View>
</View>
<TouchableHighlight
onPress={this._handleToggle}
style={styles.toggle}
underlayColor='rgba(0,0,0,0.25)'
underlayColor="rgba(0,0,0,0.25)"
>
<Text>Toggle LTR/RTL</Text>
</TouchableHighlight>
</View>
)
);
}
_handleToggle = () => {
I18nManager.setPreferredLanguageRTL(!I18nManager.isRTL)
I18nManager.setPreferredLanguageRTL(!I18nManager.isRTL);
this.forceUpdate();
}
};
}
const styles = StyleSheet.create({
@@ -82,9 +82,6 @@ const styles = StyleSheet.create({
marginTop: 10,
padding: 10
}
})
});
storiesOf('api: I18nManager', module)
.add('RTL layout', () => (
<I18nManagerExample />
))
storiesOf('api: I18nManager', module).add('RTL layout', () => <I18nManagerExample />);

16
examples/apis/Linking/LinkingExample.js
View File

@@ -1,4 +1,4 @@
import { Linking, StyleSheet, Text, View } from 'react-native'
import { Linking, StyleSheet, Text, View } from 'react-native';
import React, { Component } from 'react';
import { storiesOf, action } from '@kadira/storybook';
@@ -6,7 +6,7 @@ const url = 'https://mathiasbynens.github.io/rel-noopener/malicious.html';
class LinkingExample extends Component {
handlePress() {
Linking.canOpenURL(url).then((supported) => {
Linking.canOpenURL(url).then(supported => {
return Linking.openURL(url);
});
}
@@ -17,7 +17,12 @@ class LinkingExample extends Component {
<Text onPress={this.handlePress} style={styles.text}>
Linking.openURL (Expect: "The previous tab is safe and intact")
</Text>
<Text accessibilityRole='link' href='https://mathiasbynens.github.io/rel-noopener/malicious.html' style={styles.text} target='_blank'>
<Text
accessibilityRole="link"
href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
style={styles.text}
target="_blank"
>
target="_blank" (Expect: "The previous tab is safe and intact")
</Text>
</View>
@@ -31,7 +36,4 @@ const styles = StyleSheet.create({
}
});
storiesOf('api: Linking', module)
.add('Safe linking', () => (
<LinkingExample />
));
storiesOf('api: Linking', module).add('Safe linking', () => <LinkingExample />);

29
examples/apis/PanResponder/PanResponderExample.js
View File

@@ -5,11 +5,7 @@ import { storiesOf, action } from '@kadira/storybook';
var React = require('react');
var ReactNative = require('react-native');
var {
PanResponder,
StyleSheet,
View
} = ReactNative;
var { PanResponder, StyleSheet, View } = ReactNative;
var CIRCLE_SIZE = 80;
@@ -18,7 +14,7 @@ var PanResponderExample = createReactClass({
_previousLeft: 0,
_previousTop: 0,
_circleStyles: {},
circle: (null : ?{ setNativeProps(props: Object): void }),
circle: (null: ?{ setNativeProps(props: Object): void }),
componentWillMount: function() {
this._panResponder = PanResponder.create({
@@ -27,7 +23,7 @@ var PanResponderExample = createReactClass({
onPanResponderGrant: this._handlePanResponderGrant,
onPanResponderMove: this._handlePanResponderMove,
onPanResponderRelease: this._handlePanResponderEnd,
onPanResponderTerminate: this._handlePanResponderEnd,
onPanResponderTerminate: this._handlePanResponderEnd
});
this._previousLeft = 20;
this._previousTop = 84;
@@ -35,7 +31,7 @@ var PanResponderExample = createReactClass({
style: {
left: this._previousLeft,
top: this._previousTop,
backgroundColor: 'green',
backgroundColor: 'green'
}
};
},
@@ -46,10 +42,9 @@ var PanResponderExample = createReactClass({
render: function() {
return (
<View
style={styles.container}>
<View style={styles.container}>
<View
ref={(circle) => {
ref={circle => {
this.circle = circle;
}}
style={styles.circle}
@@ -95,7 +90,7 @@ var PanResponderExample = createReactClass({
this._unHighlight();
this._previousLeft += gestureState.dx;
this._previousTop += gestureState.dy;
},
}
});
var styles = StyleSheet.create({
@@ -104,14 +99,12 @@ var styles = StyleSheet.create({
height: CIRCLE_SIZE,
borderRadius: CIRCLE_SIZE / 2,
position: 'absolute',
top: 0,
top: 0
},
container: {
flex: 1,
paddingTop: 64,
},
paddingTop: 64
}
});
storiesOf('api: PanResponder', module)
.add('example', () => <PanResponderExample />)
storiesOf('api: PanResponder', module).add('example', () => <PanResponderExample />);

60
examples/components/ActivityIndicator/ActivityIndicatorExample.js
View File

@@ -1,7 +1,7 @@
import createReactClass from 'create-react-class';
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { ActivityIndicator, StyleSheet, View } from 'react-native'
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import TimerMixin from 'react-timer-mixin';
/**
@@ -32,13 +32,13 @@ const ToggleAnimatingActivityIndicator = createReactClass({
getInitialState() {
return {
animating: true,
animating: true
};
},
setToggleTimeout() {
this.setTimeout(() => {
this.setState({animating: !this.state.animating});
this.setState({ animating: !this.state.animating });
this.setToggleTimeout();
}, 2000);
},
@@ -63,11 +63,7 @@ const examples = [
{
title: 'Default',
render() {
return (
<ActivityIndicator
style={[styles.centering]}
/>
);
return <ActivityIndicator style={[styles.centering]} />;
}
},
{
@@ -87,11 +83,7 @@ const examples = [
title: 'Large',
render() {
return (
<ActivityIndicator
style={[styles.centering, styles.gray]}
color="white"
size="large"
/>
<ActivityIndicator style={[styles.centering, styles.gray]} color="white" size="large" />
);
}
},
@@ -100,22 +92,10 @@ const examples = [
render() {
return (
<View style={styles.horizontal}>
<ActivityIndicator
size="large"
color="#0000ff"
/>
<ActivityIndicator
size="large"
color="#aa00aa"
/>
<ActivityIndicator
size="large"
color="#aa3300"
/>
<ActivityIndicator
size="large"
color="#00aa00"
/>
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="large" color="#aa00aa" />
<ActivityIndicator size="large" color="#aa3300" />
<ActivityIndicator size="large" color="#00aa00" />
</View>
);
}
@@ -137,33 +117,29 @@ const examples = [
return (
<View style={[styles.horizontal, styles.centering]}>
<ActivityIndicator size={40} />
<ActivityIndicator
style={{ marginLeft: 20, transform: [ {scale: 1.5} ] }}
size="large"
/>
<ActivityIndicator style={{ marginLeft: 20, transform: [{ scale: 1.5 }] }} size="large" />
</View>
);
}
},
}
];
const styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
padding: 8
},
gray: {
backgroundColor: '#cccccc',
backgroundColor: '#cccccc'
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 8,
},
padding: 8
}
});
examples.forEach((example) => {
storiesOf('component: ActivityIndicator', module)
.add(example.title, () => example.render())
})
examples.forEach(example => {
storiesOf('component: ActivityIndicator', module).add(example.title, () => example.render());
});

20
examples/components/Button/ButtonExample.js
View File

@@ -18,7 +18,7 @@ const examples = [
accessibilityLabel="See an informative alert"
/>
);
},
}
},
{
title: 'Adjusted color',
@@ -34,15 +34,14 @@ const examples = [
accessibilityLabel="Learn more about purple"
/>
);
},
}
},
{
title: 'Fit to text layout',
description: 'This layout strategy lets the title define the width of ' +
'the button',
description: 'This layout strategy lets the title define the width of ' + 'the button',
render: function() {
return (
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Button
onPress={onButtonPress}
title="This looks great!"
@@ -56,7 +55,7 @@ const examples = [
/>
</View>
);
},
}
},
{
title: 'Disabled Button',
@@ -70,11 +69,10 @@ const examples = [
accessibilityLabel="See an informative alert"
/>
);
},
},
}
}
];
examples.forEach((example) => {
storiesOf('component: Button', module)
.add(example.title, () => example.render());
examples.forEach(example => {
storiesOf('component: Button', module).add(example.title, () => example.render());
});

368
examples/components/Image/ImageExample.js
View File

@@ -1,7 +1,7 @@
import createReactClass from 'create-react-class';
import React from 'react';
import { storiesOf, action, addDecorator } from '@kadira/storybook';
import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'react-native'
import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'react-native';
/**
* Copyright (c) 2013-present, Facebook, Inc.
@@ -26,7 +26,8 @@ import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'reac
* @flow
*/
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
var base64Icon =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
//var ImageCapInsetsExample = require('./ImageCapInsetsExample');
const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
@@ -37,12 +38,12 @@ var NetworkImageCallbackExample = createReactClass({
return {
events: [],
startLoadPrefetched: false,
mountTime: new Date(),
mountTime: new Date()
};
},
componentWillMount() {
this.setState({mountTime: new Date()});
this.setState({ mountTime: new Date() });
},
render: function() {
@@ -52,30 +53,36 @@ var NetworkImageCallbackExample = createReactClass({
<View>
<Image
source={this.props.source}
style={[styles.base, {overflow: 'visible'}]}
style={[styles.base, { overflow: 'visible' }]}
onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
onLoadEnd={() => {
this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
this.setState({startLoadPrefetched: true}, () => {
prefetchTask.then(() => {
this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
}, error => {
this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
});
this.setState({ startLoadPrefetched: true }, () => {
prefetchTask.then(
() => {
this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
},
error => {
this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
}
);
});
}}
/>
{this.state.startLoadPrefetched ?
<Image
source={this.props.prefetchedSource}
style={[styles.base, {overflow: 'visible'}]}
onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
/>
{this.state.startLoadPrefetched
? <Image
source={this.props.prefetchedSource}
style={[styles.base, { overflow: 'visible' }]}
onLoadStart={() =>
this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
onLoad={() =>
this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
onLoadEnd={() =>
this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
/>
: null}
<Text style={{marginTop: 20}}>
<Text style={{ marginTop: 20 }}>
{this.state.events.join('\n')}
</Text>
</View>
@@ -83,8 +90,8 @@ var NetworkImageCallbackExample = createReactClass({
},
_loadEventFired(event) {
this.setState((state) => {
return state.events = [...state.events, event];
this.setState(state => {
return (state.events = [...state.events, event]);
});
}
});
@@ -98,22 +105,27 @@ var NetworkImageExample = createReactClass({
};
},
render: function() {
var loader = this.state.loading ?
<View style={styles.progress}>
<Text>{this.state.progress}%</Text>
<ActivityIndicator style={{marginLeft:5}} />
</View> : null;
return this.state.error ?
<Text>{this.state.error}</Text> :
<Image
source={this.props.source}
style={[styles.base, {overflow: 'visible'}]}
onLoadStart={(e) => this.setState({loading: true})}
onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
onLoad={() => this.setState({loading: false, error: false})}>
{loader}
</Image>;
var loader = this.state.loading
? <View style={styles.progress}>
<Text>{this.state.progress}%</Text>
<ActivityIndicator style={{ marginLeft: 5 }} />
</View>
: null;
return this.state.error
? <Text>{this.state.error}</Text>
: <Image
source={this.props.source}
style={[styles.base, { overflow: 'visible' }]}
onLoadStart={e => this.setState({ loading: true })}
onError={e => this.setState({ error: e.nativeEvent.error, loading: false })}
onProgress={e =>
this.setState({
progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)
})}
onLoad={() => this.setState({ loading: false, error: false })}
>
{loader}
</Image>;
}
});
@@ -121,12 +133,12 @@ var ImageSizeExample = createReactClass({
getInitialState: function() {
return {
width: 0,
height: 0,
height: 0
};
},
componentDidMount: function() {
Image.getSize(this.props.source.uri, (width, height) => {
this.setState({width, height});
this.setState({ width, height });
});
},
render: function() {
@@ -147,7 +159,7 @@ var ImageSizeExample = createReactClass({
/>
</View>
);
},
}
});
/*
@@ -213,20 +225,24 @@ const examples = [
{
title: 'Plain Network Image',
description: 'If the `source` prop `uri` property is prefixed with ' +
'"http", then it will be downloaded from the network.',
'"http", then it will be downloaded from the network.',
render: function() {
return (
<Image
source={{ uri: 'http://facebook.github.io/react/img/logo_og.png', width: 1200, height: 630 }}
source={{
uri: 'http://facebook.github.io/react/img/logo_og.png',
width: 1200,
height: 630
}}
style={styles.base}
/>
);
},
}
},
{
title: 'Plain Static Image',
description: 'Static assets should be placed in the source code tree, and ' +
'required in the same way as JavaScript modules.',
'required in the same way as JavaScript modules.',
render: function() {
return (
<View style={styles.horizontal}>
@@ -236,36 +252,40 @@ const examples = [
{/*<Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />*/}
</View>
);
},
}
},
{
title: 'Image Loading Events',
render: function() {
return (
<NetworkImageCallbackExample
source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now()}}
prefetchedSource={{uri: IMAGE_PREFETCH_URL}}
source={{ uri: 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now() }}
prefetchedSource={{ uri: IMAGE_PREFETCH_URL }}
/>
);
},
}
},
{
title: 'Error Handler',
render: function() {
return (
<NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
<NetworkImageExample
source={{ uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png' }}
/>
);
},
platform: 'ios',
platform: 'ios'
},
{
title: 'Image Download Progress',
render: function() {
return (
<NetworkImageExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1'}}/>
<NetworkImageExample
source={{ uri: 'http://origami.design/public/images/bird-logo.png?r=1' }}
/>
);
},
platform: 'ios',
platform: 'ios'
},
{
title: 'defaultSource',
@@ -274,12 +294,12 @@ const examples = [
return (
<Image
defaultSource={require('./bunny.png')}
source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
source={{ uri: 'http://facebook.github.io/origami/public/images/birds.jpg' }}
style={styles.base}
/>
);
},
platform: 'ios',
platform: 'ios'
},
{
title: 'Border Color',
@@ -288,15 +308,11 @@ const examples = [
<View style={styles.horizontal}>
<Image
source={smallImage}
style={[
styles.base,
styles.background,
{borderWidth: 3, borderColor: '#f099f0'}
]}
style={[styles.base, styles.background, { borderWidth: 3, borderColor: '#f099f0' }]}
/>
</View>
);
},
}
},
{
title: 'Border Width',
@@ -305,32 +321,25 @@ const examples = [
<View style={styles.horizontal}>
<Image
source={smallImage}
style={[
styles.base,
styles.background,
{borderWidth: 5, borderColor: '#f099f0'}
]}
style={[styles.base, styles.background, { borderWidth: 5, borderColor: '#f099f0' }]}
/>
</View>
);
},
}
},
{
title: 'Border Radius',
render: function() {
return (
<View style={styles.horizontal}>
<Image style={[styles.base, { borderRadius: 5 }]} source={fullImage} />
<Image
style={[styles.base, {borderRadius: 5}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {borderRadius: 19}]}
style={[styles.base, styles.leftMargin, { borderRadius: 19 }]}
source={fullImage}
/>
</View>
);
},
}
},
{
title: 'Background Color',
@@ -339,71 +348,47 @@ const examples = [
<View style={styles.horizontal}>
<Image source={smallImage} style={styles.base} />
<Image
style={[
styles.base,
styles.leftMargin,
{backgroundColor: 'rgba(0, 0, 100, 0.25)'}
]}
style={[styles.base, styles.leftMargin, { backgroundColor: 'rgba(0, 0, 100, 0.25)' }]}
source={smallImage}
/>
<Image
style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
style={[styles.base, styles.leftMargin, { backgroundColor: 'red' }]}
source={smallImage}
/>
<Image
style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
style={[styles.base, styles.leftMargin, { backgroundColor: 'black' }]}
source={smallImage}
/>
</View>
);
},
}
},
{
title: 'Opacity',
render: function() {
return (
<View style={styles.horizontal}>
<Image
style={[styles.base, {opacity: 1}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0}]}
source={fullImage}
/>
<Image style={[styles.base, { opacity: 1 }]} source={fullImage} />
<Image style={[styles.base, styles.leftMargin, { opacity: 0.8 }]} source={fullImage} />
<Image style={[styles.base, styles.leftMargin, { opacity: 0.6 }]} source={fullImage} />
<Image style={[styles.base, styles.leftMargin, { opacity: 0.4 }]} source={fullImage} />
<Image style={[styles.base, styles.leftMargin, { opacity: 0.2 }]} source={fullImage} />
<Image style={[styles.base, styles.leftMargin, { opacity: 0 }]} source={fullImage} />
</View>
);
},
}
},
{
title: 'Nesting',
render: function() {
return (
<Image
style={{width: 60, height: 60, backgroundColor: 'transparent'}}
source={fullImage}>
<Image style={{ width: 60, height: 60, backgroundColor: 'transparent' }} source={fullImage}>
<Text style={styles.nestedText}>
React
</Text>
</Image>
);
},
}
},
/*
{
@@ -466,67 +451,59 @@ const examples = [
<View>
{[smallImage, fullImage].map((image, index) => {
return (
<View key={index}>
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Contain
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.contain}
source={image}
/>
<View key={index}>
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Contain
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.contain}
source={image}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Cover
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.cover}
source={image}
/>
</View>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Cover
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.cover}
source={image}
/>
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Stretch
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.stretch}
source={image}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Repeat
</Text>
<Image style={styles.resizeMode} resizeMode={'repeat'} source={image} />
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Center
</Text>
<Image style={styles.resizeMode} resizeMode={'center'} source={image} />
</View>
</View>
</View>
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Stretch
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.stretch}
source={image}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Repeat
</Text>
<Image
style={styles.resizeMode}
resizeMode={'repeat'}
source={image}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Center
</Text>
<Image
style={styles.resizeMode}
resizeMode={'center'}
source={image}
/>
</View>
</View>
</View>
);
})}
);
})}
</View>
);
},
}
},
{
title: 'Animated GIF',
@@ -534,23 +511,20 @@ const examples = [
return (
<Image
style={styles.gif}
source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
source={{
uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'
}}
/>
);
},
platform: 'ios',
platform: 'ios'
},
{
title: 'Base64 image',
render: function() {
return (
<Image
style={styles.base64}
source={{uri: base64Icon, scale: 3}}
/>
);
return <Image style={styles.base64} source={{ uri: base64Icon, scale: 3 }} />;
},
platform: 'ios',
platform: 'ios'
},
/*
{
@@ -569,9 +543,15 @@ const examples = [
{
title: 'Image Size',
render: function() {
return <ImageSizeExample source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg' }} />;
},
},
return (
<ImageSizeExample
source={{
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg'
}}
/>
);
}
}
/*
{
title: 'MultipleSourcesExample',
@@ -586,13 +566,13 @@ const examples = [
*/
];
var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small_2x.png'};
var fullImage = { uri: 'http://facebook.github.io/react/img/logo_og.png' };
var smallImage = { uri: 'http://facebook.github.io/react/img/logo_small_2x.png' };
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
height: 38
},
progress: {
flex: 1,
@@ -601,13 +581,13 @@ var styles = StyleSheet.create({
width: 100
},
leftMargin: {
marginLeft: 10,
marginLeft: 10
},
background: {
backgroundColor: '#222222'
},
sectionText: {
marginVertical: 6,
marginVertical: 6
},
nestedText: {
marginLeft: 12,
@@ -623,32 +603,32 @@ var styles = StyleSheet.create({
},
resizeModeText: {
fontSize: 11,
marginBottom: 3,
marginBottom: 3
},
icon: {
width: 15,
height: 15,
height: 15
},
horizontal: {
flexDirection: 'row',
flexDirection: 'row'
},
gif: {
flex: 1,
height: 200,
height: 200
},
base64: {
flex: 1,
height: 50,
resizeMode: 'contain',
resizeMode: 'contain'
},
touchableText: {
fontWeight: '500',
color: 'blue',
},
color: 'blue'
}
});
examples.forEach((example) => {
examples.forEach(example => {
storiesOf('component: Image', module)
.addDecorator((renderStory) => <View style={{ width: '100%' }}>{renderStory()}</View>)
.add(example.title, () => example.render())
})
.addDecorator(renderStory => <View style={{ width: '100%' }}>{renderStory()}</View>)
.add(example.title, () => example.render());
});

26
examples/components/ListView/ListViewExample.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { ListView, StyleSheet, Text, View } from 'react-native';
const generateData = (length) => Array.from({ length }).map((item, i) => i);
const generateData = length => Array.from({ length }).map((item, i) => i);
const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
storiesOf('component: ListView', module)
@@ -13,11 +13,11 @@ storiesOf('component: ListView', module)
dataSource={dataSource.cloneWithRows(generateData(100))}
initialListSize={100}
// eslint-disable-next-line react/jsx-no-bind
onScroll={(e) => { console.log('ScrollView.onScroll', e); } }
onScroll={e => {
console.log('ScrollView.onScroll', e);
}}
// eslint-disable-next-line react/jsx-no-bind
renderRow={(row) => (
<View><Text>{row}</Text></View>
)}
renderRow={row => <View><Text>{row}</Text></View>}
scrollEventThrottle={1000} // 1 event per second
style={styles.scrollViewStyle}
/>
@@ -30,12 +30,12 @@ storiesOf('component: ListView', module)
dataSource={dataSource.cloneWithRows(generateData(5000))}
initialListSize={100}
// eslint-disable-next-line react/jsx-no-bind
onScroll={(e) => { console.log('ScrollView.onScroll', e); } }
onScroll={e => {
console.log('ScrollView.onScroll', e);
}}
pageSize={50}
// eslint-disable-next-line react/jsx-no-bind
renderRow={(row) => (
<View><Text>{row}</Text></View>
)}
renderRow={row => <View><Text>{row}</Text></View>}
scrollEventThrottle={1000} // 1 event per second
style={styles.scrollViewStyle}
/>
@@ -48,12 +48,12 @@ storiesOf('component: ListView', module)
dataSource={dataSource.cloneWithRows(generateData(5000))}
initialListSize={5}
// eslint-disable-next-line react/jsx-no-bind
onScroll={(e) => { console.log('ScrollView.onScroll', e); } }
onScroll={e => {
console.log('ScrollView.onScroll', e);
}}
pageSize={1}
// eslint-disable-next-line react/jsx-no-bind
renderRow={(row) => (
<View><Text>{row}</Text></View>
)}
renderRow={row => <View><Text>{row}</Text></View>}
scrollEventThrottle={1000} // 1 event per second
style={styles.scrollViewStyle}
/>

40
examples/components/ProgressBar/ProgressBarExample.js
View File

@@ -1,5 +1,5 @@
import createReactClass from 'create-react-class';
import { ProgressBar, StyleSheet, View } from 'react-native'
import { ProgressBar, StyleSheet, View } from 'react-native';
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import TimerMixin from 'react-timer-mixin';
@@ -32,7 +32,7 @@ var ProgressBarExample = createReactClass({
getInitialState() {
return {
progress: 0,
progress: 0
};
},
@@ -60,30 +60,29 @@ var ProgressBarExample = createReactClass({
<ProgressBar style={styles.progressView} color="yellow" progress={this.getProgress(0.8)} />
</View>
);
},
}
});
const examples = [{
title: 'progress',
render() {
return (
<ProgressBarExample />
);
const examples = [
{
title: 'progress',
render() {
return <ProgressBarExample />;
}
},
}, {
title: 'indeterminate',
render() {
return (
<ProgressBar indeterminate style={styles.progressView} trackColor='#D1E3F6' />
);
{
title: 'indeterminate',
render() {
return <ProgressBar indeterminate style={styles.progressView} trackColor="#D1E3F6" />;
}
}
}];
];
var styles = StyleSheet.create({
container: {
minWidth: 200,
marginTop: -20,
backgroundColor: 'transparent',
backgroundColor: 'transparent'
},
progressView: {
marginTop: 20,
@@ -91,7 +90,6 @@ var styles = StyleSheet.create({
}
});
examples.forEach((example) => {
storiesOf('component: ProgressBar', module)
.add(example.title, () => example.render())
})
examples.forEach(example => {
storiesOf('component: ProgressBar', module).add(example.title, () => example.render());
});

8
examples/components/ScrollView/ScrollViewExample.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { action, storiesOf } from '@kadira/storybook';
import { ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native'
import { ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
const onScroll = action('ScrollView.onScroll');
@@ -31,13 +31,13 @@ storiesOf('component: ScrollView', module)
style={styles.scrollViewStyle}
>
{Array.from({ length: 50 }).map((item, i) => (
<View key={i} style={[ styles.box, styles.horizontalBox ]}>
<View key={i} style={[styles.box, styles.horizontalBox]}>
<Text>{i}</Text>
</View>
))}
</ScrollView>
</View>
))
));
const styles = StyleSheet.create({
box: {
@@ -56,4 +56,4 @@ const styles = StyleSheet.create({
backgroundColor: '#eee',
padding: 10
}
})
});

102
examples/components/Switch/SwitchExample.js
View File

@@ -1,5 +1,5 @@
import createReactClass from 'create-react-class';
import { Platform, Switch, Text, View } from 'react-native'
import { Platform, Switch, Text, View } from 'react-native';
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
@@ -30,19 +30,19 @@ var BasicSwitchExample = createReactClass({
getInitialState() {
return {
trueSwitchIsOn: true,
falseSwitchIsOn: false,
falseSwitchIsOn: false
};
},
render() {
return (
<View>
<Switch
onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
style={{marginBottom: 10}}
onValueChange={value => this.setState({ falseSwitchIsOn: value })}
style={{ marginBottom: 10 }}
value={this.state.falseSwitchIsOn}
/>
<Switch
onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
onValueChange={value => this.setState({ trueSwitchIsOn: value })}
value={this.state.trueSwitchIsOn}
/>
</View>
@@ -54,23 +54,18 @@ var DisabledSwitchExample = createReactClass({
render() {
return (
<View>
<Switch
disabled={true}
style={{marginBottom: 10}}
value={true} />
<Switch
disabled={true}
value={false} />
<Switch disabled={true} style={{ marginBottom: 10 }} value={true} />
<Switch disabled={true} value={false} />
</View>
);
},
}
});
var ColorSwitchExample = createReactClass({
getInitialState() {
return {
colorTrueSwitchIsOn: true,
colorFalseSwitchIsOn: false,
colorFalseSwitchIsOn: false
};
},
render() {
@@ -79,28 +74,28 @@ var ColorSwitchExample = createReactClass({
<Switch
activeThumbColor="#428bca"
activeTrackColor="#A0C4E3"
onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
style={{marginBottom: 10}}
onValueChange={value => this.setState({ colorFalseSwitchIsOn: value })}
style={{ marginBottom: 10 }}
value={this.state.colorFalseSwitchIsOn}
/>
<Switch
activeThumbColor="#5CB85C"
activeTrackColor="#ADDAAD"
onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
onValueChange={value => this.setState({ colorTrueSwitchIsOn: value })}
thumbColor="#EBA9A7"
trackColor="#D9534F"
value={this.state.colorTrueSwitchIsOn}
/>
</View>
);
},
}
});
var EventSwitchExample = createReactClass({
getInitialState() {
return {
eventSwitchIsOn: false,
eventSwitchRegressionIsOn: true,
eventSwitchRegressionIsOn: true
};
},
render() {
@@ -108,24 +103,28 @@ var EventSwitchExample = createReactClass({
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View>
<Switch
onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
style={{marginBottom: 10}}
value={this.state.eventSwitchIsOn} />
onValueChange={value => this.setState({ eventSwitchIsOn: value })}
style={{ marginBottom: 10 }}
value={this.state.eventSwitchIsOn}
/>
<Switch
onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
style={{marginBottom: 10}}
value={this.state.eventSwitchIsOn} />
onValueChange={value => this.setState({ eventSwitchIsOn: value })}
style={{ marginBottom: 10 }}
value={this.state.eventSwitchIsOn}
/>
<Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
</View>
<View>
<Switch
onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
style={{marginBottom: 10}}
value={this.state.eventSwitchRegressionIsOn} />
onValueChange={value => this.setState({ eventSwitchRegressionIsOn: value })}
style={{ marginBottom: 10 }}
value={this.state.eventSwitchRegressionIsOn}
/>
<Switch
onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
style={{marginBottom: 10}}
value={this.state.eventSwitchRegressionIsOn} />
onValueChange={value => this.setState({ eventSwitchRegressionIsOn: value })}
style={{ marginBottom: 10 }}
value={this.state.eventSwitchRegressionIsOn}
/>
<Text>{this.state.eventSwitchRegressionIsOn ? 'On' : 'Off'}</Text>
</View>
</View>
@@ -137,20 +136,20 @@ var SizeSwitchExample = createReactClass({
getInitialState() {
return {
trueSwitchIsOn: true,
falseSwitchIsOn: false,
falseSwitchIsOn: false
};
},
render() {
return (
<View>
<Switch
onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
style={{marginBottom: 10, height: '3rem' }}
onValueChange={value => this.setState({ falseSwitchIsOn: value })}
style={{ marginBottom: 10, height: '3rem' }}
value={this.state.falseSwitchIsOn}
/>
<Switch
onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
style={{marginBottom: 10, width: 150 }}
onValueChange={value => this.setState({ trueSwitchIsOn: value })}
style={{ marginBottom: 10, width: 150 }}
value={this.state.trueSwitchIsOn}
/>
</View>
@@ -161,31 +160,42 @@ var SizeSwitchExample = createReactClass({
var examples = [
{
title: 'set to true or false',
render(): ReactElement<any> { return <BasicSwitchExample />; }
render(): ReactElement<any> {
return <BasicSwitchExample />;
}
},
{
title: 'disabled',
render(): ReactElement<any> { return <DisabledSwitchExample />; }
render(): ReactElement<any> {
return <DisabledSwitchExample />;
}
},
{
title: 'change events',
render(): ReactElement<any> { return <EventSwitchExample />; }
render(): ReactElement<any> {
return <EventSwitchExample />;
}
},
{
title: 'custom colors',
render(): ReactElement<any> { return <ColorSwitchExample />; }
render(): ReactElement<any> {
return <ColorSwitchExample />;
}
},
{
title: 'custom size',
render(): ReactElement<any> { return <SizeSwitchExample />; }
render(): ReactElement<any> {
return <SizeSwitchExample />;
}
},
{
title: 'controlled component',
render(): ReactElement<any> { return <Switch />; }
render(): ReactElement<any> {
return <Switch />;
}
}
];
examples.forEach((example) => {
storiesOf('component: Switch', module)
.add(example.title, () => example.render())
})
examples.forEach(example => {
storiesOf('component: Switch', module).add(example.title, () => example.render());
});

822
examples/components/Text/TextExample.js
View File

@@ -1,7 +1,7 @@
import createReactClass from 'create-react-class';
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { Image, StyleSheet, Text, View } from 'react-native'
import { Image, StyleSheet, Text, View } from 'react-native';
/**
* Copyright (c) 2013-present, Facebook, Inc.
@@ -29,7 +29,7 @@ import { Image, StyleSheet, Text, View } from 'react-native'
var Entity = createReactClass({
render: function() {
return (
<Text style={{fontWeight: '500', color: '#527fe4'}}>
<Text style={{ fontWeight: '500', color: '#527fe4' }}>
{this.props.children}
</Text>
);
@@ -38,7 +38,7 @@ var Entity = createReactClass({
var AttributeToggler = createReactClass({
getInitialState: function() {
return {fontWeight: 'bold', fontSize: 15};
return { fontWeight: 'bold', fontSize: 15 };
},
toggleWeight: function() {
this.setState({
@@ -51,7 +51,7 @@ var AttributeToggler = createReactClass({
});
},
render: function() {
var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
var curStyle = { fontWeight: this.state.fontWeight, fontSize: this.state.fontSize };
return (
<View>
<Text style={curStyle}>
@@ -60,14 +60,10 @@ var AttributeToggler = createReactClass({
<Text>
<Text>See how it will even work on <Text style={curStyle}>this nested text</Text></Text>
</Text>
<Text
style={{backgroundColor: '#ffaaaa', marginTop: 5}}
onPress={this.toggleWeight}>
<Text style={{ backgroundColor: '#ffaaaa', marginTop: 5 }} onPress={this.toggleWeight}>
Toggle Weight
</Text>
<Text
style={{backgroundColor: '#aaaaff', marginTop: 5}}
onPress={this.increaseSize}>
<Text style={{ backgroundColor: '#aaaaff', marginTop: 5 }} onPress={this.increaseSize}>
Increase Size
</Text>
</View>
@@ -76,398 +72,500 @@ var AttributeToggler = createReactClass({
});
const examples = [
{
title: 'Wrap',
render: function() {
return (
<Text style={{ WebkitFontSmoothing: 'antialiased' }}>
The text should wrap if it goes on multiple lines. See, this is going to
the next line.
</Text>
);
{
title: 'Wrap',
render: function() {
return (
<Text style={{ WebkitFontSmoothing: 'antialiased' }}>
The text should wrap if it goes on multiple lines. See, this is going to
the next line.
</Text>
);
}
},
}, {
title: 'Padding',
render: function() {
return (
<Text style={{padding: 10}}>
This text is indented by 10px padding on all sides.
</Text>
);
{
title: 'Padding',
render: function() {
return (
<Text style={{ padding: 10 }}>
This text is indented by 10px padding on all sides.
</Text>
);
}
},
}, {
title: 'Font Family',
render: function() {
return (
<View>
<Text style={{fontFamily: 'Cochin'}}>
Cochin
</Text>
<Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
Cochin bold
</Text>
<Text style={{fontFamily: 'Helvetica'}}>
Helvetica
</Text>
<Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
Helvetica bold
</Text>
<Text style={{fontFamily: 'Verdana'}}>
Verdana
</Text>
<Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
Verdana bold
</Text>
</View>
);
{
title: 'Font Family',
render: function() {
return (
<View>
<Text style={{ fontFamily: 'Cochin' }}>
Cochin
</Text>
<Text style={{ fontFamily: 'Cochin', fontWeight: 'bold' }}>
Cochin bold
</Text>
<Text style={{ fontFamily: 'Helvetica' }}>
Helvetica
</Text>
<Text style={{ fontFamily: 'Helvetica', fontWeight: 'bold' }}>
Helvetica bold
</Text>
<Text style={{ fontFamily: 'Verdana' }}>
Verdana
</Text>
<Text style={{ fontFamily: 'Verdana', fontWeight: 'bold' }}>
Verdana bold
</Text>
</View>
);
}
},
}, {
title: 'Font Size',
render: function() {
return (
<View>
<Text style={{fontSize: 23}}>
Size 23
</Text>
<Text style={{fontSize: 8}}>
Size 8
</Text>
</View>
);
{
title: 'Font Size',
render: function() {
return (
<View>
<Text style={{ fontSize: 23 }}>
Size 23
</Text>
<Text style={{ fontSize: 8 }}>
Size 8
</Text>
</View>
);
}
},
}, {
title: 'Color',
render: function() {
return (
<View>
<Text style={{color: 'red'}}>
Red color
</Text>
<Text style={{color: 'blue'}}>
Blue color
</Text>
</View>
);
{
title: 'Color',
render: function() {
return (
<View>
<Text style={{ color: 'red' }}>
Red color
</Text>
<Text style={{ color: 'blue' }}>
Blue color
</Text>
</View>
);
}
},
}, {
title: 'Font Weight',
render: function() {
return (
<View>
<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>
);
{
title: 'Font Weight',
render: function() {
return (
<View>
<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>
);
}
},
}, {
title: 'Font Style',
render: function() {
return (
<View>
<Text style={{fontStyle: 'normal'}}>
Normal text
</Text>
<Text style={{fontStyle: 'italic'}}>
Italic text
</Text>
</View>
);
{
title: 'Font Style',
render: function() {
return (
<View>
<Text style={{ fontStyle: 'normal' }}>
Normal text
</Text>
<Text style={{ fontStyle: 'italic' }}>
Italic text
</Text>
</View>
);
}
},
}, {
title: 'Text Decoration',
render: function() {
return (
<View>
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'solid'}}>
Solid underline
</Text>
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
Double underline with custom color
</Text>
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
Dashed underline with custom color
</Text>
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
Dotted underline with custom color
</Text>
<Text style={{textDecorationLine: 'none'}}>
None textDecoration
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
Solid line-through
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
Double line-through with custom color
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
Dashed line-through with custom color
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
Dotted line-through with custom color
</Text>
<Text style={{textDecorationLine: 'underline line-through'}}>
Both underline and line-through
</Text>
</View>
);
{
title: 'Text Decoration',
render: function() {
return (
<View>
<Text style={{ textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
Solid underline
</Text>
<Text
style={{
textDecorationLine: 'underline',
textDecorationStyle: 'double',
textDecorationColor: '#ff0000'
}}
>
Double underline with custom color
</Text>
<Text
style={{
textDecorationLine: 'underline',
textDecorationStyle: 'dashed',
textDecorationColor: '#9CDC40'
}}
>
Dashed underline with custom color
</Text>
<Text
style={{
textDecorationLine: 'underline',
textDecorationStyle: 'dotted',
textDecorationColor: 'blue'
}}
>
Dotted underline with custom color
</Text>
<Text style={{ textDecorationLine: 'none' }}>
None textDecoration
</Text>
<Text style={{ textDecorationLine: 'line-through', textDecorationStyle: 'solid' }}>
Solid line-through
</Text>
<Text
style={{
textDecorationLine: 'line-through',
textDecorationStyle: 'double',
textDecorationColor: '#ff0000'
}}
>
Double line-through with custom color
</Text>
<Text
style={{
textDecorationLine: 'line-through',
textDecorationStyle: 'dashed',
textDecorationColor: '#9CDC40'
}}
>
Dashed line-through with custom color
</Text>
<Text
style={{
textDecorationLine: 'line-through',
textDecorationStyle: 'dotted',
textDecorationColor: 'blue'
}}
>
Dotted line-through with custom color
</Text>
<Text style={{ textDecorationLine: 'underline line-through' }}>
Both underline and line-through
</Text>
</View>
);
}
},
}, {
title: 'Nested',
description: 'Nested text components will inherit the styles of their ' +
'parents (only backgroundColor is inherited from non-Text parents). ' +
'<Text> only supports other <Text> and raw text (strings) as children.',
render: function() {
return (
<View>
<Text>
(Normal text,
<Text style={{fontWeight: 'bold'}}>
(and bold
<Text style={{fontSize: 11, color: '#527fe4'}}>
(and tiny inherited bold blue)
{
title: 'Nested',
description: 'Nested text components will inherit the styles of their ' +
'parents (only backgroundColor is inherited from non-Text parents). ' +
'<Text> only supports other <Text> and raw text (strings) as children.',
render: function() {
return (
<View>
<Text>
(Normal text,
<Text style={{ fontWeight: 'bold' }}>
(and bold
<Text style={{ fontSize: 11, color: '#527fe4' }}>
(and tiny inherited bold blue)
</Text>
)
</Text>
)
</Text>
)
</Text>
<Text style={{opacity:0.7}}>
(opacity
<Text style={{ opacity: 0.7 }}>
(opacity
<Text>
(is inherited
<Text style={{opacity:0.7}}>
(and accumulated
<Text style={{backgroundColor:'#ffaaaa'}}>
(and also applies to the background)
</Text>
)
<Text style={{ opacity: 0.7 }}>
(and accumulated
<Text style={{ backgroundColor: '#ffaaaa' }}>
(and also applies to the background)
</Text>
)
</Text>
)
</Text>
)
</Text>
<Text style={{fontSize: 12}}>
<Entity>Entity Name</Entity>
</Text>
</View>
);
)
</Text>
<Text style={{ fontSize: 12 }}>
<Entity>Entity Name</Entity>
</Text>
</View>
);
}
},
}, {
title: 'Text Align',
render: function() {
return (
<View>
{
title: 'Text Align',
render: function() {
return (
<View>
<Text>
auto (default) - english LTR
</Text>
<Text>
أحب اللغة العربية auto (default) - arabic RTL
</Text>
<Text style={{ textAlign: '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
</Text>
<Text style={{ textAlign: '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.
</Text>
</View>
);
}
},
{
title: 'Letter Spacing',
render: function() {
return (
<View>
<Text style={{ letterSpacing: 0 }}>
letterSpacing = 0
</Text>
<Text style={{ letterSpacing: 2, marginTop: 5 }}>
letterSpacing = 2
</Text>
<Text style={{ letterSpacing: 9, marginTop: 5 }}>
letterSpacing = 9
</Text>
<Text style={{ letterSpacing: -1, marginTop: 5 }}>
letterSpacing = -1
</Text>
</View>
);
}
},
{
title: 'Spaces',
render: function() {
return (
<Text>
auto (default) - english LTR
A {'generated'} {' '} {'string'} and some &nbsp;&nbsp;&nbsp; spaces
</Text>
);
}
},
{
title: 'Line Height',
render: function() {
return (
<Text>
أحب اللغة العربية auto (default) - arabic RTL
<Text style={{ lineHeight: 35 }}>
A lot of space between the lines of this long passage that should
wrap once.
</Text>
</Text>
<Text style={{textAlign: '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
</Text>
<Text style={{textAlign: '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.
</Text>
</View>
);
);
}
},
}, {
title: 'Letter Spacing',
render: function() {
return (
<View>
<Text style={{letterSpacing: 0}}>
letterSpacing = 0
</Text>
<Text style={{letterSpacing: 2, marginTop: 5}}>
letterSpacing = 2
</Text>
<Text style={{letterSpacing: 9, marginTop: 5}}>
letterSpacing = 9
</Text>
<Text style={{letterSpacing: -1, marginTop: 5}}>
letterSpacing = -1
</Text>
</View>
);
{
title: 'Empty Text',
description: "It's ok to have Text with zero or null children.",
render: function() {
return <Text />;
}
},
}, {
title: 'Spaces',
render: function() {
return (
<Text>
A {'generated'} {' '} {'string'} and some &nbsp;&nbsp;&nbsp; spaces
</Text>
);
{
title: 'Toggling Attributes',
render: function(): ReactElement<any> {
return <AttributeToggler />;
}
},
}, {
title: 'Line Height',
render: function() {
return (
<Text>
<Text style={{lineHeight: 35}}>
A lot of space between the lines of this long passage that should
wrap once.
</Text>
</Text>
);
},
}, {
title: 'Empty Text',
description: 'It\'s ok to have Text with zero or null children.',
render: function() {
return (
<Text />
);
},
}, {
title: 'Toggling Attributes',
render: function(): ReactElement<any> {
return <AttributeToggler />;
},
}, {
title: 'backgroundColor attribute',
description: 'backgroundColor is inherited from all types of views.',
render: function() {
return (
<Text style={{backgroundColor: 'yellow'}}>
Yellow container background,
<Text style={{backgroundColor: '#ffaaaa'}}>
{' '}red background,
<Text style={{backgroundColor: '#aaaaff'}}>
{' '}blue background,
<Text>
{' '}inherited blue background,
<Text style={{backgroundColor: '#aaffaa'}}>
{' '}nested green background.
{
title: 'backgroundColor attribute',
description: 'backgroundColor is inherited from all types of views.',
render: function() {
return (
<Text style={{ backgroundColor: 'yellow' }}>
Yellow container background,
<Text style={{ backgroundColor: '#ffaaaa' }}>
{' '}red background,
<Text style={{ backgroundColor: '#aaaaff' }}>
{' '}blue background,
<Text>
{' '}inherited blue background,
<Text style={{ backgroundColor: '#aaffaa' }}>
{' '}nested green background.
</Text>
</Text>
</Text>
</Text>
</Text>
</Text>
);
);
}
},
}, {
title: 'numberOfLines attribute',
render: function() {
return (
<View>
<Text numberOfLines={1}>
Maximum of one line, no matter how much I write here. If I keep writing, it{"'"}ll just truncate after one line.
</Text>
<Text numberOfLines={2} style={{marginTop: 20}}>
Maximum of two lines, no matter how much I write here. If I keep writing, it{"'"}ll just truncate after two lines.
</Text>
<Text style={{marginTop: 20}}>
No maximum lines specified, no matter how much I write here. If I keep writing, it{"'"}ll just keep going and going.
</Text>
</View>
);
{
title: 'numberOfLines attribute',
render: function() {
return (
<View>
<Text numberOfLines={1}>
Maximum of one line, no matter how much I write here. If I keep writing, it
{"'"}
ll just truncate after one line.
</Text>
<Text numberOfLines={2} style={{ marginTop: 20 }}>
Maximum of two lines, no matter how much I write here. If I keep writing, it
{"'"}
ll just truncate after two lines.
</Text>
<Text style={{ marginTop: 20 }}>
No maximum lines specified, no matter how much I write here. If I keep writing, it
{"'"}
ll just keep going and going.
</Text>
</View>
);
}
},
}, {
title: 'Text highlighting (tap the link to see highlight)',
render: function() {
return (
<View>
<Text>Lorem ipsum dolor sit amet, <Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</Text> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
</View>
);
{
title: 'Text highlighting (tap the link to see highlight)',
render: function() {
return (
<View>
<Text>
Lorem ipsum dolor sit amet,
{' '}
<Text
suppressHighlighting={false}
style={{ backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue' }}
onPress={() => null}
>
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</Text>
{' '}
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Text>
</View>
);
}
},
}, {
title: 'allowFontScaling attribute',
render: function() {
return (
<View>
<Text>
By default, text will respect Text Size accessibility setting on iOS.
It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
{" "}<Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size</Text>
</Text>
<Text style={{marginTop: 10}}>
You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
</Text>
<Text allowFontScaling={false} style={{marginTop: 20}}>
This text will not scale.
</Text>
</View>
);
{
title: 'allowFontScaling attribute',
render: function() {
return (
<View>
<Text>
By default, text will respect Text Size accessibility setting on iOS.
It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
{' '}
<Text style={{ fontWeight: 'bold' }}>
Settings.app - Display & Brightness - Text Size
</Text>
</Text>
<Text style={{ marginTop: 10 }}>
You can disable scaling for your Text component by passing
{' '}
{'"'}
allowFontScaling=
{'{'}
false
{'}"'}
{' '}
prop.
</Text>
<Text allowFontScaling={false} style={{ marginTop: 20 }}>
This text will not scale.
</Text>
</View>
);
}
},
}, {
title: 'Inline views',
render: function() {
return (
<View>
<Text>
This text contains an inline blue view <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'}}/>. Neat, huh?
</Text>
</View>
);
{
title: 'Inline views',
render: function() {
return (
<View>
<Text>
This text contains an inline blue view
{' '}
<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' }}
/>
. Neat, huh?
</Text>
</View>
);
}
},
}, {
title: 'Text shadow',
render: function() {
return (
<View>
<Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
Demo text shadow
</Text>
</View>
);
{
title: 'Text shadow',
render: function() {
return (
<View>
<Text
style={{
fontSize: 20,
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 1,
textShadowColor: '#00cccc'
}}
>
Demo text shadow
</Text>
</View>
);
}
},
}, {
title: 'Line break mode',
render: function() {
return (
<View>
<Text numberOfLines={1}>
This very long text should be truncated with dots in the end.
</Text>
<Text lineBreakMode="middle" numberOfLines={1}>
This very long text should be truncated with dots in the middle.
</Text>
<Text lineBreakMode="head" numberOfLines={1}>
This very long text should be truncated with dots in the beginning.
</Text>
<Text lineBreakMode="clip" numberOfLines={1}>
This very looooooooooooooooooooooooooooong text should be clipped.
</Text>
</View>
);
},
}];
{
title: 'Line break mode',
render: function() {
return (
<View>
<Text numberOfLines={1}>
This very long text should be truncated with dots in the end.
</Text>
<Text lineBreakMode="middle" numberOfLines={1}>
This very long text should be truncated with dots in the middle.
</Text>
<Text lineBreakMode="head" numberOfLines={1}>
This very long text should be truncated with dots in the beginning.
</Text>
<Text lineBreakMode="clip" numberOfLines={1}>
This very looooooooooooooooooooooooooooong text should be clipped.
</Text>
</View>
);
}
}
];
var styles = StyleSheet.create({
backgroundColorText: {
margin: 5,
marginBottom: 0,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
}
});
examples.forEach((example) => {
examples.forEach(example => {
storiesOf('component: Text', module)
.addDecorator((renderStory) => <View style={{ width: 320 }}>{renderStory()}</View>)
.add(example.title, () => example.render())
})
.addDecorator(renderStory => <View style={{ width: 320 }}>{renderStory()}</View>)
.add(example.title, () => example.render());
});

258
examples/components/TextInput/TextInputExample.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { StyleSheet, Text, TextInput, View } from 'react-native'
import { StyleSheet, Text, TextInput, View } from 'react-native';
/**
* Copyright (c) 2013-present, Facebook, Inc.
@@ -43,16 +43,16 @@ class TextEventsExample extends React.Component {
curText: '<No Event>',
prevText: '<No Event>',
prev2Text: '<No Event>',
prev3Text: '<No Event>',
prev3Text: '<No Event>'
};
updateText = (text) => {
this.setState((state) => {
updateText = text => {
this.setState(state => {
return {
curText: text,
prevText: state.curText,
prev2Text: state.prevText,
prev3Text: state.prev2Text,
prev3Text: state.prev2Text
};
});
};
@@ -66,24 +66,21 @@ class TextEventsExample extends React.Component {
autoCorrect={false}
onFocus={() => this.updateText('onFocus')}
onBlur={() => this.updateText('onBlur')}
onChange={(event) => this.updateText(
'onChange text: ' + event.nativeEvent.text
)}
onEndEditing={(event) => this.updateText(
'onEndEditing text: ' + event.nativeEvent.text
)}
onSubmitEditing={(event) => this.updateText(
'onSubmitEditing text: ' + event.nativeEvent.text
)}
onSelectionChange={(event) => this.updateText(
'onSelectionChange range: ' +
event.nativeEvent.selection.start + ',' +
event.nativeEvent.selection.end
)}
onKeyPress={(event) => {
onChange={event => this.updateText('onChange text: ' + event.nativeEvent.text)}
onEndEditing={event => this.updateText('onEndEditing text: ' + event.nativeEvent.text)}
onSubmitEditing={event =>
this.updateText('onSubmitEditing text: ' + event.nativeEvent.text)}
onSelectionChange={event =>
this.updateText(
'onSelectionChange range: ' +
event.nativeEvent.selection.start +
',' +
event.nativeEvent.selection.end
)}
onKeyPress={event => {
this.updateText('onKeyPress key: ' + event.nativeEvent.key);
}}
style={[ styles.default, { maxWidth: 200 } ]}
style={[styles.default, { maxWidth: 200 }]}
/>
<Text style={styles.eventLabel}>
{this.state.curText}{'\n'}
@@ -103,7 +100,7 @@ class AutoExpandingTextInput extends React.Component {
super(props);
this.state = {
text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.',
height: 0,
height: 0
};
}
render() {
@@ -111,13 +108,13 @@ class AutoExpandingTextInput extends React.Component {
<TextInput
{...this.props}
multiline={true}
onChangeText={(text) => {
this.setState({text});
onChangeText={text => {
this.setState({ text });
}}
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
onContentSizeChange={event => {
this.setState({ height: event.nativeEvent.contentSize.height });
}}
style={[styles.default, {height: Math.max(35, this.state.height)}]}
style={[styles.default, { height: Math.max(35, this.state.height) }]}
value={this.state.text}
/>
);
@@ -129,7 +126,7 @@ class RewriteExample extends React.Component {
constructor(props) {
super(props);
this.state = {text: ''};
this.state = { text: '' };
}
render() {
var limit = 20;
@@ -140,14 +137,14 @@ class RewriteExample extends React.Component {
<TextInput
multiline={false}
maxLength={limit}
onChangeText={(text) => {
onChangeText={text => {
text = text.replace(/ /g, '_');
this.setState({text});
this.setState({ text });
}}
style={styles.default}
value={this.state.text}
/>
<Text style={[styles.remainder, {color: remainderColor}]}>
<Text style={[styles.remainder, { color: remainderColor }]}>
{remainder}
</Text>
</View>
@@ -160,15 +157,15 @@ class RewriteExampleInvalidCharacters extends React.Component {
constructor(props) {
super(props);
this.state = {text: ''};
this.state = { text: '' };
}
render() {
return (
<View style={styles.rewriteContainer}>
<TextInput
multiline={false}
onChangeText={(text) => {
this.setState({text: text.replace(/\s/g, '')});
onChangeText={text => {
this.setState({ text: text.replace(/\s/g, '') });
}}
style={styles.default}
value={this.state.text}
@@ -183,10 +180,9 @@ class TokenizedTextExample extends React.Component {
constructor(props) {
super(props);
this.state = {text: 'Hello #World'};
this.state = { text: 'Hello #World' };
}
render() {
//define delimiter
let delimiter = /\s+/;
@@ -216,8 +212,8 @@ class TokenizedTextExample extends React.Component {
value={parts.join('')}
multiline={true}
style={styles.multiline}
onChangeText={(text) => {
this.setState({text});
onChangeText={text => {
this.setState({ text });
}}
/>
</View>
@@ -226,7 +222,7 @@ class TokenizedTextExample extends React.Component {
}
class BlurOnSubmitExample extends React.Component {
focusNextField = (nextField) => {
focusNextField = nextField => {
this.refs[nextField].focus();
};
@@ -281,10 +277,10 @@ class BlurOnSubmitExample extends React.Component {
type SelectionExampleState = {
selection: {
start: number;
end?: number;
};
value: string;
start: number,
end?: number
},
value: string
};
class SelectionExample extends React.Component {
@@ -295,13 +291,13 @@ class SelectionExample extends React.Component {
constructor(props) {
super(props);
this.state = {
selection: {start: 0, end: 0},
selection: { start: 0, end: 0 },
value: props.value
};
}
onSelectionChange({nativeEvent: {selection}}) {
this.setState({selection});
onSelectionChange({ nativeEvent: { selection } }) {
this.setState({ selection });
}
getRandomPosition() {
@@ -311,7 +307,7 @@ class SelectionExample extends React.Component {
select(start, end) {
this._textInput.focus();
this.setState({selection: {start, end}});
this.setState({ selection: { start, end } });
}
selectRandom() {
@@ -334,7 +330,7 @@ class SelectionExample extends React.Component {
<View>
<TextInput
multiline={this.props.multiline}
onChangeText={(value) => this.setState({value})}
onChangeText={value => this.setState({ value })}
onSelectionChange={this.onSelectionChange.bind(this)}
ref={textInput => (this._textInput = textInput)}
selection={this.state.selection}
@@ -368,7 +364,7 @@ class SelectionExample extends React.Component {
var styles = StyleSheet.create({
page: {
paddingBottom: 300,
paddingBottom: 300
},
default: {
height: 26,
@@ -376,7 +372,7 @@ var styles = StyleSheet.create({
borderColor: '#0f0f0f',
flex: 1,
fontSize: 13,
padding: 4,
padding: 4
},
multiline: {
borderWidth: 0.5,
@@ -385,49 +381,49 @@ var styles = StyleSheet.create({
fontSize: 13,
height: 50,
padding: 4,
marginBottom: 4,
marginBottom: 4
},
multilineWithFontStyles: {
color: 'blue',
fontWeight: 'bold',
fontSize: 18,
fontFamily: 'Cochin',
height: 60,
height: 60
},
multilineChild: {
width: 50,
height: 40,
position: 'absolute',
right: 5,
backgroundColor: 'red',
backgroundColor: 'red'
},
eventLabel: {
margin: 3,
fontSize: 12,
fontSize: 12
},
labelContainer: {
flexDirection: 'row',
marginVertical: 2,
flex: 1,
flex: 1
},
label: {
width: 115,
alignItems: 'flex-end',
marginRight: 10,
paddingTop: 2,
paddingTop: 2
},
rewriteContainer: {
flexDirection: 'row',
alignItems: 'center',
alignItems: 'center'
},
remainder: {
textAlign: 'right',
width: 24,
width: 24
},
hashtag: {
color: 'blue',
fontWeight: 'bold',
},
fontWeight: 'bold'
}
});
const examples = [
@@ -463,28 +459,16 @@ const examples = [
return (
<View>
<WithLabel label="none">
<TextInput
autoCapitalize="none"
style={styles.default}
/>
<TextInput autoCapitalize="none" style={styles.default} />
</WithLabel>
<WithLabel label="sentences">
<TextInput
autoCapitalize="sentences"
style={styles.default}
/>
<TextInput autoCapitalize="sentences" style={styles.default} />
</WithLabel>
<WithLabel label="words">
<TextInput
autoCapitalize="words"
style={styles.default}
/>
<TextInput autoCapitalize="words" style={styles.default} />
</WithLabel>
<WithLabel label="characters">
<TextInput
autoCapitalize="characters"
style={styles.default}
/>
<TextInput autoCapitalize="characters" style={styles.default} />
</WithLabel>
</View>
);
@@ -520,15 +504,12 @@ const examples = [
//'decimal-pad',
//'twitter',
'web-search',
'numeric',
'numeric'
];
var examples = keyboardTypes.map((type) => {
var examples = keyboardTypes.map(type => {
return (
<WithLabel key={type} label={type}>
<TextInput
keyboardType={type}
style={styles.default}
/>
<TextInput keyboardType={type} style={styles.default} />
</WithLabel>
);
});
@@ -538,18 +519,11 @@ const examples = [
{
title: 'Keyboard appearance',
render: function() {
var keyboardAppearance = [
'default',
'light',
'dark',
];
var examples = keyboardAppearance.map((type) => {
var keyboardAppearance = ['default', 'light', 'dark'];
var examples = keyboardAppearance.map(type => {
return (
<WithLabel key={type} label={type}>
<TextInput
keyboardAppearance={type}
style={styles.default}
/>
<TextInput keyboardAppearance={type} style={styles.default} />
</WithLabel>
);
});
@@ -570,15 +544,12 @@ const examples = [
'send',
'yahoo',
'done',
'emergency-call',
'emergency-call'
];
var examples = returnKeyTypes.map((type) => {
var examples = returnKeyTypes.map(type => {
return (
<WithLabel key={type} label={type}>
<TextInput
returnKeyType={type}
style={styles.default}
/>
<TextInput returnKeyType={type} style={styles.default} />
</WithLabel>
);
});
@@ -611,21 +582,17 @@ const examples = [
},
{
title: 'Event handling',
render: function(): React.Element<any> { return <TextEventsExample />; },
render: function(): React.Element<any> {
return <TextEventsExample />;
}
},
{
title: 'Colored input text',
render: function() {
return (
<View>
<TextInput
style={[styles.default, {color: 'blue'}]}
defaultValue="Blue"
/>
<TextInput
style={[styles.default, {color: 'green'}]}
defaultValue="Green"
/>
<TextInput style={[styles.default, { color: 'blue' }]} defaultValue="Blue" />
<TextInput style={[styles.default, { color: 'green' }]} defaultValue="Green" />
</View>
);
}
@@ -635,14 +602,10 @@ const examples = [
render: function() {
return (
<View>
<TextInput style={styles.default} selectionColor={'green'} defaultValue="Highlight me" />
<TextInput
style={styles.default}
selectionColor={"green"}
defaultValue="Highlight me"
/>
<TextInput
style={styles.default}
selectionColor={"rgba(86, 76, 205, 1)"}
selectionColor={'rgba(86, 76, 205, 1)'}
defaultValue="Highlight me"
/>
</View>
@@ -651,32 +614,20 @@ const examples = [
},
{
title: 'Clear button mode',
render: function () {
render: function() {
return (
<View>
<WithLabel label="never">
<TextInput
style={styles.default}
clearButtonMode="never"
/>
<TextInput style={styles.default} clearButtonMode="never" />
</WithLabel>
<WithLabel label="while editing">
<TextInput
style={styles.default}
clearButtonMode="while-editing"
/>
<TextInput style={styles.default} clearButtonMode="while-editing" />
</WithLabel>
<WithLabel label="unless editing">
<TextInput
style={styles.default}
clearButtonMode="unless-editing"
/>
<TextInput style={styles.default} clearButtonMode="unless-editing" />
</WithLabel>
<WithLabel label="always">
<TextInput
style={styles.default}
clearButtonMode="always"
/>
<TextInput style={styles.default} clearButtonMode="always" />
</WithLabel>
</View>
);
@@ -709,7 +660,9 @@ const examples = [
},
{
title: 'Blur on submit',
render: function(): React.Element<any> { return <BlurOnSubmitExample />; },
render: function(): React.Element<any> {
return <BlurOnSubmitExample />;
}
},
{
title: 'Multiline blur on submit',
@@ -733,11 +686,7 @@ const examples = [
render: function() {
return (
<View>
<TextInput
placeholder="multiline text input"
multiline={true}
style={styles.multiline}
/>
<TextInput placeholder="multiline text input" multiline={true} style={styles.multiline} />
<TextInput
placeholder="multiline text input with font styles and placeholder"
multiline={true}
@@ -779,7 +728,7 @@ const examples = [
<TextInput
multiline={true}
numberOfLines={4}
style={[ styles.multiline, { height: 'auto' } ]}
style={[styles.multiline, { height: 'auto' }]}
/>
</View>
);
@@ -810,14 +759,11 @@ const examples = [
render: function() {
return (
<View>
<SelectionExample
style={styles.default}
value="text selection can be changed"
/>
<SelectionExample style={styles.default} value="text selection can be changed" />
<SelectionExample
multiline
style={styles.multiline}
value={"multiline text selection\ncan also be changed"}
value={'multiline text selection\ncan also be changed'}
/>
</View>
);
@@ -829,31 +775,16 @@ const examples = [
return (
<View>
<WithLabel label="maxLength: 5">
<TextInput
maxLength={5}
style={styles.default}
/>
<TextInput maxLength={5} style={styles.default} />
</WithLabel>
<WithLabel label="maxLength: 5 with placeholder">
<TextInput
maxLength={5}
placeholder="ZIP code entry"
style={styles.default}
/>
<TextInput maxLength={5} placeholder="ZIP code entry" style={styles.default} />
</WithLabel>
<WithLabel label="maxLength: 5 with default value already set">
<TextInput
maxLength={5}
defaultValue="94025"
style={styles.default}
/>
<TextInput maxLength={5} defaultValue="94025" style={styles.default} />
</WithLabel>
<WithLabel label="maxLength: 5 with very long default value already set">
<TextInput
maxLength={5}
defaultValue="9402512345"
style={styles.default}
/>
<TextInput maxLength={5} defaultValue="9402512345" style={styles.default} />
</WithLabel>
</View>
);
@@ -861,7 +792,6 @@ const examples = [
}
];
examples.forEach((example) => {
storiesOf('component: TextInput', module)
.add(example.title, () => example.render())
examples.forEach(example => {
storiesOf('component: TextInput', module).add(example.title, () => example.render());
});

283
examples/components/Touchable/TouchableExample.js
View File

@@ -9,8 +9,8 @@ import {
TouchableOpacity,
Platform,
TouchableNativeFeedback,
View,
} from 'react-native'
View
} from 'react-native';
/**
* Copyright (c) 2013-present, Facebook, Inc.
@@ -36,92 +36,98 @@ import {
*/
const examples = [
{
title: '<TouchableHighlight>',
description: 'TouchableHighlight works by adding an extra view with a ' +
'black background under the single child view. This works best when the ' +
'child view is fully opaque, although it can be made to work as a simple ' +
'background color change as well with the activeOpacity and ' +
'underlayColor props.',
render: function() {
return (
<View>
<View style={styles.row}>
<TouchableHighlight
style={styles.wrapper}
onPress={() => console.log('stock THW image - highlight')}>
<Image
source={heartImage}
style={styles.image}
/>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
activeOpacity={1}
underlayColor="rgb(210, 230, 255)"
onPress={() => console.log('custom THW text - highlight')}>
<View style={styles.wrapperCustom}>
<Text style={styles.text}>
Tap Here For Custom Highlight!
</Text>
</View>
</TouchableHighlight>
{
title: '<TouchableHighlight>',
description: 'TouchableHighlight works by adding an extra view with a ' +
'black background under the single child view. This works best when the ' +
'child view is fully opaque, although it can be made to work as a simple ' +
'background color change as well with the activeOpacity and ' +
'underlayColor props.',
render: function() {
return (
<View>
<View style={styles.row}>
<TouchableHighlight
style={styles.wrapper}
onPress={() => console.log('stock THW image - highlight')}
>
<Image source={heartImage} style={styles.image} />
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
activeOpacity={1}
underlayColor="rgb(210, 230, 255)"
onPress={() => console.log('custom THW text - highlight')}
>
<View style={styles.wrapperCustom}>
<Text style={styles.text}>
Tap Here For Custom Highlight!
</Text>
</View>
</TouchableHighlight>
</View>
</View>
</View>
);
);
}
},
}, {
title: '<Text onPress={fn}> with highlight',
render: function(): ReactElement<any> {
return <TextOnPressBox />;
{
title: '<Text onPress={fn}> with highlight',
render: function(): ReactElement<any> {
return <TextOnPressBox />;
}
},
}, {
title: 'Touchable feedback events',
description: '<Touchable*> components accept onPress, onPressIn, ' +
'onPressOut, and onLongPress as props.',
render: function(): ReactElement<any> {
return <TouchableFeedbackEvents />;
{
title: 'Touchable feedback events',
description: '<Touchable*> components accept onPress, onPressIn, ' +
'onPressOut, and onLongPress as props.',
render: function(): ReactElement<any> {
return <TouchableFeedbackEvents />;
}
},
}, {
title: 'Touchable delay for events',
description: '<Touchable*> components also accept delayPressIn, ' +
'delayPressOut, and delayLongPress as props. These props impact the ' +
'timing of feedback events.',
render: function(): ReactElement<any> {
return <TouchableDelayEvents />;
{
title: 'Touchable delay for events',
description: '<Touchable*> components also accept delayPressIn, ' +
'delayPressOut, and delayLongPress as props. These props impact the ' +
'timing of feedback events.',
render: function(): ReactElement<any> {
return <TouchableDelayEvents />;
}
},
}, {
title: '3D Touch / Force Touch',
description: 'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
render: function(): ReactElement<any> {
return <ForceTouchExample />;
{
title: '3D Touch / Force Touch',
description: 'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
render: function(): ReactElement<any> {
return <ForceTouchExample />;
},
platform: 'ios'
},
platform: 'ios',
}, {
title: 'Touchable Hit Slop',
description: '<Touchable*> components accept hitSlop prop which extends the touch area ' +
'without changing the view bounds.',
render: function(): ReactElement<any> {
return <TouchableHitSlop />;
},
}, {
title: 'Disabled Touchable*',
description: '<Touchable*> components accept disabled prop which prevents ' +
'any interaction with component',
render: function(): ReactElement<any> {
return <TouchableDisabled />;
},
}];
{
title: 'Touchable Hit Slop',
description: '<Touchable*> components accept hitSlop prop which extends the touch area ' +
'without changing the view bounds.',
render: function(): ReactElement<any> {
return <TouchableHitSlop />;
}
},
{
title: 'Disabled Touchable*',
description: '<Touchable*> components accept disabled prop which prevents ' +
'any interaction with component',
render: function(): ReactElement<any> {
return <TouchableDisabled />;
}
}
];
var TextOnPressBox = createReactClass({
getInitialState: function() {
return {
timesPressed: 0,
timesPressed: 0
};
},
textOnPress: function() {
this.setState({
timesPressed: this.state.timesPressed + 1,
timesPressed: this.state.timesPressed + 1
});
},
render: function() {
@@ -134,9 +140,7 @@ var TextOnPressBox = createReactClass({
return (
<View>
<Text
style={styles.textBlock}
onPress={this.textOnPress}>
<Text style={styles.textBlock} onPress={this.textOnPress}>
Text has built-in onPress handling
</Text>
<View style={styles.logBox}>
@@ -152,13 +156,13 @@ var TextOnPressBox = createReactClass({
var TouchableFeedbackEvents = createReactClass({
getInitialState: function() {
return {
eventLog: [],
eventLog: []
};
},
render: function() {
return (
<View testID="touchable_feedback_events">
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, { justifyContent: 'center' }]}>
<TouchableOpacity
style={styles.wrapper}
testID="touchable_feedback_events_button"
@@ -168,7 +172,8 @@ var TouchableFeedbackEvents = createReactClass({
onPress={() => this._appendEvent('press')}
onPressIn={() => this._appendEvent('pressIn')}
onPressOut={() => this._appendEvent('pressOut')}
onLongPress={() => this._appendEvent('longPress')}>
onLongPress={() => this._appendEvent('longPress')}
>
<Text style={styles.button}>
Press Me
</Text>
@@ -184,20 +189,20 @@ var TouchableFeedbackEvents = createReactClass({
var limit = 6;
var eventLog = this.state.eventLog.slice(0, limit - 1);
eventLog.unshift(eventName);
this.setState({eventLog});
},
this.setState({ eventLog });
}
});
var TouchableDelayEvents = createReactClass({
getInitialState: function() {
return {
eventLog: [],
eventLog: []
};
},
render: function() {
return (
<View testID="touchable_delay_events">
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, { justifyContent: 'center' }]}>
<TouchableOpacity
style={styles.wrapper}
testID="touchable_delay_events_button"
@@ -207,7 +212,8 @@ var TouchableDelayEvents = createReactClass({
delayPressOut={1000}
onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
delayLongPress={800}
onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
onLongPress={() => this._appendEvent('longPress - 800ms delay')}
>
<Text style={styles.button}>
Press Me
</Text>
@@ -223,20 +229,20 @@ var TouchableDelayEvents = createReactClass({
var limit = 6;
var eventLog = this.state.eventLog.slice(0, limit - 1);
eventLog.unshift(eventName);
this.setState({eventLog});
},
this.setState({ eventLog });
}
});
var ForceTouchExample = createReactClass({
getInitialState: function() {
return {
force: 0,
force: 0
};
},
_renderConsoleText: function() {
return View.forceTouchAvailable ?
'Force: ' + this.state.force.toFixed(3) :
'3D Touch is not available on this device';
return View.forceTouchAvailable
? 'Force: ' + this.state.force.toFixed(3)
: '3D Touch is not available on this device';
},
render: function() {
return (
@@ -244,13 +250,14 @@ var ForceTouchExample = createReactClass({
<View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
<Text>{this._renderConsoleText()}</Text>
</View>
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, { justifyContent: 'center' }]}>
<View
style={styles.wrapper}
testID="touchable_3dtouch_button"
onStartShouldSetResponder={() => true}
onResponderMove={(event) => this.setState({force: event.nativeEvent.force})}
onResponderRelease={(event) => this.setState({force: 0})}>
onResponderMove={event => this.setState({ force: event.nativeEvent.force })}
onResponderRelease={event => this.setState({ force: 0 })}
>
<Text style={styles.button}>
Press Me
</Text>
@@ -258,18 +265,18 @@ var ForceTouchExample = createReactClass({
</View>
</View>
);
},
}
});
var TouchableHitSlop = createReactClass({
getInitialState: function() {
return {
timesPressed: 0,
timesPressed: 0
};
},
onPress: function() {
this.setState({
timesPressed: this.state.timesPressed + 1,
timesPressed: this.state.timesPressed + 1
});
},
render: function() {
@@ -282,17 +289,18 @@ var TouchableHitSlop = createReactClass({
return (
<View testID="touchable_hit_slop">
<View style={[styles.row, {justifyContent: 'center'}]}>
<View style={[styles.row, { justifyContent: 'center' }]}>
<TouchableOpacity
onPress={this.onPress}
style={styles.hitSlopWrapper}
hitSlop={{top: 30, bottom: 30, left: 60, right: 60}}
testID="touchable_hit_slop_button">
hitSlop={{ top: 30, bottom: 30, left: 60, right: 60 }}
testID="touchable_hit_slop_button"
>
<Text style={styles.hitSlopButton}>
Press Outside This View
</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.logBox}>
<Text>
{log}
@@ -307,11 +315,19 @@ var TouchableDisabled = createReactClass({
render: function() {
return (
<View>
<TouchableOpacity disabled={true} style={[styles.row, styles.block]} onPress={action('TouchableOpacity')}>
<TouchableOpacity
disabled={true}
style={[styles.row, styles.block]}
onPress={action('TouchableOpacity')}
>
<Text style={styles.disabledButton}>Disabled TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity disabled={false} style={[styles.row, styles.block]} onPress={action('TouchableOpacity')}>
<TouchableOpacity
disabled={false}
style={[styles.row, styles.block]}
onPress={action('TouchableOpacity')}
>
<Text style={styles.button}>Enabled TouchableOpacity</Text>
</TouchableOpacity>
@@ -320,7 +336,8 @@ var TouchableDisabled = createReactClass({
disabled={true}
underlayColor="rgb(210, 230, 255)"
style={[styles.row, styles.block]}
onPress={action('TouchableHighlight')}>
onPress={action('TouchableHighlight')}
>
<Text style={styles.disabledButton}>
Disabled TouchableHighlight
</Text>
@@ -330,7 +347,8 @@ var TouchableDisabled = createReactClass({
activeOpacity={1}
underlayColor="rgb(210, 230, 255)"
style={[styles.row, styles.block]}
onPress={action('TouchableHighlight')}>
onPress={action('TouchableHighlight')}
>
<Text style={styles.button}>
Enabled TouchableHighlight
</Text>
@@ -340,85 +358,85 @@ var TouchableDisabled = createReactClass({
<TouchableNativeFeedback
style={[styles.row, styles.block]}
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.SelectableBackground()}>
background={TouchableNativeFeedback.SelectableBackground()}
>
<View>
<Text style={[styles.button, styles.nativeFeedbackButton]}>
Enabled TouchableNativeFeedback
</Text>
</View>
</TouchableNativeFeedback>
}
</TouchableNativeFeedback>}
{Platform.OS === 'android' &&
<TouchableNativeFeedback
disabled={true}
style={[styles.row, styles.block]}
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.SelectableBackground()}>
background={TouchableNativeFeedback.SelectableBackground()}
>
<View>
<Text style={[styles.disabledButton, styles.nativeFeedbackButton]}>
Disabled TouchableNativeFeedback
</Text>
</View>
</TouchableNativeFeedback>
}
</TouchableNativeFeedback>}
</View>
);
}
});
var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
var heartImage = { uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small' };
var styles = StyleSheet.create({
row: {
justifyContent: 'center',
flexDirection: 'row',
flexDirection: 'row'
},
icon: {
width: 24,
height: 24,
height: 24
},
image: {
width: 50,
height: 50,
height: 50
},
text: {
fontSize: 16,
fontSize: 16
},
block: {
padding: 10,
padding: 10
},
button: {
color: '#007AFF',
color: '#007AFF'
},
disabledButton: {
color: '#007AFF',
opacity: 0.5,
opacity: 0.5
},
nativeFeedbackButton: {
textAlign: 'center',
margin: 10,
margin: 10
},
hitSlopButton: {
color: 'white',
color: 'white'
},
wrapper: {
borderRadius: 8,
borderRadius: 8
},
wrapperCustom: {
borderRadius: 8,
padding: 6,
padding: 6
},
hitSlopWrapper: {
backgroundColor: 'red',
marginVertical: 30,
marginVertical: 30
},
logBox: {
padding: 20,
margin: 10,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
backgroundColor: '#f9f9f9'
},
eventLogBox: {
padding: 10,
@@ -426,7 +444,7 @@ var styles = StyleSheet.create({
height: 120,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
backgroundColor: '#f9f9f9'
},
forceTouchBox: {
padding: 10,
@@ -434,15 +452,14 @@ var styles = StyleSheet.create({
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
alignItems: 'center',
alignItems: 'center'
},
textBlock: {
fontWeight: '500',
color: 'blue',
},
color: 'blue'
}
});
examples.forEach((example) => {
storiesOf('component: Touchable*', module)
.add(example.title, () => example.render())
})
examples.forEach(example => {
storiesOf('component: Touchable*', module).add(example.title, () => example.render());
});

202
examples/components/View/ViewExample.js
View File

@@ -1,7 +1,7 @@
import createReactClass from 'create-react-class';
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
/**
* Copyright (c) 2013-present, Facebook, Inc.
@@ -30,25 +30,25 @@ var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
borderWidth: 1
},
shadowBox: {
width: 100,
height: 100,
borderWidth: 2,
borderWidth: 2
},
shadow: {
shadowOpacity: 0.5,
shadowColor: 'red',
shadowRadius: 3,
shadowOffset: { width: 3, height: 3 },
shadowOffset: { width: 3, height: 3 }
},
zIndex: {
justifyContent: 'space-around',
width: 100,
height: 50,
marginTop: -10,
},
marginTop: -10
}
});
var ViewBorderStyleExample = createReactClass({
@@ -62,23 +62,27 @@ var ViewBorderStyleExample = createReactClass({
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<View style={{
borderWidth: 1,
borderStyle: this.state.showBorder ? 'dashed' : null,
padding: 5
}}>
<Text style={{fontSize: 11}}>
<View
style={{
borderWidth: 1,
borderStyle: this.state.showBorder ? 'dashed' : null,
padding: 5
}}
>
<Text style={{ fontSize: 11 }}>
Dashed border style
</Text>
</View>
<View style={{
marginTop: 5,
borderWidth: 1,
borderRadius: 5,
borderStyle: this.state.showBorder ? 'dotted' : null,
padding: 5
}}>
<Text style={{fontSize: 11}}>
<View
style={{
marginTop: 5,
borderWidth: 1,
borderRadius: 5,
borderStyle: this.state.showBorder ? 'dotted' : null,
padding: 5
}}
>
<Text style={{ fontSize: 11 }}>
Dotted border style
</Text>
</View>
@@ -88,7 +92,7 @@ var ViewBorderStyleExample = createReactClass({
},
_handlePress() {
this.setState({showBorder: !this.state.showBorder});
this.setState({ showBorder: !this.state.showBorder });
}
});
@@ -104,29 +108,37 @@ var ZIndexExample = createReactClass({
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
<View style={[
styles.zIndex,
{marginTop: 0, backgroundColor: '#E57373', zIndex: indices[0]}
]}>
<Text style={{ paddingBottom: 10 }}>Tap to flip sorting order</Text>
<View
style={[
styles.zIndex,
{ marginTop: 0, backgroundColor: '#E57373', zIndex: indices[0] }
]}
>
<Text>ZIndex {indices[0]}</Text>
</View>
<View style={[
styles.zIndex,
{marginLeft: 50, backgroundColor: '#FFF176', zIndex: indices[1]}
]}>
<View
style={[
styles.zIndex,
{ marginLeft: 50, backgroundColor: '#FFF176', zIndex: indices[1] }
]}
>
<Text>ZIndex {indices[1]}</Text>
</View>
<View style={[
styles.zIndex,
{marginLeft: 100, backgroundColor: '#81C784', zIndex: indices[2]}
]}>
<View
style={[
styles.zIndex,
{ marginLeft: 100, backgroundColor: '#81C784', zIndex: indices[2] }
]}
>
<Text>ZIndex {indices[2]}</Text>
</View>
<View style={[
styles.zIndex,
{marginLeft: 150, backgroundColor: '#64B5F6', zIndex: indices[3]}
]}>
<View
style={[
styles.zIndex,
{ marginLeft: 150, backgroundColor: '#64B5F6', zIndex: indices[3] }
]}
>
<Text>ZIndex {indices[3]}</Text>
</View>
</View>
@@ -135,7 +147,7 @@ var ZIndexExample = createReactClass({
},
_handlePress() {
this.setState({flipped: !this.state.flipped});
this.setState({ flipped: !this.state.flipped });
}
});
@@ -144,74 +156,78 @@ const examples = [
title: 'Background Color',
render: function() {
return (
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
<View style={{ backgroundColor: '#527FE4', padding: 5 }}>
<Text style={{ fontSize: 11 }}>
Blue background
</Text>
</View>
);
},
}, {
}
},
{
title: 'Border',
render: function() {
return (
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
<View style={{ borderColor: '#527FE4', borderWidth: 5, padding: 10 }}>
<Text style={{ fontSize: 11 }}>5px blue border</Text>
</View>
);
},
}, {
}
},
{
title: 'Padding/Margin',
render: function() {
return (
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
<View style={{ borderColor: '#bb0000', borderWidth: 0.5 }}>
<View style={[styles.box, { padding: 5 }]}>
<Text style={{ fontSize: 11 }}>5px padding</Text>
</View>
<View style={[styles.box, {margin: 5}]}>
<Text style={{fontSize: 11}}>5px margin</Text>
<View style={[styles.box, { margin: 5 }]}>
<Text style={{ fontSize: 11 }}>5px margin</Text>
</View>
<View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
<Text style={{fontSize: 11}}>
<View style={[styles.box, { margin: 5, padding: 5, alignSelf: 'flex-start' }]}>
<Text style={{ fontSize: 11 }}>
5px margin and padding,
</Text>
<Text style={{fontSize: 11}}>
<Text style={{ fontSize: 11 }}>
widthAutonomous=true
</Text>
</View>
</View>
);
},
}, {
}
},
{
title: 'Border Radius',
render: function() {
return (
<View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
<View style={{ borderWidth: 0.5, borderRadius: 5, padding: 5 }}>
<Text style={{ fontSize: 11 }}>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames.
Use sparingly.
</Text>
</View>
);
},
}, {
}
},
{
title: 'Border Style',
render: function() {
return <ViewBorderStyleExample />;
},
}, {
}
},
{
title: 'Circle with Border Radius',
render: function() {
return (
<View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
);
},
}, {
return <View style={{ borderRadius: 10, borderWidth: 1, width: 20, height: 20 }} />;
}
},
{
title: 'Overflow',
render: function() {
return (
<View style={{flexDirection: 'row'}}>
<View style={{ flexDirection: 'row' }}>
<View
style={{
width: 95,
@@ -219,57 +235,59 @@ const examples = [
marginRight: 10,
marginBottom: 5,
overflow: 'hidden',
borderWidth: 0.5,
}}>
<View style={{width: 200, height: 20}}>
borderWidth: 0.5
}}
>
<View style={{ width: 200, height: 20 }}>
<Text>Overflow hidden</Text>
</View>
</View>
<View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
<View style={{width: 200, height: 20}}>
<View style={{ width: 95, height: 10, marginBottom: 5, borderWidth: 0.5 }}>
<View style={{ width: 200, height: 20 }}>
<Text>Overflow visible</Text>
</View>
</View>
</View>
);
},
}, {
}
},
{
title: 'Opacity',
render: function() {
return (
<View>
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
<View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
<View style={{ opacity: 0 }}><Text>Opacity 0</Text></View>
<View style={{ opacity: 0.1 }}><Text>Opacity 0.1</Text></View>
<View style={{ opacity: 0.3 }}><Text>Opacity 0.3</Text></View>
<View style={{ opacity: 0.5 }}><Text>Opacity 0.5</Text></View>
<View style={{ opacity: 0.7 }}><Text>Opacity 0.7</Text></View>
<View style={{ opacity: 0.9 }}><Text>Opacity 0.9</Text></View>
<View style={{ opacity: 1 }}><Text>Opacity 1</Text></View>
</View>
);
},
}, {
}
},
{
title: 'ZIndex',
render: function() {
return <ZIndexExample />;
},
}
},
{
title: 'Basic shadow',
render() {
return <View style={[ styles.shadowBox, styles.shadow ]} />;
return <View style={[styles.shadowBox, styles.shadow]} />;
}
},
{
title: 'Shaped shadow',
description: 'borderRadius: 50',
render() {
return <View style={[ styles.shadowBox, styles.shadow, {borderRadius: 50} ]} />;
return <View style={[styles.shadowBox, styles.shadow, { borderRadius: 50 }]} />;
}
}
];
examples.forEach((example) => {
storiesOf('component: View', module)
.add(example.title, () => example.render())
})
examples.forEach(example => {
storiesOf('component: View', module).add(example.title, () => example.render());
});

188
examples/components/View/ViewTransformsExample.js
View File

@@ -1,7 +1,7 @@
import createReactClass from 'create-react-class';
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { Animated, StyleSheet, Text, View } from 'react-native'
import { Animated, StyleSheet, Text, View } from 'react-native';
/**
* Copyright (c) 2013-present, Facebook, Inc.
@@ -28,7 +28,7 @@ import { Animated, StyleSheet, Text, View } from 'react-native'
var Flip = createReactClass({
getInitialState() {
return {
theta: new Animated.Value(45),
theta: new Animated.Value(45)
};
},
@@ -40,37 +40,52 @@ var Flip = createReactClass({
this.state.theta.setValue(0);
Animated.timing(this.state.theta, {
toValue: 360,
duration: 5000,
duration: 5000
}).start(this._animate);
},
render() {
return (
<View style={styles.flipCardContainer}>
<Animated.View style={[
styles.flipCard,
{transform: [
{perspective: 850},
{rotateX: this.state.theta.interpolate({
inputRange: [0, 180],
outputRange: ['0deg', '180deg']
})},
]}]}>
<Animated.View
style={[
styles.flipCard,
{
transform: [
{ perspective: 850 },
{
rotateX: this.state.theta.interpolate({
inputRange: [0, 180],
outputRange: ['0deg', '180deg']
})
}
]
}
]}
>
<Text style={styles.flipText}>
This text is flipping great.
</Text>
</Animated.View>
<Animated.View style={[styles.flipCard, {
position: 'absolute',
top: 0,
backgroundColor: 'red',
transform: [
{perspective: 850},
{rotateX: this.state.theta.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg']
})},
]}]}>
<Animated.View
style={[
styles.flipCard,
{
position: 'absolute',
top: 0,
backgroundColor: 'red',
transform: [
{ perspective: 850 },
{
rotateX: this.state.theta.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg']
})
}
]
}
]}
>
<Text style={styles.flipText}>
On the flip side...
</Text>
@@ -87,13 +102,13 @@ var styles = StyleSheet.create({
height: 50,
top: 0,
transform: [
{translateX: 100},
{translateY: 50},
{rotate: '30deg'},
{scaleX: 2},
{scaleY: 2},
{ translateX: 100 },
{ translateY: 50 },
{ rotate: '30deg' },
{ scaleX: 2 },
{ scaleY: 2 }
],
width: 50,
width: 50
},
box2: {
left: 0,
@@ -101,23 +116,21 @@ var styles = StyleSheet.create({
height: 50,
top: 0,
transform: [
{scaleX: 2},
{scaleY: 2},
{translateX: 100},
{translateY: 50},
{rotate: '30deg'},
{ scaleX: 2 },
{ scaleY: 2 },
{ translateX: 100 },
{ translateY: 50 },
{ rotate: '30deg' }
],
width: 50,
width: 50
},
box3step1: {
left: 0,
backgroundColor: 'lightpink',
height: 50,
top: 0,
transform: [
{rotate: '30deg'},
],
width: 50,
transform: [{ rotate: '30deg' }],
width: 50
},
box3step2: {
left: 0,
@@ -125,12 +138,8 @@ var styles = StyleSheet.create({
height: 50,
opacity: 0.5,
top: 0,
transform: [
{rotate: '30deg'},
{scaleX: 2},
{scaleY: 2},
],
width: 50,
transform: [{ rotate: '30deg' }, { scaleX: 2 }, { scaleY: 2 }],
width: 50
},
box3step3: {
left: 0,
@@ -139,46 +148,36 @@ var styles = StyleSheet.create({
opacity: 0.5,
top: 0,
transform: [
{rotate: '30deg'},
{scaleX: 2},
{scaleY: 2},
{translateX: 10},
{translateY: 50},
{ rotate: '30deg' },
{ scaleX: 2 },
{ scaleY: 2 },
{ translateX: 10 },
{ translateY: 50 }
],
width: 50,
width: 50
},
box4: {
left: 0,
backgroundColor: 'darkorange',
height: 50,
top: 0,
transform: [
{translateX: 20},
{translateY: 35},
{scale: 2.5},
{rotate: '-0.2rad'},
],
width: 100,
transform: [{ translateX: 20 }, { translateY: 35 }, { scale: 2.5 }, { rotate: '-0.2rad' }],
width: 100
},
box5: {
backgroundColor: 'maroon',
height: 50,
right: 0,
top: 0,
width: 50,
width: 50
},
box5Transform: {
transform: [
{translateX: -50},
{translateY: 35},
{rotate: '50deg'},
{scale: 2},
],
transform: [{ translateX: -50 }, { translateY: 35 }, { rotate: '50deg' }, { scale: 2 }]
},
flipCardContainer: {
marginVertical: 40,
flex: 1,
alignSelf: 'center',
alignSelf: 'center'
},
flipCard: {
width: 200,
@@ -186,13 +185,13 @@ var styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue',
backfaceVisibility: 'hidden',
backfaceVisibility: 'hidden'
},
flipText: {
width: 90,
fontSize: 20,
color: 'white',
fontWeight: 'bold',
fontWeight: 'bold'
}
});
@@ -200,88 +199,61 @@ const examples = [
{
title: 'Perspective',
description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
render(): ReactElement<any> { return <Flip />; }
render(): ReactElement<any> {
return <Flip />;
}
},
{
title: 'Translate, Rotate, Scale',
description: "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
render() {
return (
<View style={styles.box1} />
);
return <View style={styles.box1} />;
}
},
{
title: 'Scale, Translate, Rotate, ',
description: "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
render() {
return (
<View style={styles.box2} />
);
return <View style={styles.box2} />;
}
},
{
title: 'Rotate',
description: "rotate: '30deg'",
render() {
return (
<View style={styles.box3step1} />
);
return <View style={styles.box3step1} />;
}
},
{
title: 'Rotate, Scale',
description: "rotate: '30deg', scaleX: 2, scaleY: 2",
render() {
return (
<View style={styles.box3step2} />
);
return <View style={styles.box3step2} />;
}
},
{
title: 'Rotate, Scale, Translate ',
description: "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
render() {
return (
<View style={styles.box3step3} />
);
return <View style={styles.box3step3} />;
}
},
{
title: 'Translate, Scale, Rotate',
description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
render() {
return (
<View style={styles.box4} />
);
return <View style={styles.box4} />;
}
},
{
title: 'Translate, Rotate, Scale',
description: "translate: [-50, 35], rotate: '50deg', scale: 2",
render() {
return (
<View style={[styles.box5, styles.box5Transform]} />
);
return <View style={[styles.box5, styles.box5Transform]} />;
}
}
];
examples.forEach((example) => {
storiesOf('component: View (transforms)', module)
.add(example.title, () => example.render())
})
examples.forEach(example => {
storiesOf('component: View (transforms)', module).add(example.title, () => example.render());
});

109
examples/demos/Game2048/Game2048.js
View File

@@ -18,14 +18,7 @@
var React = require('react');
var ReactNative = require('react-native');
var {
Animated,
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
View,
} = ReactNative;
var { Animated, AppRegistry, StyleSheet, Text, TouchableOpacity, View } = ReactNative;
var GameBoard = require('./GameBoard');
@@ -43,10 +36,10 @@ class Board extends React.Component {
render() {
return (
<View style={styles.board}>
<View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
<View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
<View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
<View style={styles.row}><Cell/><Cell/><Cell/><Cell/></View>
<View style={styles.row}><Cell /><Cell /><Cell /><Cell /></View>
<View style={styles.row}><Cell /><Cell /><Cell /><Cell /></View>
<View style={styles.row}><Cell /><Cell /><Cell /><Cell /></View>
<View style={styles.row}><Cell /><Cell /><Cell /><Cell /></View>
{this.props.children}
</View>
);
@@ -68,34 +61,34 @@ class Tile extends React.Component {
this.state = {
opacity: new Animated.Value(0),
top: new Animated.Value(Tile._getPosition(tile.toRow())),
left: new Animated.Value(Tile._getPosition(tile.toColumn())),
left: new Animated.Value(Tile._getPosition(tile.toColumn()))
};
}
calculateOffset(): {top: number; left: number; opacity: number} {
calculateOffset(): { top: number, left: number, opacity: number } {
var tile = this.props.tile;
var offset = {
top: this.state.top,
left: this.state.left,
opacity: this.state.opacity,
opacity: this.state.opacity
};
if (tile.isNew()) {
Animated.timing(this.state.opacity, {
duration: 100,
toValue: 1,
toValue: 1
}).start();
} else {
Animated.parallel([
Animated.timing(offset.top, {
duration: 100,
toValue: Tile._getPosition(tile.toRow()),
toValue: Tile._getPosition(tile.toRow())
}),
Animated.timing(offset.left, {
duration: 100,
toValue: Tile._getPosition(tile.toColumn()),
}),
toValue: Tile._getPosition(tile.toColumn())
})
]).start();
}
return offset;
@@ -104,17 +97,13 @@ class Tile extends React.Component {
render() {
var tile = this.props.tile;
var tileStyles = [
styles.tile,
styles['tile' + tile.value],
this.calculateOffset(),
];
var tileStyles = [styles.tile, styles['tile' + tile.value], this.calculateOffset()];
var textStyles = [
styles.value,
tile.value > 4 && styles.whiteText,
tile.value > 100 && styles.threeDigits,
tile.value > 1000 && styles.fourDigits,
tile.value > 1000 && styles.fourDigits
];
return (
@@ -130,11 +119,10 @@ class GameEndOverlay extends React.Component {
var board = this.props.board;
if (!board.hasWon() && !board.hasLost()) {
return <View/>;
return <View />;
}
var message = board.hasWon() ?
'Good Job!' : 'Game Over';
var message = board.hasWon() ? 'Good Job!' : 'Game Over';
return (
<View style={styles.overlay}>
@@ -155,14 +143,14 @@ class Game2048 extends React.Component {
constructor(props: {}) {
super(props);
this.state = {
board: new GameBoard(),
board: new GameBoard()
};
this.startX = 0;
this.startY = 0;
}
restartGame() {
this.setState({board: new GameBoard()});
this.setState({ board: new GameBoard() });
}
handleTouchStart(event: Object) {
@@ -190,20 +178,21 @@ class Game2048 extends React.Component {
}
if (direction !== -1) {
this.setState({board: this.state.board.move(direction)});
this.setState({ board: this.state.board.move(direction) });
}
}
render() {
var tiles = this.state.board.tiles
.filter((tile) => tile.value)
.map((tile) => <Tile ref={tile.id} key={tile.id} tile={tile} />);
.filter(tile => tile.value)
.map(tile => <Tile ref={tile.id} key={tile.id} tile={tile} />);
return (
<View
style={styles.container}
onTouchStart={(event) => this.handleTouchStart(event)}
onTouchEnd={(event) => this.handleTouchEnd(event)}>
onTouchStart={event => this.handleTouchStart(event)}
onTouchEnd={event => this.handleTouchEnd(event)}
>
<Board>
{tiles}
</Board>
@@ -217,12 +206,12 @@ var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center'
},
board: {
padding: BOARD_PADDING,
backgroundColor: '#bbaaaa',
borderRadius: 5,
borderRadius: 5
},
overlay: {
position: 'absolute',
@@ -234,31 +223,31 @@ var styles = StyleSheet.create({
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center'
},
overlayMessage: {
fontSize: 40,
marginBottom: 20,
marginBottom: 20
},
tryAgain: {
backgroundColor: '#887761',
padding: 20,
borderRadius: 5,
borderRadius: 5
},
tryAgainText: {
color: '#ffffff',
fontSize: 20,
fontWeight: '500',
fontWeight: '500'
},
cell: {
width: CELL_SIZE,
height: CELL_SIZE,
borderRadius: 5,
backgroundColor: '#ddccbb',
margin: CELL_MARGIN,
margin: CELL_MARGIN
},
row: {
flexDirection: 'row',
flexDirection: 'row'
},
tile: {
position: 'absolute',
@@ -268,56 +257,56 @@ var styles = StyleSheet.create({
borderRadius: 5,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center'
},
value: {
fontSize: 24,
color: '#776666',
fontFamily: 'Verdana',
fontWeight: '500',
fontWeight: '500'
},
tile2: {
backgroundColor: '#eeeeee',
backgroundColor: '#eeeeee'
},
tile4: {
backgroundColor: '#eeeecc',
backgroundColor: '#eeeecc'
},
tile8: {
backgroundColor: '#ffbb87',
backgroundColor: '#ffbb87'
},
tile16: {
backgroundColor: '#ff9966',
backgroundColor: '#ff9966'
},
tile32: {
backgroundColor: '#ff7755',
backgroundColor: '#ff7755'
},
tile64: {
backgroundColor: '#ff5533',
backgroundColor: '#ff5533'
},
tile128: {
backgroundColor: '#eecc77',
backgroundColor: '#eecc77'
},
tile256: {
backgroundColor: '#eecc66',
backgroundColor: '#eecc66'
},
tile512: {
backgroundColor: '#eecc55',
backgroundColor: '#eecc55'
},
tile1024: {
backgroundColor: '#eecc33',
backgroundColor: '#eecc33'
},
tile2048: {
backgroundColor: '#eecc22',
backgroundColor: '#eecc22'
},
whiteText: {
color: '#ffffff',
color: '#ffffff'
},
threeDigits: {
fontSize: 20,
fontSize: 20
},
fourDigits: {
fontSize: 18,
},
fontSize: 18
}
});
AppRegistry.registerComponent('Game2048', () => Game2048);

7
examples/demos/Game2048/Game2048Example.js
View File

@@ -1,8 +1,5 @@
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import Game2048 from './Game2048'
import Game2048 from './Game2048';
storiesOf('demo: Game2048', module)
.add('the game', () => (
<Game2048 />
))
storiesOf('demo: Game2048', module).add('the game', () => <Game2048 />);

69
examples/demos/Game2048/GameBoard.js
View File

@@ -19,7 +19,7 @@
// NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
// with no modification except to format it for CommonJS and fix lint/flow errors
var rotateLeft = function (matrix) {
var rotateLeft = function(matrix) {
var rows = matrix.length;
var columns = matrix[0].length;
var res = [];
@@ -32,7 +32,7 @@ var rotateLeft = function (matrix) {
return res;
};
var Tile = function (value?: number, row?: number, column?: number) {
var Tile = function(value?: number, row?: number, column?: number) {
this.value = value || 0;
this.row = row || -1;
@@ -46,39 +46,42 @@ var Tile = function (value?: number, row?: number, column?: number) {
Tile.id = 0;
Tile.prototype.moveTo = function (row, column) {
Tile.prototype.moveTo = function(row, column) {
this.oldRow = this.row;
this.oldColumn = this.column;
this.row = row;
this.column = column;
};
Tile.prototype.isNew = function () {
Tile.prototype.isNew = function() {
return this.oldRow === -1 && !this.mergedInto;
};
Tile.prototype.hasMoved = function () {
return (this.fromRow() !== -1 && (this.fromRow() !== this.toRow() || this.fromColumn() !== this.toColumn())) ||
this.mergedInto;
Tile.prototype.hasMoved = function() {
return (
(this.fromRow() !== -1 &&
(this.fromRow() !== this.toRow() || this.fromColumn() !== this.toColumn())) ||
this.mergedInto
);
};
Tile.prototype.fromRow = function () {
Tile.prototype.fromRow = function() {
return this.mergedInto ? this.row : this.oldRow;
};
Tile.prototype.fromColumn = function () {
Tile.prototype.fromColumn = function() {
return this.mergedInto ? this.column : this.oldColumn;
};
Tile.prototype.toRow = function () {
Tile.prototype.toRow = function() {
return this.mergedInto ? this.mergedInto.row : this.row;
};
Tile.prototype.toColumn = function () {
Tile.prototype.toColumn = function() {
return this.mergedInto ? this.mergedInto.column : this.column;
};
var Board = function () {
var Board = function() {
this.tiles = [];
this.cells = [];
for (var i = 0; i < Board.size; ++i) {
@@ -89,7 +92,7 @@ var Board = function () {
this.won = false;
};
Board.prototype.addTile = function () {
Board.prototype.addTile = function() {
var res = new Tile();
Tile.apply(res, arguments);
this.tiles.push(res);
@@ -98,10 +101,12 @@ Board.prototype.addTile = function () {
Board.size = 4;
Board.prototype.moveLeft = function () {
Board.prototype.moveLeft = function() {
var hasChanged = false;
for (var row = 0; row < Board.size; ++row) {
var currentRow = this.cells[row].filter(function (tile) { return tile.value !== 0; });
var currentRow = this.cells[row].filter(function(tile) {
return tile.value !== 0;
});
var resultRow = [];
for (var target = 0; target < Board.size; ++target) {
var targetTile = currentRow.length ? currentRow.shift() : this.addTile();
@@ -114,17 +119,17 @@ Board.prototype.moveLeft = function () {
targetTile.value += tile2.value;
}
resultRow[target] = targetTile;
this.won = this.won || (targetTile.value === 2048);
hasChanged = hasChanged || (targetTile.value !== this.cells[row][target].value);
this.won = this.won || targetTile.value === 2048;
hasChanged = hasChanged || targetTile.value !== this.cells[row][target].value;
}
this.cells[row] = resultRow;
}
return hasChanged;
};
Board.prototype.setPositions = function () {
this.cells.forEach(function (row, rowIndex) {
row.forEach(function (tile, columnIndex) {
Board.prototype.setPositions = function() {
this.cells.forEach(function(row, rowIndex) {
row.forEach(function(tile, columnIndex) {
tile.oldRow = tile.row;
tile.oldColumn = tile.column;
tile.row = rowIndex;
@@ -136,12 +141,12 @@ Board.prototype.setPositions = function () {
Board.fourProbability = 0.1;
Board.prototype.addRandomTile = function () {
Board.prototype.addRandomTile = function() {
var emptyCells = [];
for (var r = 0; r < Board.size; ++r) {
for (var c = 0; c < Board.size; ++c) {
if (this.cells[r][c].value === 0) {
emptyCells.push({r: r, c: c});
emptyCells.push({ r: r, c: c });
}
}
}
@@ -151,7 +156,7 @@ Board.prototype.addRandomTile = function () {
this.cells[cell.r][cell.c] = this.addTile(newValue);
};
Board.prototype.move = function (direction) {
Board.prototype.move = function(direction) {
// 0 -> left, 1 -> up, 2 -> right, 3 -> down
this.clearOldTiles();
for (var i = 0; i < direction; ++i) {
@@ -168,30 +173,34 @@ Board.prototype.move = function (direction) {
return this;
};
Board.prototype.clearOldTiles = function () {
this.tiles = this.tiles.filter(function (tile) { return tile.markForDeletion === false; });
this.tiles.forEach(function (tile) { tile.markForDeletion = true; });
Board.prototype.clearOldTiles = function() {
this.tiles = this.tiles.filter(function(tile) {
return tile.markForDeletion === false;
});
this.tiles.forEach(function(tile) {
tile.markForDeletion = true;
});
};
Board.prototype.hasWon = function () {
Board.prototype.hasWon = function() {
return this.won;
};
Board.deltaX = [-1, 0, 1, 0];
Board.deltaY = [0, -1, 0, 1];
Board.prototype.hasLost = function () {
Board.prototype.hasLost = function() {
var canMove = false;
for (var row = 0; row < Board.size; ++row) {
for (var column = 0; column < Board.size; ++column) {
canMove = canMove || (this.cells[row][column].value === 0);
canMove = canMove || this.cells[row][column].value === 0;
for (var dir = 0; dir < 4; ++dir) {
var newRow = row + Board.deltaX[dir];
var newColumn = column + Board.deltaY[dir];
if (newRow < 0 || newRow >= Board.size || newColumn < 0 || newColumn >= Board.size) {
continue;
}
canMove = canMove || (this.cells[row][column].value === this.cells[newRow][newColumn].value);
canMove = canMove || this.cells[row][column].value === this.cells[newRow][newColumn].value;
}
}
}

87
examples/demos/TicTacToe/TicTacToe.js
View File

@@ -19,13 +19,7 @@
import createReactClass from 'create-react-class';
var React = require('react');
var ReactNative = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View,
} = ReactNative;
var { AppRegistry, StyleSheet, Text, TouchableHighlight, View } = ReactNative;
class Board {
grid: Array<Array<number>>;
@@ -57,26 +51,38 @@ class Board {
winner(): ?number {
for (var i = 0; i < 3; i++) {
if (this.grid[i][0] !== 0 && this.grid[i][0] === this.grid[i][1] &&
this.grid[i][0] === this.grid[i][2]) {
if (
this.grid[i][0] !== 0 &&
this.grid[i][0] === this.grid[i][1] &&
this.grid[i][0] === this.grid[i][2]
) {
return this.grid[i][0];
}
}
for (var i = 0; i < 3; i++) {
if (this.grid[0][i] !== 0 && this.grid[0][i] === this.grid[1][i] &&
this.grid[0][i] === this.grid[2][i]) {
if (
this.grid[0][i] !== 0 &&
this.grid[0][i] === this.grid[1][i] &&
this.grid[0][i] === this.grid[2][i]
) {
return this.grid[0][i];
}
}
if (this.grid[0][0] !== 0 && this.grid[0][0] === this.grid[1][1] &&
this.grid[0][0] === this.grid[2][2]) {
if (
this.grid[0][0] !== 0 &&
this.grid[0][0] === this.grid[1][1] &&
this.grid[0][0] === this.grid[2][2]
) {
return this.grid[0][0];
}
if (this.grid[0][2] !== 0 && this.grid[0][2] === this.grid[1][1] &&
this.grid[0][2] === this.grid[2][0]) {
if (
this.grid[0][2] !== 0 &&
this.grid[0][2] === this.grid[1][1] &&
this.grid[0][2] === this.grid[2][0]
) {
return this.grid[0][2];
}
@@ -134,7 +140,8 @@ var Cell = createReactClass({
<TouchableHighlight
onPress={this.props.onPress}
underlayColor="transparent"
activeOpacity={0.5}>
activeOpacity={0.5}
>
<View style={[styles.cell, this.cellStyle()]}>
<Text style={[styles.cellText, this.textStyle()]}>
{this.textContents()}
@@ -157,7 +164,7 @@ var GameEndOverlay = createReactClass({
var message;
if (tie) {
message = 'It\'s a tie!';
message = "It's a tie!";
} else {
message = (winner === 1 ? 'X' : 'O') + ' wins!';
}
@@ -168,7 +175,8 @@ var GameEndOverlay = createReactClass({
<TouchableHighlight
onPress={this.props.onRestart}
underlayColor="transparent"
activeOpacity={0.5}>
activeOpacity={0.5}
>
<View style={styles.newGame}>
<Text style={styles.newGameText}>New Game</Text>
</View>
@@ -198,22 +206,22 @@ var TicTacToeApp = createReactClass({
this.setState({
board: this.state.board.mark(row, col, this.state.player),
player: this.nextPlayer(),
player: this.nextPlayer()
});
},
render() {
var rows = this.state.board.grid.map((cells, row) =>
var rows = this.state.board.grid.map((cells, row) => (
<View key={'row' + row} style={styles.row}>
{cells.map((player, col) =>
{cells.map((player, col) => (
<Cell
key={'cell' + col}
player={player}
onPress={this.handleCellPress.bind(this, row, col)}
/>
)}
))}
</View>
);
));
return (
<View style={styles.container}>
@@ -221,10 +229,7 @@ var TicTacToeApp = createReactClass({
<View style={styles.board}>
{rows}
</View>
<GameEndOverlay
board={this.state.board}
onRestart={this.restartGame}
/>
<GameEndOverlay board={this.state.board} onRestart={this.restartGame} />
</View>
);
}
@@ -240,15 +245,15 @@ var styles = StyleSheet.create({
title: {
fontFamily: 'Chalkduster',
fontSize: 39,
marginBottom: 20,
marginBottom: 20
},
board: {
padding: 5,
backgroundColor: '#47525d',
borderRadius: 10,
borderRadius: 10
},
row: {
flexDirection: 'row',
flexDirection: 'row'
},
// CELL
@@ -261,13 +266,13 @@ var styles = StyleSheet.create({
margin: 5,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center'
},
cellX: {
backgroundColor: '#72d0eb',
backgroundColor: '#72d0eb'
},
cellO: {
backgroundColor: '#7ebd26',
backgroundColor: '#7ebd26'
},
// CELL TEXT
@@ -275,13 +280,13 @@ var styles = StyleSheet.create({
cellText: {
borderRadius: 5,
fontSize: 50,
fontFamily: 'AvenirNext-Bold',
fontFamily: 'AvenirNext-Bold'
},
cellTextX: {
color: '#19a9e5',
color: '#19a9e5'
},
cellTextO: {
color: '#b9dc2f',
color: '#b9dc2f'
},
// GAME OVER
@@ -296,7 +301,7 @@ var styles = StyleSheet.create({
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center'
},
overlayMessage: {
fontSize: 40,
@@ -304,18 +309,18 @@ var styles = StyleSheet.create({
marginLeft: 20,
marginRight: 20,
fontFamily: 'AvenirNext-DemiBold',
textAlign: 'center',
textAlign: 'center'
},
newGame: {
backgroundColor: '#887765',
padding: 20,
borderRadius: 5,
borderRadius: 5
},
newGameText: {
color: 'white',
fontSize: 20,
fontFamily: 'AvenirNext-DemiBold',
},
fontFamily: 'AvenirNext-DemiBold'
}
});
AppRegistry.registerComponent('TicTacToeApp', () => TicTacToeApp);

7
examples/demos/TicTacToe/TicTacToeExample.js
View File

@@ -1,8 +1,5 @@
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import TicTacToe from './TicTacToe'
import TicTacToe from './TicTacToe';
storiesOf('demo: TicTacToe', module)
.add('the game', () => (
<TicTacToe />
))
storiesOf('demo: TicTacToe', module).add('the game', () => <TicTacToe />);