Skip to content

Commit f7f3473

Browse files
lwinkyawmyatfacebook-github-bot
authored andcommitted
Add example on Components
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> Adding example on components section with [react-native-web-player](https://github.com/dabbott/react-native-web-player) - ActivityIndicator - TouchableOpacity - TouchableHighlight Screenshot on http://localhost:8079/react-native/docs/activityindicator.html ![react-native-activityindicator](https://user-images.githubusercontent.com/13135332/30432801-adca0982-9988-11e7-8e70-94ad9e42ea43.png) Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html ![react-native-touchableopacity](https://user-images.githubusercontent.com/13135332/30432718-80570554-9988-11e7-9c81-15ab98327fed.png) Screenshot on http://localhost:8079/react-native/docs/touchablehighlight.html ![react-native-touchablehighlight](https://user-images.githubusercontent.com/13135332/30432733-8290fbb8-9988-11e7-94a1-86c3166e544d.png) Closes facebook#15950 Differential Revision: D5881366 Pulled By: hramos fbshipit-source-id: 2926071723defedf9ed5cb1b1128204256c71dd9
1 parent a389ffb commit f7f3473

File tree

3 files changed

+120
-12
lines changed

3 files changed

+120
-12
lines changed

Libraries/Components/ActivityIndicator/ActivityIndicator.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,46 @@ type DefaultProps = {
3636

3737
/**
3838
* Displays a circular loading indicator.
39+
*
40+
* ### Example
41+
*
42+
* ```ReactNativeWebPlayer
43+
* import React, { Component } from 'react'
44+
* import {
45+
* ActivityIndicator,
46+
* AppRegistry,
47+
* StyleSheet,
48+
* Text,
49+
* View,
50+
* } from 'react-native'
51+
*
52+
* class App extends Component {
53+
* render() {
54+
* return (
55+
* <View style={[styles.container, styles.horizontal]}>
56+
* <ActivityIndicator size="large" color="#0000ff" />
57+
* <ActivityIndicator size="small" color="#00ff00" />
58+
* <ActivityIndicator size="large" color="#0000ff" />
59+
* <ActivityIndicator size="small" color="#00ff00" />
60+
* </View>
61+
* )
62+
* }
63+
* }
64+
*
65+
* const styles = StyleSheet.create({
66+
* container: {
67+
* flex: 1,
68+
* justifyContent: 'center'
69+
* },
70+
* horizontal: {
71+
* flexDirection: 'row',
72+
* justifyContent: 'space-around',
73+
* padding: 10
74+
* }
75+
* })
76+
*
77+
* AppRegistry.registerComponent('App', () => App)
78+
* ```
3979
*/
4080
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
4181
* suppresses an error when upgrading Flow's support for React. To see the

Libraries/Components/Touchable/TouchableHighlight.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,74 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
7171
* );
7272
* },
7373
* ```
74+
*
75+
*
76+
* ### Example
77+
*
78+
* ```ReactNativeWebPlayer
79+
* import React, { Component } from 'react'
80+
* import {
81+
* AppRegistry,
82+
* StyleSheet,
83+
* TouchableHighlight,
84+
* Text,
85+
* View,
86+
* } from 'react-native'
87+
*
88+
* class App extends Component {
89+
* constructor(props) {
90+
* super(props)
91+
* this.state = { count: 0 }
92+
* }
93+
*
94+
* onPress = () => {
95+
* this.setState({
96+
* count: this.state.count+1
97+
* })
98+
* }
99+
*
100+
* render() {
101+
* return (
102+
* <View style={styles.container}>
103+
* <TouchableHighlight
104+
* style={styles.button}
105+
* onPress={this.onPress}
106+
* >
107+
* <Text> Touch Here </Text>
108+
* </TouchableHighlight>
109+
* <View style={[styles.countContainer]}>
110+
* <Text style={[styles.countText]}>
111+
* { this.state.count !== 0 ? this.state.count: null}
112+
* </Text>
113+
* </View>
114+
* </View>
115+
* )
116+
* }
117+
* }
118+
*
119+
* const styles = StyleSheet.create({
120+
* container: {
121+
* flex: 1,
122+
* justifyContent: 'center',
123+
* paddingHorizontal: 10
124+
* },
125+
* button: {
126+
* alignItems: 'center',
127+
* backgroundColor: '#DDDDDD',
128+
* padding: 10
129+
* },
130+
* countContainer: {
131+
* alignItems: 'center',
132+
* padding: 10
133+
* },
134+
* countText: {
135+
* color: '#FF00FF'
136+
* }
137+
* })
138+
*
139+
* AppRegistry.registerComponent('App', () => App)
140+
* ```
141+
*
74142
*/
75143

76144
var TouchableHighlight = createReactClass({

Libraries/Components/Touchable/TouchableOpacity.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,21 +64,21 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
6464
* } from 'react-native'
6565
*
6666
* class App extends Component {
67-
* constructor(props) {
68-
* super(props)
69-
* this.state = { count: 0 }
70-
* }
67+
* constructor(props) {
68+
* super(props)
69+
* this.state = { count: 0 }
70+
* }
7171
*
72-
* onPress = () => {
73-
* this.setState({
74-
* count: this.state.count+1
75-
* })
76-
* }
72+
* onPress = () => {
73+
* this.setState({
74+
* count: this.state.count+1
75+
* })
76+
* }
7777
*
7878
* render() {
79-
* return (
80-
* <View style={styles.container}>
81-
* <TouchableOpacity
79+
* return (
80+
* <View style={styles.container}>
81+
* <TouchableOpacity
8282
* style={styles.button}
8383
* onPress={this.onPress}
8484
* >

0 commit comments

Comments
 (0)