I am trying to create a simple app with a button in react native, but so far every time I run my code, it gives me an error saying "Can't find variable: Button". I would like to end up with my title at the top (Already done) and a button in the center of the screen, which gives an alert when touched.
I have run through several online tutorials and cannot find a solution.
Here is my code:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class Project extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.Title}>
Lucas's App
</Text>
<View style={styles.buttonContainer}>
<Button
onPress={() => { Alert.alert('You tapped the button!')}}
title="Press Me"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
Title: {
color: '#000000',
marginTop: 13,
paddingLeft:100,
paddingRight:100,
fontFamily: 'Avenir',
fontSize: 30,
},
buttonContainer: {
margin: 20
},
});
AppRegistry.registerComponent('Project', () => Project);
Thanks in advance.
You need to make sure to import the button.
You can do this by adding 'button' to your import list:
import {
AppRegistry,
StyleSheet,
Text,
View,
Alert
Button,
} from 'react-native';
Related
I'm currently having a problem with the clickable size of a reusable button which includes an icon and text. When I run this code it seems like the entire row becomes clickable when I only want the icon and text to become clickable. Does anyone know how to solve this problem? Thanks
App.js
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import IconTextButton from './components/iconTextButton';
export default function App() {
return (
<View style={styles.container}>
<Text style={{marginTop: 100}}>My First React App! Sike </Text>
<IconTextButton iconFont="ionicons" iconName="pencil" iconSize={25} text="Add Items"/>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'powderblue',
},
});
iconTextButton.js
import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';
export default function IconTextButton({ iconFont, iconName, iconSize, text, onPress }) {
const getIconFont = (iconFont) => {
switch (iconFont) {
case "ionicons":
return Ionicon;
}
};
const FontIcon = getIconFont(iconFont);
return (
<TouchableOpacity onPress={onPress} style={styles(iconSize).container>
<FontIcon name={iconName} size={iconSize} style={styles(iconSize).buttonIcon}>
<Text style={styles(iconSize).buttonText}>{text}</Text>
</FontIcon>
</TouchableOpacity>
)
}
const styles = (size) => StyleSheet.create({
container: {
backgroundColor: 'pink',
},
buttonIcon: {
backgroundColor: 'yellow',
width: size,
},
buttonText: {
backgroundColor: 'green'
},
})
Along with the code I've tried, I've also tried to keep and as seperate contents whilst adding a flexDirection: 'row' inside styles.container. This keeps the contents in the same line but it still makes the whole row clickable. I've also tried putting everything in a and moving the styles.container to the component and adding a height: size into styles.container. This makes the clickable component limited however, the component is hidden underneath due to the restricted height. I have also tried simply just using instead of making a reusable const that its an input. The same thing applies.
You can wrap your Icon and Text Component in a View component and then wrap it inside a TouchableOpacity Component
Try this or do something like this :
import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';
export default function IconTextButton({ iconFont, iconName, iconSize, text, onPress }) {
const getIconFont = (iconFont) => {
switch (iconFont) {
case "ionicons":
return Ionicon;
}
};
const FontIcon = getIconFont(iconFont);
return (
<TouchableOpacity onPress={onPress} style={styles(iconSize).container}>
<View style={styles(iconSize).iconTextContainer}>
<FontIcon name={iconName} size={iconSize} style={styles(iconSize).buttonIcon} />
<Text style={styles(iconSize).buttonText}>{text}</Text>
</View>
</TouchableOpacity>
)
}
const styles = (size) => StyleSheet.create({
container: {
backgroundColor: 'pink',
},
iconTextContainer: {
flexDirection: 'row',
alignItems: 'center',
},
buttonIcon: {
backgroundColor: 'yellow',
width: size,
},
buttonText: {
backgroundColor: 'green'
},
})
I am new to react native, started learning yesterday.
So, far my file structure is this:
---Assets
--- (some images)
---Screens
---WelcomeScreen.js
---Login.js
---app.js
---server.py (contains my flask API implementations)
I would like to navigate from WelcomeScreen to Login screen on clicking the login or register button inside WelcomeScreen and also send a rest API call to my backend so that I can further process the info.
app.js:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import WelcomeScreen from './screens/WelcomeScreen';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<WelcomeScreen />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container:{
flex: 1,
width: "100%",
height: "100%",
}
})
WelcomeScreen.js
import React from 'react';
import { ImageBackground, StyleSheet, View, SafeAreaView, Text, Button } from 'react-native';
import Login from './Login';
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/bg.jpg")}>
<Button
onPress={() => props.navigation.navigate(Login)} //throwing error
//TypeError: undefined is not an object (evaluating 'props.navigation.navigate')
title="Login"
color="#fc5c65"
/>
<Button
onPress={() => props.navigation.navigate(Login)} //throwing error
//TypeError: undefined is not an object (evaluating 'props.navigation.navigate')
title="Register"
color="#4ecdc4"
/>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background:{
flex: 1,
justifyContent: "flex-end"
},
loginButton:{
width: "100%",
height: 70,
backgroundColor: '#fc5c65'
},
registerButton:{
width: "100%",
height: 70,
backgroundColor: '#4ecdc4'
},
})
export default WelcomeScreen;
Login.js
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
export default function Login() {
return (
<ImageBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/splash.png")}>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background:{
flex: 1,
justifyContent: "flex-end"
},
loginButton:{
width: "100%",
height: 70,
backgroundColor: '#fc5c65'
},
registerButton:{
width: "100%",
height: 70,
backgroundColor: '#4ecdc4'
},
})
Now, from the WelcomeScreen.js,
I want to go to the login page upon clicking login button or register button and also send a restAPI call to the backend.
How do I do this??
Navigation isn't always built in to react native. Primarily people use libraries to handle this smoothly. Based on your code, you've been following an example based on using react-navigation which you can read about here. Essentially you'll need nest all of your screens inside of special components from that library which will pipe the navigation prop through to your screen components.
In order to run the API calls, you can add those functions calls on a new line in each of the functions you are passing as the onPress prop. Alternatively, you could place a useEffect hook in your screen components to make the API call after the navigation has completed.
// in Login.js
export const Login = () => {
useEffect(() => {
callAPI()
}, []);
...
}
New to React Native, having a go at an app idea. Basically I'm just trying to create an TextInput element that appears when I press a Button. Below is my attempt. I'm trying to take advantage of state within my class, but something is off.
Expo is throwing an error of 'null is not an object (evaluating 'this.state.isShowingText')'.
Any ideas?
import React, { Component } from 'react';
import { TextInput, Alert, Button, ScrollView, Text, View, StyleSheet } from 'react-native';
export default class CoolComponent extends Component {
render() {
const nameAdd = () =>{
state = { isShowingText: true };
}
return (
<View style={{ alignItems: 'center', top: 50 }}>
<Title>Some Title</Title>
{this.state.isShowingText ? <TextInput></TextInput> : null}
<ScrollView></ScrollView>
<Button
title="Press me"
onPress={nameAdd}
/>
</View>
);
}
}
The way you handling state is wrong
import React, { Component } from 'react';
import { TextInput, Button, ScrollView, View } from 'react-native';
export default class CoolComponent extends Component {
state = {
isShowingText: false
}
nameAdd = () => {
this.setState({
isShowingText: true
})
}
render() {
return (
<View style={{ alignItems: 'center', top: 50 }}>
{this.state.isShowingText ? <TextInput style={{ width: '50', height: '50', borderWidth: 1 }}></TextInput> : null}
<ScrollView></ScrollView>
<Button
title="Press me"
onPress={this.nameAdd}
/>
</View>
);
}
}
Hope this helps you. Feel free for doubts.
I have made a button as:
<-Button onPress={() => Linking.openURL(props.albumName.url)} /->
upon pressing the button, the app isnt getting redirected to a new browser window. I checked it in the AVD as well as on my Android phone. The parameter props.albumName.url == https://www.amazon.com/Evolve-Imagine-Dragons/dp/B07143J5MM/. Other properties such as props.albumName.title, props.albumName.artist etc are being displayed correctly so nothing wrong with the syntax, I also tried logging props.albumName.url out to confirm that it contains the given url in the correct format
I guess you are missing title property in button tag, it's a required props.
I have tried the same code, it works great.
Here is my code
import React, { Component } from 'react';
import {
View,
Linking,
Button
} from 'react-native';
export default class Button1 extends Component {
render() {
return(
<View>
<Button
title="click"
onPress={() => Linking.openURL(this.props.albumName)}/>
</View>
);
}
}
And am using that component here
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Button1 from './Button';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>`enter code here`
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Button1 albumName = 'https://www.amazon.com/Evolve-Imagine-
Dragons/dp/B07143J5MM/' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Hello everyone i am new to react native i just stared learning.
i am trying with react native , i have studied about it and now i am trying to learn it , This is my first day in this,
I just created react native project and created one js file and write view in that created js and imported in index.android.jd but it display default view
here is the code
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Compo from './homecomponent'
export default class AwesomeProject extends Component {
render() {
return (
<Compo/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
and homecomponent is as follow
import {
AppRegistry,
StyleSheet,
Text,
View,
ToolbarAndroid,
TouchableHighlight
} from 'react-native';
export default class homecomponent extends Component
{
render()
{
return(
<view style={styles.container}>
<ToolbarAndroid style={styles.toolbar0}
title="counter demo"/>
<Text>WOWWWW</Text>
<TouchableHighlight
style={ styles.button} >
<Text style={styles.buttontext}>increment</Text>
</TouchableHighlight>
</view>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignItems: 'center',
},
button:{
backgroundColor:'deepskyblue',
borderwidth:1,
alignItems:'center',
justifyContent:'center',
alignSelf:'stretch',
height:50,
margin:10,
borderRadius:3
},
buttontext:{
fontSize:20,
color:'#FFF'
},
toolbar: {
alignSelf: 'stretch',
height: 50,
backgroundColor: 'silver',
},
text: {
fontSize:20,
},
cancelButton: {
backgroundColor: '#696969',
},
});
Please give me the suggesction why the view is not update in android.I stuck on that problem since morning.
import homecomponent from './HomeCompo'
Do these two following things:
First, in index.android.js file, update your import Compo from './homecomponent' to import homecomponent from './homecomponent'
Second, in the same file, update your return component inside view. Just Add View and inside that rename the component name as homecomponent.