Skip to content

Commit 28b9a6f

Browse files
sahrenssahrens
committed
Merge pull request #2007 from sahrens/Updates_from_Wed_July_15th
Updates from wed july 15th
2 parents 94e2e51 + 902ffbb commit 28b9a6f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+631
-572
lines changed

‎Examples/UIExplorer/ImageExample.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,41 @@ var {
2121
StyleSheet,
2222
Text,
2323
View,
24+
ActivityIndicatorIOS
2425
} = React;
2526

2627
var ImageCapInsetsExample = require('./ImageCapInsetsExample');
2728

29+
var NetworkImageExample = React.createClass({
30+
watchID: (null: ?number),
31+
32+
getInitialState: function() {
33+
return {
34+
error: false,
35+
loading: true,
36+
progress: 0
37+
};
38+
},
39+
render: function() {
40+
var loader = this.state.loading ?
41+
<View style={styles.progress}>
42+
<Text>{this.state.progress}%</Text>
43+
<ActivityIndicatorIOS style={{marginLeft:5}}/>
44+
</View> : null;
45+
return this.state.error ?
46+
<Text>{this.state.error}</Text> :
47+
<Image
48+
source={this.props.source}
49+
style={[styles.base, {overflow: 'visible'}]}
50+
onLoadError={(e) => this.setState({error: e.nativeEvent.error})}
51+
onLoadProgress={(e) => this.setState({progress: Math.max(0, Math.round(100 * e.nativeEvent.written / e.nativeEvent.total))}) }
52+
onLoadEnd={() => this.setState({loading: false, error: false})}
53+
onLoadAbort={() => this.setState({error: 'Loading has aborted'})} >
54+
{loader}
55+
</Image>;
56+
}
57+
});
58+
2859
exports.displayName = (undefined: ?string);
2960
exports.framework = 'React';
3061
exports.title = '<Image>';
@@ -59,6 +90,22 @@ exports.examples = [
5990
);
6091
},
6192
},
93+
{
94+
title: 'Error Handler',
95+
render: function() {
96+
return (
97+
<NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
98+
);
99+
},
100+
},
101+
{
102+
title: 'Image Download Progress',
103+
render: function() {
104+
return (
105+
<NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
106+
);
107+
},
108+
},
62109
{
63110
title: 'Border Color',
64111
render: function() {
@@ -300,6 +347,12 @@ var styles = StyleSheet.create({
300347
width: 38,
301348
height: 38,
302349
},
350+
progress: {
351+
flex: 1,
352+
alignItems: 'center',
353+
flexDirection: 'row',
354+
width: 100
355+
},
303356
leftMargin: {
304357
marginLeft: 10,
305358
},

‎Examples/UIExplorer/TextExample.ios.js

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -369,25 +369,6 @@ exports.examples = [
369369
</View>
370370
);
371371
},
372-
}, {
373-
title: 'allowFontScaling attribute',
374-
render: function() {
375-
return (
376-
<View>
377-
<Text>
378-
By default, text will respect Text Size accessibility setting on iOS.
379-
It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
380-
{" "}<Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size</Text>
381-
</Text>
382-
<Text style={{marginTop: 10}}>
383-
You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
384-
</Text>
385-
<Text allowFontScaling={false} style={{marginTop: 20}}>
386-
This text will not scale.
387-
</Text>
388-
</View>
389-
);
390-
},
391372
}];
392373

