No Description

App.tsx 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. import React, {Component} from 'react';
  2. import {
  3. StyleSheet,
  4. SafeAreaView,
  5. Text,
  6. TouchableOpacity,
  7. View,
  8. Keyboard,
  9. Button,
  10. Platform,
  11. } from 'react-native';
  12. import Alerts from './examples/Alerts';
  13. import Scrolling from './examples/Scrolling';
  14. import Background from './examples/Background';
  15. import Downloads from './examples/Downloads';
  16. import Uploads from './examples/Uploads';
  17. import Injection from './examples/Injection';
  18. const TESTS = {
  19. Alerts: {
  20. title: 'Alerts',
  21. testId: 'alerts',
  22. description: 'Alerts tests',
  23. render() {
  24. return <Alerts />;
  25. },
  26. },
  27. Scrolling: {
  28. title: 'Scrolling',
  29. testId: 'scrolling',
  30. description: 'Scrolling event test',
  31. render() {
  32. return <Scrolling />;
  33. },
  34. },
  35. Background: {
  36. title: 'Background',
  37. testId: 'background',
  38. description: 'Background color test',
  39. render() {
  40. return <Background />;
  41. },
  42. },
  43. Downloads: {
  44. title: 'Downloads',
  45. testId: 'downloads',
  46. description: 'File downloads test',
  47. render() {
  48. return <Downloads />;
  49. },
  50. },
  51. Uploads: {
  52. title: 'Uploads',
  53. testId: 'uploads',
  54. description: 'Upload test',
  55. render() {
  56. return <Uploads />;
  57. },
  58. },
  59. Injection: {
  60. title: 'Injection',
  61. testId: 'injection',
  62. description: 'Injection test',
  63. render() {
  64. return <Injection />;
  65. },
  66. },
  67. };
  68. type Props = {};
  69. type State = {restarting: boolean, currentTest: Object};
  70. export default class App extends Component<Props, State> {
  71. state = {
  72. restarting: false,
  73. currentTest: TESTS.Alerts,
  74. };
  75. _simulateRestart = () => {
  76. this.setState({restarting: true}, () => this.setState({restarting: false}));
  77. };
  78. _changeTest = testName => {
  79. this.setState({currentTest: TESTS[testName]});
  80. };
  81. render() {
  82. const {restarting, currentTest} = this.state;
  83. return (
  84. <SafeAreaView style={styles.container}>
  85. <TouchableOpacity
  86. style={styles.closeKeyboardView}
  87. onPress={() => Keyboard.dismiss()}
  88. testID="closeKeyboard"
  89. />
  90. <TouchableOpacity
  91. testID="restart_button"
  92. onPress={this._simulateRestart}
  93. style={styles.restartButton}
  94. activeOpacity={0.6}>
  95. <Text>Simulate Restart</Text>
  96. </TouchableOpacity>
  97. <View style={styles.testPickerContainer}>
  98. <Button
  99. testID="testType_alerts"
  100. title="Alerts"
  101. onPress={() => this._changeTest('Alerts')}
  102. />
  103. <Button
  104. testID="testType_scrolling"
  105. title="Scrolling"
  106. onPress={() => this._changeTest('Scrolling')}
  107. />
  108. <Button
  109. testID="testType_background"
  110. title="Background"
  111. onPress={() => this._changeTest('Background')}
  112. />
  113. <Button
  114. testID="testType_injection"
  115. title="Injection"
  116. onPress={() => this._changeTest('Injection')}
  117. />
  118. {Platform.OS == "ios" && <Button
  119. testID="testType_downloads"
  120. title="Downloads"
  121. onPress={() => this._changeTest('Downloads')}
  122. />}
  123. {Platform.OS === 'android' && <Button
  124. testID="testType_uploads"
  125. title="Uploads"
  126. onPress={() => this._changeTest('Uploads')}
  127. />}
  128. </View>
  129. {restarting ? null : (
  130. <View
  131. testID={`example-${currentTest.testId}`}
  132. key={currentTest.title}
  133. style={styles.exampleContainer}>
  134. <Text style={styles.exampleTitle}>{currentTest.title}</Text>
  135. <Text style={styles.exampleDescription}>
  136. {currentTest.description}
  137. </Text>
  138. <View style={styles.exampleInnerContainer}>
  139. {currentTest.render()}
  140. </View>
  141. </View>
  142. )}
  143. </SafeAreaView>
  144. );
  145. }
  146. }
  147. const styles = StyleSheet.create({
  148. container: {
  149. flex: 1,
  150. backgroundColor: '#F5FCFF',
  151. padding: 8,
  152. },
  153. exampleContainer: {
  154. padding: 16,
  155. backgroundColor: '#FFF',
  156. borderColor: '#EEE',
  157. borderTopWidth: 1,
  158. borderBottomWidth: 1,
  159. flex: 1,
  160. },
  161. exampleTitle: {
  162. fontSize: 18,
  163. },
  164. exampleDescription: {
  165. color: '#333333',
  166. marginBottom: 16,
  167. },
  168. exampleInnerContainer: {
  169. borderColor: '#EEE',
  170. borderTopWidth: 1,
  171. paddingTop: 10,
  172. flex: 1,
  173. },
  174. restartButton: {
  175. padding: 6,
  176. fontSize: 16,
  177. borderRadius: 5,
  178. backgroundColor: '#F3F3F3',
  179. alignItems: 'center',
  180. justifyContent: 'center',
  181. alignSelf: 'flex-end',
  182. },
  183. closeKeyboardView: {
  184. width: 5,
  185. height: 5,
  186. },
  187. testPickerContainer: {
  188. flexDirection: 'row',
  189. flexWrap: 'wrap',
  190. },
  191. });