I want to break things down into components. Inside my App.js file, I would like to see the text input box that would come about from the <CreateAccount/> component. The problem is that it's giving me an error. As soon as I include <View></View>, my background disappears (just have a white screen) and I see Email (from placeholder) on the top left corner of my physical device.
I want to have the text input box directly underneath the title My App. This whole React Native thing is so different from regular HTML & CSS so I'm wondering why this is happening in my case and what can I do to fix it?
Here's App.js file:
import React, {Component} from 'react';
import {View} from 'react-native';
import BackGround from './components/BackGround';
import CreateAccount from './components/CreateAccount';
export default class App extends Component {
render() {
return(
<View>
<BackGround/>
<CreateAccount/>
</View>
);
}
}
Here's BackGround.js file:
import React, {Component} from 'react';
import {StyleSheet, Image, Text} from 'react-native';
export default class BackGround extends Component {
render() {
return(
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<Text style={styles.title}>My App</Text>
</Image>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
title: {
paddingBottom: 390,
fontSize: 50
}
});
Here's CreateAccount file:
import React, {Component} from 'react';
import {TextInput} from 'react-native';
export default class CreateAccount extends Component {
render() {
return(
<TextInput
placeholder={"Email"}
placeholderTextColor={"#f44242"}
/>
);
}
}
Related
When I run my app I get the error: 'The component for route 'Camera' must be a react component'. I do not know what this means:
Here is my App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './screens/Home';
import Camera from './screens/Camera'
const MainNavigator = createStackNavigator(
{
Home: {screen: Home},
Camera: { screen: Camera}
},
{
defaultNavigationOptions: {
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#b83227'
},
headerTitleStyle: {
color: '#fff'
}
}
}
);
Here is my home:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Camera from './Camera'
export default class Home extends React.Component{
static navigationOptions = {
title: "PhotoClicker"
}
render(){
let photo = this.props.navigation.getParam("Photo", "empty")
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image
resizeMode="center"
style = {styles.imageHolder}
source={
photo === "empty" ? require("../assets/viking.png") : photo
}
/>
<Button
title="Take Photo"
style={styles.button}
onPress={()=>{
this.props.navigation.navigate(Camera)
}}
/>
</View>
);
}
}
Here is Camera:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
export default class Camera extends React.Component{
render(){
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Text>Camera Screen</Text>
</View>
);
}
}
It should just be a button that leads from home to Camera, but all I get is the above error. I have tried to change the imports but I just keep getting the same error. Could there be something wrong with my setup, I feel I get many more errors not directly related to code with React-native than I would with Java for Android.
Since you are adding Camera Screen to createStackNavigator. You can navigate to that screen directly through navigation props. So remove below unnecessary import code from your Home Screen
import Camera from './Camera'
change your navigation action
this.props.navigation.navigate('Camera')
I am trying to get a floating action button to display over other components in the bottom right of my app. In the case now it needs to display over a list and be static as the list moves. Currently the button does
I have tried putting the button style in the view tag and the button and neither displays anything on my screen
This is my button component:
import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { FontAwesome } from '#expo/vector-icons';
const FloatingPlusButton = () => {
return (
<View style={styles.buttonStyle}>
<Button>
<FontAwesome
name='plus'
size={32}
/>
</Button>
</View>
);
};
const styles = StyleSheet.create({
buttonStyle: {
position: 'absolute',
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
right: 30,
bottom: 30,
backgroundColor: '#82ff9e',
}
});
export default FloatingPlusButton;
This is the screen where I want to show the button:
import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';
import { FloatingPlusButton } from '../components/FloatingPlusButton';
const HEIGHT = Dimensions.get('window').height;
class HomeScreen extends Component {
componentDidMount() {
registerForPushNotificationsAsync();
}
render() {
return (
<View style={{ flex: 1, height: HEIGHT }}>
<Header navigation={this.props.navigation} />
<TodayIncludes />
<MainTodo />
{FloatingPlusButton}
</View>
);
}
}
export default HomeScreen;
I am unsure if I am calling the component wrong in the import? I thought it was supposed to be with no brackets and call it like a normal component but this gave me an invariant violation.
You are using the component wrong in your code, in jxs { } curly brackets are used to executed tradition js code like you might want to loop over an array etc.
import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';
// Since you are exporting the component as default there is no need to
// do it by using selective import
import FloatingPlusButton from '../components/FloatingPlusButton';
const HEIGHT = Dimensions.get('window').height;
class HomeScreen extends Component {
componentDidMount() {
registerForPushNotificationsAsync();
}
render() {
return (
<View style={{ flex: 1, position: "relative", height: HEIGHT }}>
<Header navigation={this.props.navigation} />
<TodayIncludes />
<MainTodo />
{/* Here is how you execute js code */}
<FloatingPlusButton />
</View>
);
}
}
export default HomeScreen;
There is my code & the error below. I made some changes in the App.js file, & since then this issue has shown up. I had my router setup in this file originally, but then decided to move. I've tried other styles & it doesn't work either.
App.js
import React from 'react';
import { StyleSheet, Text, View, Navigator } from 'react-native';
import { Fonts } from './src/utils/Fonts';
import Menu from './app/components/Menu';
import Page from './app/components/Page';
import Router from './app/components/Router';
export default class App extends React.Component {
render() {
return (
<View style={styles.fonts}>
<Menu />
</View>
);
}
}
const styles = StyleSheet.create({
fonts: {
fontSize: 30,
fontWeight: 12,
fontFamily: Fonts.Baloo
},
});
Error
I had different styles & code on the Menu component before this issue & it worked fine, but now even when I make changes it doesn't go back to the original, just shows this same error.
Menu.js
import React from 'react';
import {
StyleSheet,
Text,
Image,
MenuItem,
Font,
View,
TextInput,
TouchableOpacity
} from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class Menu extends React.Component {
render() {
return (
<View style={styles.container}>
<Text
style={styles.fonts}
onPress={() => Actions.page()}>
Navvi
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
});
I already commented it, but this is how your code should look like (in Menu.js):
export default class Menu extends React.Component {
render() {
return (
<View style={styles.container}>
<Text
style={styles.fonts}
onPress={() => Actions.page()}
>
{"Navvi"}
</Text>
</View>
);
}
}
I made a separate Index.js file to hold all the components that I want to export throughout the app I'm creating. I thought the file path I'm taking would be correct but instead...
I'm getting an error that says:
Could not resolve
'/User/user/projects/Something/src/components/components' as a file
nor as a folder (null)
How can I fix this?
Here's LoginForm.js:
import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, View, Text ,Button } from 'react-native';
import { UserInput } from './components';
class LoginForm extends Component {
render() {
return(
<View style={styles.container}>
<UserInput/>
<TouchableOpacity style={styles.button}>
<Button
title="Press Me"
/>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10
}
});
export default LoginForm;
Here's Index.js:
export * from './UserInput';
export * from './LoginForm';
In the current working directory of LoginForm.js , there is no components folder.
From your script, you want UserInput component in the LoginForm component.
You can simply do it
import { UserInput } from './UserInput';
Right use of index.js of components folder is when you want to import the selected component of folder's in other directory's component's
update :
in the LoginForm component do
import UserInput from './UserInput'; //default export
The same issue was already solved in several posts, but non of them helped me (I'm new to React Native, so possibly there is a solution, but I can't find it)
My code uses route and screen.
App.js:
import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './screens/HomeScreen.js';
const App = StackNavigator({
Home: { screen: HomeScreen }
});
HomeScreen.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class HomeScreen extends Component {
onPressLearnMore() {
}
render() {
return (
<View style={styles.container}>
<Button title="Learn More" onPress={() => this.onPressLearnMore()} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
What is wrong?
The project structure:
you must export default App in app.js
You don't need to define the file type in your import.
Change this import HomeScreen from './screens/HomeScreen.js';
To this import HomeScreen from './screens/HomeScreen';
Hope it helps.
Edit: Just to gather all information in this answer, as suggested in the comments you should also export your App.js