393374
var styles = StyleSheet.create({

‎Examples/UIExplorer/TransformExample.js

Lines changed: 170 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,85 @@
11
/**
2-
* Copyright 2004-present Facebook. All Rights Reserved.
2+
* The examples provided by Facebook are for non-commercial testing and
3+
* evaluation purposes only.
34
*
4-
* @providesModule TransformExample
5+
* Facebook reserves all rights not expressly granted.
6+
*
7+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8+
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9+
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
513
*/
614
'use strict';
715

8-
var React = require('React');
16+
var React = require('react-native');
917
var {
18+
Animated,
1019
StyleSheet,
20+
Text,
1121
View,
1222
} = React;
1323

14-
var TimerMixin = require('react-timer-mixin');
15-
var UIExplorerBlock = require('./UIExplorerBlock');
16-
var UIExplorerPage = require('./UIExplorerPage');
17-
18-
var TransformExample = React.createClass({
19-
20-
mixins: [TimerMixin],
21-
24+
var Flip = React.createClass({
2225
getInitialState() {
2326
return {
24-
interval: this.setInterval(this._update, 800),
25-
pulse: false,
27+
theta: new Animated.Value(45),
2628
};
2729
},
2830

29-
render() {
30-
return (
31-
<UIExplorerPage title="Transforms">
32-
<UIExplorerBlock title="foo bar">
33-
<View style={{height: 500}}>
34-
<View style={styles.box1} />
35-
<View style={styles.box2} />
36-
<View style={styles.box3step1} />
37-
<View style={styles.box3step2} />
38-
<View style={styles.box3step3} />
39-
<View style={styles.box4} />
40-
<View style={[
41-
styles.box5,
42-
this.state.pulse ? styles.box5Transform : null
43-
]} />
44-
</View>
45-
</UIExplorerBlock>
46-
</UIExplorerPage>
47-
);
31+
componentDidMount() {
32+
this._animate();
4833
},
4934

50-
_update() {
51-
this.setState({
52-
pulse: !this.state.pulse,
53-
});
35+
_animate() {
36+
this.state.theta.setValue(0);
37+
Animated.timing(this.state.theta, {
38+
toValue: 360,
39+
duration: 5000,
40+
}).start(this._animate);
5441
},
5542

43+
render() {
44+
return (
45+
<View style={styles.flipCardContainer}>
46+
<Animated.View style={[
47+
styles.flipCard,
48+
{transform: [
49+
{perspective: 850},
50+
{rotateX: this.state.theta.interpolate({
51+
inputRange: [0, 180],
52+
outputRange: ['0deg', '180deg']
53+
})},
54+
]}]}>
55+
<Text style={styles.flipText}>
56+
This text is flipping great.
57+
</Text>
58+
</Animated.View>
59+
<Animated.View style={[styles.flipCard, {
60+
position: 'absolute',
61+
top: 0,
62+
backgroundColor: 'red',
63+
transform: [
64+
{perspective: 850},
65+
{rotateX: this.state.theta.interpolate({
66+
inputRange: [0, 180],
67+
outputRange: ['180deg', '360deg']
68+
})},
69+
]}]}>
70+
<Text style={styles.flipText}>
71+
On the flip side...
72+
</Text>
73+
</Animated.View>
74+
</View>
75+
);
76+
}
5677
});
5778

5879
var styles = StyleSheet.create({
80+
container: {
81+
height: 500,
82+
},
5983
box1: {
6084
left: 0,
6185
backgroundColor: 'green',
@@ -88,7 +112,7 @@ var styles = StyleSheet.create({
88112
},
89113
box3step1: {
90114
left: 0,
91-
backgroundColor: '#ffb6c1', // lightpink
115+
backgroundColor: 'lightpink',
92116
height: 50,
93117
position: 'absolute',
94118
top: 0,
@@ -99,7 +123,7 @@ var styles = StyleSheet.create({
99123
},
100124
box3step2: {
101125
left: 0,
102-
backgroundColor: '#ff69b4', //hotpink
126+
backgroundColor: 'hotpink',
103127
height: 50,
104128
opacity: 0.5,
105129
position: 'absolute',
@@ -113,7 +137,7 @@ var styles = StyleSheet.create({
113137
},
114138
box3step3: {
115139
left: 0,
116-
backgroundColor: '#ff1493', // deeppink
140+
backgroundColor: 'deeppink',
117141
height: 50,
118142
opacity: 0.5,
119143
position: 'absolute',
@@ -129,7 +153,7 @@ var styles = StyleSheet.create({
129153
},
130154
box4: {
131155
left: 0,
132-
backgroundColor: '#ff8c00', // darkorange
156+
backgroundColor: 'darkorange',
133157
height: 50,
134158
position: 'absolute',
135159
top: 0,
@@ -141,7 +165,7 @@ var styles = StyleSheet.create({
141165
width: 100,
142166
},
143167
box5: {
144-
backgroundColor: '#800000', // maroon
168+
backgroundColor: 'maroon',
145169
height: 50,
146170
position: 'absolute',
147171
right: 0,
@@ -155,7 +179,110 @@ var styles = StyleSheet.create({
155179
{scale: 2},
156180
],
157181
},
182+
flipCardContainer: {
183+
marginVertical: 40,
184+
flex: 1,
185+
alignSelf: 'center',
186+
},
187+
flipCard: {
188+
width: 200,
189+
height: 200,
190+
alignItems: 'center',
191+
justifyContent: 'center',
192+
backgroundColor: 'blue',
193+
backfaceVisibility: 'hidden',
194+
},
195+
flipText: {
196+
width: 90,
197+
fontSize: 20,
198+
color: 'white',
199+
fontWeight: 'bold',
200+
}
158201
});
159202

160-
161-
module.exports = TransformExample;
203+
exports.title = 'Transforms';
204+
exports.description = 'View transforms';
205+
exports.examples = [
206+
{
207+
title: 'Perspective',
208+
description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
209+
render(): ReactElement { return <Flip />; }
210+
},
211+
{
212+
title: 'Translate, Rotate, Scale',
213+
description: "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
214+
render() {
215+
return (
216+
<View style={styles.container}>
217+
<View style={styles.box1} />
218+
</View>
219+
);
220+
}
221+
},
222+
{
223+
title: 'Scale, Translate, Rotate, ',
224+
description: "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
225+
render() {
226+
return (
227+
<View style={styles.container}>
228+
<View style={styles.box2} />
229+
</View>
230+
);
231+
}
232+
},
233+
{
234+
title: 'Rotate',
235+
description: "rotate: '30deg'",
236+
render() {
237+
return (
238+
<View style={styles.container}>
239+
<View style={styles.box3step1} />
240+
</View>
241+
);
242+
}
243+
},
244+
{
245+
title: 'Rotate, Scale',
246+
description: "rotate: '30deg', scaleX: 2, scaleY: 2",
247+
render() {
248+
return (
249+
<View style={styles.container}>
250+
<View style={styles.box3step2} />
251+
</View>
252+
);
253+
}
254+
},
255+
{
256+
title: 'Rotate, Scale, Translate ',
257+
description: "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
258+
render() {
259+
return (
260+
<View style={styles.container}>
261+
<View style={styles.box3step3} />
262+
</View>
263+
);
264+
}
265+
},
266+
{
267+
title: 'Translate, Scale, Rotate',
268+
description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
269+
render() {
270+
return (
271+
<View style={styles.container}>
272+
<View style={styles.box4} />
273+
</View>
274+
);
275+
}
276+
},
277+
{
278+
title: 'Translate, Rotate, Scale',
279+
description: "translate: [-50, 35], rotate: '50deg', scale: 2",
280+
render() {
281+
return (
282+
<View style={styles.container}>
283+
<View style={[styles.box5, styles.box5Transform]} />
284+
</View>
285+
);
286+
}
287+
}
288+
];

‎Examples/UIExplorer/UIExplorer/AppDelegate.m

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWith
4343
* Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
4444
* to your Xcode project folder and run
4545
*
46-
* $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle' -o main.jsbundle
46+
* $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle' -o main.jsbundle
4747
*
4848
* then add the `main.jsbundle` file to your project and uncomment this line:
4949
*/

0 commit comments

Comments
 (0)