Note: I am a beginner learning React Native. I have two js files (Inputs.js and Styles.js) and I am trying to put them both in a const in my main js file (App.js) but I can only export default one of them. Is there a way I can export both of them or should I rearrange my code in another way?
App.js:
import React from 'react';import { StyleSheet, Text, View } from 'react-native';const Home1 = () => { return (<Style/> )}const Home2 = () =>{ return (<Inputs /> )}export default Home1; //I am unable to export both Home1 and Home2 hereStyle.js:
import React, { Component } from 'react';import { View, Text, Image, StyleSheet } from 'react-native'const Style = () => { return ( <View style = {styles.container}><Text style = {styles.text}><Text style = {styles.capitalLetter}> Title Here</Text><Text><Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Location: </Text></Text><Text><Text style = {styles.textInput}> {"\n"} {"\n"}Time:</Text></Text><Text><Text style = {styles.textInput}> {"\n"} {"\n"}Time: </Text></Text></Text></View> )}export default Styleconst styles = StyleSheet.create ({ container: { //alignItems: 'center', marginTop: 50, }, text: { color: '#41cdf4', }, capitalLetter: { color: 'red', fontSize: 20 }, textInput: { padding: 22, //fontWeight: 'bold', color: 'black' }, textShadow: { textShadowColor: 'red', textShadowOffset: { width: 2, height: 2 }, textShadowRadius : 5 }})Inputs.js:
import React, { Component } from 'react'import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'class Inputs extends Component { state = { email: '', password: '' } handleEmail = (text) => { this.setState({ email: text }) } handlePassword = (text) => { this.setState({ password: text }) } login = (email, pass) => { alert('email: '+ email +' password: '+ pass) } render(){ return (<View style = {styles.container}><TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Email" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handleEmail}/><TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Password" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handlePassword}/><TouchableOpacity style = {styles.submitButton} onPress = { () => this.login(this.state.email, this.state.password)}><Text style = {styles.submitButtonText}> Submit</Text></TouchableOpacity></View> ) }}export default Inputsconst styles = StyleSheet.create({ container: { paddingTop: 200 }, input: { margin: 15, height: 40, borderColor: '#7a42f4', borderWidth: 1 }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 40, }, submitButtonText:{ color: 'white' }})****UPDATED CODE BELOW for the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.:*****
App.js:
import React from 'react';import { StyleSheet, Text, View } from 'react-native';module.exports = { Home1() { return (<Style/> ); }, Home2() { return (<Inputs/> ); } }; Style.js
import React, { Component } from 'react';import { View, Text, Image, StyleSheet } from 'react-native'import { Inputs } from "./App.js"import Home1, {Home2} from './App.js'const Style = () => { return ( <View style = {styles.container}><Text style = {styles.text}><Text style = {styles.capitalLetter}> Title Here</Text><Text><Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Your address or location (eg, Nashville, TN): </Text></Text><Text><Text style = {styles.textInput}> {"\n"} {"\n"}Contact 2:</Text></Text><Text><Text style = {styles.textInput}> {"\n"} {"\n"}Contact 3: </Text></Text></Text></View> )}export default Styleconst styles = StyleSheet.create ({ container: { //alignItems: 'center', marginTop: 50, }, text: { color: '#41cdf4', }, capitalLetter: { color: 'red', fontSize: 20 }, textInput: { padding: 22, //fontWeight: 'bold', color: 'black' }, textShadow: { textShadowColor: 'red', textShadowOffset: { width: 2, height: 2 }, textShadowRadius : 5 }})Inputs.js
import React, { Component } from 'react'import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'//import { Style } from "./App.js"import Home1, {Home2} from './App.js'class Inputs extends Component { state = { email: '', password: '' } handleEmail = (text) => { this.setState({ Location: text }) } handlePassword = (text) => { this.setState({ Time: text }) } login = (email, time1) => { alert('Location: '+ email +' Time: '+ time1) } render(){ return (<View style = {styles.container}><TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Location" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handleEmail}/><TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Time" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handlePassword}/><TouchableOpacity style = {styles.submitButton} onPress = { () => this.login(this.state.email, this.state.password)}><Text style = {styles.submitButtonText}> Submit</Text></TouchableOpacity></View> ) }}export default Inputsconst styles = StyleSheet.create({ container: { paddingTop: 200 }, input: { margin: 15, height: 40, borderColor: '#7a42f4', borderWidth: 1 }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 40, }, submitButtonText:{ color: 'white' }})