No Description

App.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import React, { Component } from 'react';
  2. import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from 'react-native';
  3. export default class App extends Component {
  4. constructor(props) {
  5. super(props)
  6. this.state = {
  7. name_l: '',
  8. name_u: '',
  9. lid: '',
  10. uid: ''
  11. }
  12. }
  13. insertList_Function = () => {
  14. fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_list.php', {
  15. method: 'POST',
  16. headers: {
  17. 'Accept': 'application/json',
  18. 'Content-Type': 'application/json',
  19. },
  20. body: JSON.stringify({
  21. name_l: this.state.name_l,
  22. name_u: this.state.name_u,
  23. lid: this.state.lid,
  24. uid: this.state.uid,
  25. })
  26. }).then((response) => response.json())
  27. .then((responseJson) => {
  28. // Showing response message coming from server after inserting records.
  29. Alert.alert(responseJson);
  30. }).catch((error) => {
  31. console.error(error);
  32. });
  33. }
  34. render() {
  35. return (
  36. <View style={styles.MainContainer}>
  37. <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Draft: New List Form</Text>
  38. <TextInput
  39. placeholder="Who is using this list?"
  40. onChangeText={data => this.setState({ name_u: data })}
  41. underlineColorAndroid='transparent'
  42. style={styles.TextInputStyleClass}
  43. />
  44. <TextInput
  45. placeholder="Name the list!"
  46. onChangeText={data => this.setState({ name_l: data })}
  47. underlineColorAndroid='transparent'
  48. style={styles.TextInputStyleClass}
  49. />
  50. <TextInput
  51. placeholder="Enter UID(Hidden)"
  52. onChangeText={data => this.setState({ uid: data })}
  53. underlineColorAndroid='transparent'
  54. style={styles.TextInputStyleClass}
  55. />
  56. <TextInput
  57. placeholder="Enter LID(Hidden)"
  58. onChangeText={data => this.setState({ lid: data })}
  59. underlineColorAndroid='transparent'
  60. style={styles.TextInputStyleClass}
  61. />
  62. <TouchableOpacity style={styles.button} onPress={this.insertList_Function} >
  63. <Text style={styles.text}>+</Text>
  64. </TouchableOpacity>
  65. <Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginTop: 20, marginBottom: 15 }}>Start adding your lists </Text>
  66. </View>
  67. );
  68. }
  69. }
  70. const styles = StyleSheet.create({
  71. MainContainer: {
  72. justifyContent: 'center',
  73. alignItems: 'center',
  74. flex: 1,
  75. margin: 10
  76. },
  77. TextInputStyleClass: {
  78. textAlign: 'center',
  79. marginBottom: 7,
  80. height: 40,
  81. width: '80%',
  82. borderWidth: 1,
  83. borderColor: '#3414B3',
  84. borderRadius: 5,
  85. },
  86. button: {
  87. height:'10%',
  88. width: '20%',
  89. paddingTop: 2,
  90. paddingBottom: 2,
  91. backgroundColor: '#3414B3',
  92. borderRadius: 100,
  93. marginTop: 20
  94. },
  95. text: {
  96. color: '#fff',
  97. fontSize: 40,
  98. textAlign: 'center',
  99. padding: 5
  100. }
  101. });