Can we use single keyword instead of '' import { Text, TextInput, Button, StyleSheet, View } from 'react-native'; " in react native? Is there any options available Single keyword for "Text, TextInput, Button, StyleSheet, View"?
import { Button, StyleSheet, View } from 'react-native';
export default class ButtonBasics extends Component {
_onPressButton() {
alert('You tapped the button!')
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Press Me"
color="#841584"
/>
</View>
<View style={styles.alternativeLayoutButtonContainer}>
<Button
onPress={this._onPressButton}
title="This looks great!"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
alternativeLayoutButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
You could import ReactNative from 'react-native' and use them as <ReactNative.View/> and so on, but I wouldn't recommend that. It's not how 99% of RN devs would expect it to read.
Related
I'm new to react-native so i don't know how to fix this error
import { StatusBar } from 'expo-
status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World</Text>
<TextInput placeholder ="something"/> **The error is here**
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I have a trouble with Text input
and the image error is :
How to fix this??
You haven't imported the textinput
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View ,TextInput } from 'react-native'; **import here**
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World</Text>
<TextInput placeholder ="something"/> **The error is here**
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Use this code
I have a keyboardavoidingview with flex 1 with an onPress function that should dismiss the keyboard but nothing happens.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, useWindowDimensions, KeyboardAvoidingView, Keyboard } from 'react-native';
import { TouchableOpacity, ScrollView, TextInput } from 'react-native-gesture-handler';
import { AntDesign } from '#expo/vector-icons';
const Home = ({ navigation }) => {
const width = useWindowDimensions().width;
const height = useWindowDimensions().height;
return (
<KeyboardAvoidingView onPress={Keyboard.dismiss} style={styles.container}>
<View style={styles.header}>
<View style={styles.headerTop}>
<TouchableOpacity>
<AntDesign name="pluscircleo" size={42} color="#fff" />
</TouchableOpacity>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Text style={styles.title}>Restaurant</Text>
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.input} placeholder="Find Restuarants" />
</View>
</View>
<StatusBar backgroundColor="#fff" />
</KeyboardAvoidingView>
)
};
const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
backgroundColor: 'red',
},
headerTop: {
paddingTop: 30,
},
title: {
fontSize: 22,
color: '#fff',
},
inputContainer: {
justifyContent: 'center',
alignItems: 'center',
margin: 10
},
input: {
color: '#333',
borderColor: '#fff',
borderRadius: 5,
padding: 6,
backgroundColor: '#fff',
width: 290
}
});
export default Home;
if I delete keyboard.dismiss and add console.log('test') then again nothing happens.
Where is my issue?
thanks for your help!
You should wrap the KeyboardAvoidingView with TouchableWithoutFeedback and remove onPress from the KeyboardAvoidingView and put it in the TouchableWithoutFeedback
import { StyleSheet, Text, View, useWindowDimensions, KeyboardAvoidingView, Keyboard, Platform, Alert, TouchableWithoutFeedback } from 'react-native';
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView style={styles.container}>
</KeybaordAvoidingView />
</TouchableWithoutFeedback>
Link here
I am having a problem with my button. i have just started learning reactnative.
import { StatusBar } from 'expo-status-bar';
import React,{ useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
export default function App() {
const [name, setName] = useState('Hamza');
const clickHandler= () => {
setName('Awais');
};
return (
<View style={styles.container}>
<Text >My Name is { name }</Text>
<Text></Text>
<View style={styles.buttonContainer}>
<Button title='update State' onPress={ clickHandler }/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer:{
marginTop:20,
},
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Try this way
<Button title='update State' onPress={() => clickHandler() } />
I'm trying to build an application using React Native.
I made a custom button, and the onPress is not working, tried to look for answers but couldn't find any, The code looks just like the docs (copied from there).
This is the custom button:
import React from 'react';
import { View, Text, StyleSheet, TouchableHighlight, TouchableOpacity } from 'react-native';
import COLORS from '../constants/constants';
class AppButton extends React.Component {
render() {
return(
<View style={styles.container}>
<TouchableOpacity>
<Text style={styles.title}>
{this.props.title}
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: COLORS.appOrange,
borderRadius: 20,
elevation: 3,
flexShrink: 0,
width: '100%',
height: 60,
justifyContent: 'center'
},
title: {
fontSize: 24,
color: COLORS.appWhite,
textAlign: 'center',
},
});
export default AppButton;
This is how I try to use the onPress:
import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import COLORS from '../constants/constants';
import Card from '../components/card';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import AppTextInput from '../components/appTextInput';
import AppButton from '../components/appButton';
class Login extends React.Component {
onPress = () => {
console.log("hello world!##!###!#");
// this.setState({
// count: this.state.count + 1
// });
};
render() {
return(
<View style={styles.superContainer}>
<View style={styles.formContainer}>
<AppTextInput placeHolderText="Email#Address.com"></AppTextInput>
<AppTextInput placeHolderText="Passwrod"></AppTextInput>
</View>
<View style={styles.buttonContainer}>
<AppButton
title="LOGIN"
style={styles.loginButton}
onPress={this.onPress}
/>
</View>
</View>
);
}
}
I tried to look at the console, but nothing gets printed out, tried few different examples I saw on the internet but the tap just won't register.
I have passed OnPress method as props to AppButton and attached this method to TouchableOpcaity OnPress Event
import React from 'react';
import { View, Text, StyleSheet, TouchableHighlight, TouchableOpacity } from 'react-native';
import COLORS from '../constants/constants';
class AppButton extends React.Component {
render() {
return(
<View style={styles.container}>
<TouchableOpacity onPress={this.props.handleOnPress}>
<Text style={styles.title}>
{this.props.title}
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: COLORS.appOrange,
borderRadius: 20,
elevation: 3,
flexShrink: 0,
width: '100%',
height: 60,
justifyContent: 'center'
},
title: {
fontSize: 24,
color: COLORS.appWhite,
textAlign: 'center',
},
});
export default AppButton;
import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import COLORS from '../constants/constants';
import Card from '../components/card';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import AppTextInput from '../components/appTextInput';
import AppButton from '../components/appButton';
class Login extends React.Component {
onPress = () => {
console.log("hello world!##!###!#");
// this.setState({
// count: this.state.count + 1
// });
};
render() {
return(
<View style={styles.superContainer}>
<View style={styles.formContainer}>
<AppTextInput placeHolderText="Email#Address.com"></AppTextInput>
<AppTextInput placeHolderText="Passwrod"></AppTextInput>
</View>
<View style={styles.buttonContainer}>
<AppButton
title="LOGIN"
style={styles.loginButton}
handleOnPress={this.onPress}
/>
</View>
</View>
);
}
}
In your case you didn't pass the onPress props into TouchableOpacity inside your custom button component.
Try this
Custom Button
import React from "react";
import {
View,
Text,
StyleSheet,
TouchableHighlight,
TouchableOpacity
} from "react-native";
import COLORS from "../constants/constants";
class AppButton extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.props.onPress}>
<Text style={styles.title}>{this.props.title}</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: COLORS.appOrange,
borderRadius: 20,
elevation: 3,
flexShrink: 0,
width: "100%",
height: 60,
justifyContent: "center"
},
title: {
fontSize: 24,
color: COLORS.appWhite,
textAlign: "center"
}
});
export default AppButton;
Login Class
import React from "react";
import { View, Text, StyleSheet, TextInput } from "react-native";
import COLORS from "../constants/constants";
import Card from "../components/card";
import { Colors } from "react-native/Libraries/NewAppScreen";
import AppTextInput from "../components/appTextInput";
import AppButton from "../components/appButton";
class Login extends React.Component {
onPress = () => {
console.log("hello world!##!###!#");
// this.setState({
// count: this.state.count + 1
// });
};
render() {
return (
<View style={styles.superContainer}>
<View style={styles.formContainer}>
<AppTextInput placeHolderText="Email#Address.com"></AppTextInput>
<AppTextInput placeHolderText="Passwrod"></AppTextInput>
</View>
<View style={styles.buttonContainer}>
<AppButton
title="LOGIN"
style={styles.loginButton}
onPress={this.onPress}
/>
</View>
</View>
);
}
}
Are you sure the "this" verb refer to the right object (class instance) ?
Let's check this :
class Login extends React.Component {
const onPress = () => {
console.log("the world is not enough");
};
render() {
/* assign this class instance to that reference */
const that = this;
return(
...
<View style={styles.buttonContainer}>
<AppButton
title="LOGIN"
style={styles.loginButton}
/* use that class reference */
onPress={that.onPress}
/>
</View>
...
);
}
}
I have created 3 buttons in react native. I have stored images in three different components. I want that when i click on first button, it show the image stored in first component and so on . I want to use switch case statement. I dont want to use any library like tab navigators.
app.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
import first from "./components/first";
import second from "./components/second";
import third from "./components/third";
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.wrapper1}>
<Text>Button 1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.wrapper2}>
<Text>Button 2</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.wrapper3}>
<Text>Button 3</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
},
wrapper1: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "red",
paddingHorizontal: 40,
paddingVertical: 15
},
wrapper2: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "red",
paddingHorizontal: 40,
paddingVertical: 15
},
wrapper3: {
borderWidth: 1,
borderColor: "black",
backgroundColor: "red",
paddingHorizontal: 40,
paddingVertical: 15
}
});
first.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
export default class first extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: "http://facebook.github.io/react/img/logo_og.png"
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
}
});
second.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
export default class second extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: "http://facebook.github.io/react/img/logo_og.png"
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
}
});
third.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
Button,
TouchableOpacity
} from "react-native";
export default class third extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: "http://facebook.github.io/react/img/logo_og.png"
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF",
alignItems: "flex-start",
flexDirection: "row"
}
});
A clean way consist in :
Storing the pictures url in an array
Use a state to keep the current picture index
Call one time the Image component, with a different url depending of the state
Add buttons to change the state
I created a working example :
https://snack.expo.io/#sanjar/so-53608978
Edit : if you really want to keep different components, and to use a switch here is a working example :
https://snack.expo.io/#sanjar/so-53608978-2