diff --git a/example/example.js b/example/example.js
index 5ffc5d3c..dd96c566 100644
--- a/example/example.js
+++ b/example/example.js
@@ -1,52 +1,228 @@
-import React, { Image, Text, TextInput, View } from '../dist/react-native-web';
+import React, { Image, Swipeable, Text, TextInput, Touchable, View } from '../dist/react-native-web'
+
+const { Component, PropTypes } = React
+
+class Heading extends Component {
+ static propTypes = {
+ children: Text.propTypes.children,
+ level: PropTypes.oneOf(['1', '2', '3']),
+ size: PropTypes.oneOf(['xlarge', 'large', 'normal'])
+ }
+
+ static defaultProps = {
+ level: '1',
+ size: 'normal'
+ }
+
+ render() {
+ const { children, level, size } = this.props
+
+ return (
+
+ )
+ }
+}
+
+const headingStyles = {
+ size: {
+ xlarge: {
+ fontSize: '2rem',
+ marginBottom: '1em'
+ },
+ large: {
+ fontSize: '1.5rem',
+ marginBottom: '1em',
+ marginTop: '1em'
+ },
+ normal: {
+ fontSize: '1.25rem',
+ marginBottom: '0.5em',
+ marginTop: '0.5em'
+ }
+ }
+}
+
+class Example extends Component {
+ static propTypes = {
+ style: View.propTypes.style
+ }
-class Example extends React.Component {
render() {
return (
-
-
- {[1,2,3,4,5,6].map((item, i) => {
+
+ React Native for Web: examples
+
+ Image
+ Inner content}
+ defaultSource={{
+ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAIAAAAP3aGbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wkGESkdPWMDggAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAD5UlEQVR42u3UMQ0AAAgEMcC/x7eCCgaSVsIN10kK4IORADAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAswLAkAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAALi04UQW9HF910gAAAABJRU5ErkJggg=='
+ }}
+ onError={(e) => { console.log('Image.onError', e) }}
+ onLoad={(e) => { console.log('Image.onLoad', e) }}
+ onLoadEnd={() => { console.log('Image.onLoadEnd') }}
+ onLoadStart={() => { console.log('Image.onLoadStart') }}
+ resizeMode={'contain'}
+ source={{
+ height: 400,
+ uri: 'http://facebook.github.io/react/img/logo_og.png',
+ width: 400
+ }}
+ style={{
+ borderWidth: '5px'
+ }}
+ testID='Example.image'
+ />
+
+ Swipeable
+ { console.log('Swipeable.onSwiped', e) }}
+ testID={'Example.swipeable'}
+ >
+
+
+
+ Text
+ { console.log('Text.onPress', e) }}
+ testID={'Example.text'}
+ >
+ PRESS ME.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel
+ lectus urna. Aliquam vitae justo porttitor, aliquam erat nec,
+ venenatis diam. Vivamus facilisis augue non urna mattis ultricies.
+ Suspendisse et vulputate enim, a maximus nulla. Vivamus imperdiet
+ hendrerit consequat. Aliquam lorem quam, elementum eget ex nec,
+ ultrices porttitor nibh. Nulla pellentesque urna leo, a aliquet elit
+ rhoncus a. Aenean ultricies, nunc a interdum dictum, dui odio
+ scelerisque mauris, a fringilla elit ligula vel sem. Sed vel aliquet
+ ipsum, sed rhoncus velit. Vivamus commodo pretium libero id placerat.
+
+
+ TRUNCATED after 1 line.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel
+ lectus urna. Aliquam vitae justo porttitor, aliquam erat nec,
+ venenatis diam. Vivamus facilisis augue non urna mattis ultricies.
+ Suspendisse et vulputate enim, a maximus nulla. Vivamus imperdiet
+ hendrerit consequat.
+
+
+ TextInput
+ { console.log('TextInput.onBlur', e) }}
+ onChange={(e) => { console.log('TextInput.onChange', e) }}
+ onChangeText={(e) => { console.log('TextInput.onChangeText', e) }}
+ onFocus={(e) => { console.log('TextInput.onFocus', e) }}
+ />
+
+
+
+
+
+
+
+ Touchable
+ { console.log('Touchable.onLongPress', e) }}
+ onPress={(e) => { console.log('Touchable.onPress', e) }}
+ onPressIn={(e) => { console.log('Touchable.onPressIn', e) }}
+ onPressOut={(e) => { console.log('Touchable.onPressOut', e) }}
+ >
+
+ Touchable area (press, long press)
+
+
+
+ View
+ Default layout
+
+ {[ 1, 2, 3, 4, 5, 6 ].map((item, i) => {
return (
-
- {item}
+
+ {item}
- );
+ )
})}
-
- This should be centered
+ Row layout
+
+ {[ 1, 2, 3, 4, 5, 6 ].map((item, i) => {
+ return (
+
+ {item}
+
+ )
+ })}
-
-
+ pointerEvents
+
+ {['box-none', 'box-only', 'none'].map((value, i) => {
+ return (
+
+ )
+ })}
+
- );
+ )
}
}
const styles = {
- grid: {
+ root: {
+ fontFamily: 'sans-serif',
+ maxWidth: '600px',
+ margin: '0 auto'
+ },
+ row: {
flexDirection: 'row',
flexWrap: 'wrap'
},
box: {
alignItems: 'center',
- backgroundColor: 'lightblue',
flexGrow: 1,
justifyContent: 'center',
- borderColor: 'blue',
- borderWidth: '5px'
+ borderWidth: '1px'
},
boxFull: {
width: '100%'
+ },
+ pointerEventsBox: {
+ alignItems: 'center',
+ borderWidth: '1px',
+ flexGrow: '1',
+ height: '100px',
+ justifyContent: 'center'
+ },
+ touchableArea: {
+ alignItems: 'center',
+ borderWidth: 1,
+ height: '200px',
+ justifyContent: 'center'
}
}
-React.render(, document.getElementById('react-root'));
+React.render(, document.getElementById('react-root'))
diff --git a/example/webpack.config.js b/example/webpack.config.js
index c377cb0e..a54fff4f 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -16,4 +16,4 @@ module.exports = {
filename: 'example.js',
path: '../dist'
}
-};
+}