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;
Related
I am working on a ReactNative Project. I am a beginner so this question might seem silly. I am creating a basic navigation for a login screen and keep getting this error message
'Unable to resolve module ./src/Home from /app7-react-native/App.js:
Then it says none of these files exist
Here is my App. js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from '.src/Home';
import Login from './src/Login';
const Navigator = createStackNavigator ({
Home: { screen: Home},
Login: { screen: Login},
});
const App = createAppContainer(Navigator);
export default App;
Home.js
import React from 'react';
import { StyleSheet, View, Text, Button} from 'react-native';
export default class Home extends React.Component {
static navigationsOptions = ({ navigation }) => {
return {
title: navigation.getParam('name'),
};
};
render() {
const { navigate, state } = this.props.navigation;
return (
<View style={styles.container}>
<Text>Hello {state.params.name}</Text>
<Button
title="Go to home screen"
onPress={() => navigate('Home')}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Login.js
import React from 'react';
import { Text, View, TextInput, Stylesheet, Button, Touchableopacity } from 'react-native';
export default class Login extends React.Component {
static navigationsOptions = {
title = 'Login',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Button
title="Go to profile screen"
onPress={() => navigate(
'Profile', { name: 'Jane'}
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
})
Try to replace this '.src/Home' with './src/Home';
and your folder structure must be :
App. js
src
Home.js
Login.js
2 fixes need to be done here
Replace '.src/Home' with './src/Home' in your App.js file.
MyRNProject
App.js
src
Home.js
Login.js
You seem to be calling "Home" from inside of Home.js onPress function. You are creating an infinite loop here. Change it to a different screen like Login or Profile
I'm new to react-native and trying to set up my app with mobx for state management, when trying to inject rootStore into my HomeScreen component I get the following error:
Error: C:\xampp\htdocs\second-try\screens\HomeScreen.js: Leading decorators must be attached to a class declaration
This is my component, as you see I'm suing function based component and I get a warning, but how can I use components ass Class and inject mobx stre into my react-native component.
My HomeScreen file:
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { View, Text, StyleSheet } from 'react-native';
#inject(stores => ({
postStore: rootStore.postStore,
//authStore: rootStore.authStore,
})
)
//ERROR IS RIGHT
#observer
const HomeScreen = function()
{
return (
<View style={styles.container}>
<Text>{postStore.postMessage}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
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
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"}
/>
);
}
}