react-native-webview.git

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow
  9. */
  10. import React, {Component} from 'react';
  11. import {
  12. StyleSheet,
  13. SafeAreaView,
  14. Text,
  15. TouchableOpacity,
  16. View,
  17. Keyboard,
  18. Button,
  19. } from 'react-native';
  20. import Alerts from './examples/Alerts';
  21. import Scrolling from './examples/Scrolling';
  22. import Background from './examples/Background';
  23. const TESTS = {
  24. Alerts: {
  25. title: 'Alerts',
  26. testId: 'alerts',
  27. description: 'Alerts tests',
  28. render() {
  29. return <Alerts />;
  30. },
  31. },
  32. Scrolling: {
  33. title: 'Scrolling',
  34. testId: 'scrolling',
  35. description: 'Scrolling event test',
  36. render() {
  37. return <Scrolling />;
  38. },
  39. },
  40. Background: {
  41. title: 'Background',
  42. testId: 'background',
  43. description: 'Background color test',
  44. render() {
  45. return <Background />;
  46. },
  47. },
  48. };
  49. type Props = {};
  50. type State = {restarting: boolean, currentTest: Object};
  51. export default class App extends Component<Props, State> {
  52. state = {
  53. restarting: false,
  54. currentTest: TESTS.Alerts,
  55. };
  56. _simulateRestart = () => {
  57. this.setState({restarting: true}, () => this.setState({restarting: false}));
  58. };
  59. _changeTest = testName => {
  60. this.setState({currentTest: TESTS[testName]});
  61. };
  62. render() {
  63. const {restarting, currentTest} = this.state;
  64. return (
  65. <SafeAreaView style={styles.container}>
  66. <TouchableOpacity
  67. style={styles.closeKeyboardView}
  68. onPress={() => Keyboard.dismiss()}
  69. testID="closeKeyboard"
  70. />
  71. <TouchableOpacity
  72. testID="restart_button"
  73. onPress={this._simulateRestart}
  74. style={styles.restartButton}
  75. activeOpacity={0.6}>
  76. <Text>Simulate Restart</Text>
  77. </TouchableOpacity>
  78. <View style={styles.testPickerContainer}>
  79. <Button
  80. testID="testType_alerts"
  81. title="Alerts"
  82. onPress={() => this._changeTest('Alerts')}
  83. />
  84. <Button
  85. testID="testType_scrolling"
  86. title="Scrolling"
  87. onPress={() => this._changeTest('Scrolling')}
  88. />
  89. <Button
  90. testID="testType_background"
  91. title="Background"
  92. onPress={() => this._changeTest('Background')}
  93. />
  94. </View>
  95. {restarting ? null : (
  96. <View
  97. testID={`example-${currentTest.testId}`}
  98. key={currentTest.title}
  99. style={styles.exampleContainer}>
  100. <Text style={styles.exampleTitle}>{currentTest.title}</Text>
  101. <Text style={styles.exampleDescription}>
  102. {currentTest.description}
  103. </Text>
  104. <View style={styles.exampleInnerContainer}>
  105. {currentTest.render()}
  106. </View>
  107. </View>
  108. )}
  109. </SafeAreaView>
  110. );
  111. }
  112. }
  113. const styles = StyleSheet.create({
  114. container: {
  115. flex: 1,
  116. backgroundColor: '#F5FCFF',
  117. padding: 8,
  118. },
  119. exampleContainer: {
  120. padding: 16,
  121. backgroundColor: '#FFF',
  122. borderColor: '#EEE',
  123. borderTopWidth: 1,
  124. borderBottomWidth: 1,
  125. flex: 1,
  126. },
  127. exampleTitle: {
  128. fontSize: 18,
  129. },
  130. exampleDescription: {
  131. color: '#333333',
  132. marginBottom: 16,
  133. },
  134. exampleInnerContainer: {
  135. borderColor: '#EEE',
  136. borderTopWidth: 1,
  137. paddingTop: 10,
  138. flex: 1,
  139. },
  140. restartButton: {
  141. padding: 6,
  142. fontSize: 16,
  143. borderRadius: 5,
  144. backgroundColor: '#F3F3F3',
  145. alignItems: 'center',
  146. justifyContent: 'center',
  147. alignSelf: 'flex-end',
  148. },
  149. closeKeyboardView: {
  150. width: 5,
  151. height: 5,
  152. },
  153. testPickerContainer: {
  154. flexDirection: 'row',
  155. flexWrap: 'wrap',
  156. },
  157. });