I am currently making a simple app in React-Native to keep track of a dollar amount, however once I enter an amount into the input it gets stuck inside the input. The input never loses focus once I hit the enter/return key on the Android keyboard, it even goes inside the addAmount function and prints the warn but still maintains the cursor focus inside the input, this prevents me from pressing r,r again to refresh the app.
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, ScrollView} from 'react-native';
class AwesomeProject extends Component {
constructor(props) {
super(props);
}
addAmount(deposit){
console.warn(deposit);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column'}}>
<View style={{flex: 1, backgroundColor: 'skyblue', justifyContent:'center'}}>
<Text>YTD Earnings: $10</Text>
</View>
<View style={{flex: 1, backgroundColor: '#95a5a6'}}>
<TextInput
ref = 'amount'
placeholder='Enter Amount'
keyboardType='numeric'
returnKeyType='done'
onSubmitEditing={(event) => this.addAmount(event.nativeEvent.text)}/>
</View>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Related
How can I load webview content by pressing a button in expo?do I have to use navigation?
import * as React from 'react';
import { WebView } from 'react-native-webview';
import {View} from 'react-native'
export default function App(){
return (
<View>
<Button title={'CLICK'} onPress={()=> <WebView source={{uri:'https://www.google.com'}}/>}>
</View>
)
}
You should use a concept called "states". They are well explained in the official documentation of React. Basically you have to declare a changeable variable and then change it with the button. When a state change detected, React re-renders the corresponding components. And when it is re-rendered, new value of that particular variable is read and according changes happen. Here is a code snippet that serves your desired purpose:
import * as React from "react";
import { WebView } from "react-native-webview";
import { View, Button } from "react-native";
export default function App() {
const [isVisible, setIsVisible] = React.useState(false);
return (
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
>
// on press, whatever the older value of isVisible was, set it to its opposite, eg. toggle it
<Button
title="click"
onPress={() => setIsVisible((prev) => !prev)}
color="blue"
/>
// if isVisible is true, render the WebView
{isVisible && (
// you probably will want to change WebView's styles
<WebView
style={{ width: 300, height: 250 }}
source={{ uri: "https://www.google.com" }}
/>
)}
</View>
);
}
I just started learning and practicing React Native and I have run into the first problem that I cant seem to solve by myself.
I have the following code, which is very simple, but the Alert.alert() does not work when I run it on the web. if I click the button nothing happens, however, when i click the button on an iOS or android simulator it works fine.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, Button, View, Alert } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.headerStyle} >Practice App</Text>
<Text style={{padding: 10}}>Open up App.js to start working on your app!</Text>
<Button
onPress={() => alert('Hello, Nice To Meet You :)')}
title="Greet Me"
/>
<StatusBar style="auto" />
</View>
);
}
I also know that alert() works on all three devices, however, I want to understand why Alert.alert() only works for iOS and Android.
My question is more so for understanding rather than finding a solution. Is the only solution to use alert(), or am I implementing Alert.alert() in the wrong way?
This workaround basically imitates react-native's Alert behavior with browsers' window.confirm method:
# alert.js
import { Alert, Platform } from 'react-native'
const alertPolyfill = (title, description, options, extra) => {
const result = window.confirm([title, description].filter(Boolean).join('\n'))
if (result) {
const confirmOption = options.find(({ style }) => style !== 'cancel')
confirmOption && confirmOption.onPress()
} else {
const cancelOption = options.find(({ style }) => style === 'cancel')
cancelOption && cancelOption.onPress()
}
}
const alert = Platform.OS === 'web' ? alertPolyfill : Alert.alert
export default alert
Usage:
Before:
import { Alert } from 'react-native'
Alert.alert(...)
After:
import alert from './alert'
alert(...)
Source & Credits: https://github.com/necolas/react-native-web/issues/1026#issuecomment-679102691
React Native is an open-source mobile application framework for Android, iOS and Web but there is not an Alert Component for Web but I have found a package which will provide you solutation. That is it to install package
npm i react-native-awesome-alerts
This example will help you
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import Alert from "react-native-awesome-alerts";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { showAlert: false };
}
showAlert = () => {
this.setState({
showAlert: true,
});
};
hideAlert = () => {
this.setState({
showAlert: false,
});
};
render() {
const { showAlert } = this.state;
return (
<View style={styles.container}>
<Text>Practice App</Text>
<Text style={{ padding: 10 }}>
Open up App.js to start working on your app!
</Text>
<TouchableOpacity
onPress={() => {
this.showAlert();
}}
>
<View style={styles.button}>
<Text style={styles.text}>Greet Me</Text>
</View>
</TouchableOpacity>
<Alert
show={showAlert}
message="Hello, Nice To Meet You :"
closeOnTouchOutside={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#fff",
},
button: {
margin: 10,
paddingHorizontal: 10,
paddingVertical: 7,
borderRadius: 5,
backgroundColor: "#AEDEF4",
},
text: {
color: "#fff",
fontSize: 15,
},
});
I Got this problem When using Text Input When Keyboard is not on screen the background image is fine but when keyboard is on screen image bottom comes above the keyboard .. the code for login page and image is given below I tried using the Keyboard avoid view and safeareaview but nothing seems to work out
LoginScreen.js
import React from "react";
import {SafeAreaView,TextInput,Image,View,Text,StatusBar,StyleSheet,KeyboardAvoidingView,TouchableOpacity, TouchableOpacityComponent} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
export default class LoginScreen extends React.Component{
state={
name:"",
error:""
}
onPressIcons=()=>{
this.props.navigation.navigate("About")
}
onPressNextPage=()=>{
if(this.state.name===""){
this.setState({error:"Enter A User Name"})
}
else{
this.props.navigation.navigate("Navigate",{name:this.state.name})
}
}
render(){
return(
<KeyboardAvoidingView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="transparent"/>
<KeyboardAvoidingView style={styles.form} >
<TouchableOpacity style={styles.icon} onPress={this.onPressIcons}>
<Icon name="ios-contact" size={45} color="#108786"/>
</TouchableOpacity>
<Image source={require("../assets/logo.png")} style={styles.image}/>
<Text style={styles.error}>{this.state.error}</Text>
<Text style={styles.username}>Username</Text>
<TextInput style={styles.input}
placeholder="UserName"
onChangeText={name =>{this.setState({name})}}
value={this.state.name}/>
</KeyboardAvoidingView>
</KeyboardAvoidingView>
)
}
}
const styles=StyleSheet.create({
container:{
flex:0,
backgroundColor:"#108786",
justifyContent:"center",
alignItems:"center"
},
form:{
alignContent:"center",
alignSelf:"center",
alignItems:"center",
elevation:24,
height:"100%",
width:"100%",
backgroundColor:"#FFF",
borderRadius:45,
borderTopStartRadius:0,
borderTopEndRadius:0,
borderBottomStartRadius:0,
borderBottomEndRadius:600
},
icon:{
marginTop:90,
marginLeft:300
},
image:{
height:150,
width:200,
alignSelf:"center"
},
error:{
marginTop:7,
alignSelf:"center",
color:"red",
fontSize:15
},
username:{
color:"#108786",
fontSize:27,
fontWeight:"bold",
alignSelf:"center",
justifyContent:"center",
marginRight:280,
marginTop:10
},
input:{
marginTop:15,
marginRight:100,
height:50,
width:380,
marginLeft:100,
borderWidth:StyleSheet.hairlineWidth,
borderColor:"#018786",
borderRadius:10,
fontWeight:"600",
paddingHorizontal:16,
alignSelf:"center",
borderBottomRightRadius:30,
borderTopRightRadius:30
}
})
You are wrapping the KeyboardAvoidingNew component all over the loginScreen. You can make use of just a View component. That should work well
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Navigator,
TouchableHighlight
} from 'react-native';
export default class calu extends Component {
constructor(props){
super(props);
this.state={f2:null, height:null,result:0};
this.compute=this.compute.bind(this);
}
compute(){
console.log('pressed');
let f1=(this.state.f1);
let f2=parseInt(this.state.f2);
this.setState({result: f1 + f2 });
}
render() {
return (
<View>
<TextInput
keyboardType='numeric' onChangeText={(text) => this.setState({f1: parseInt(text)})} placeholder='enter second number' />
<TextInput
keyboardType='numeric' onChangeText={(text) => this.setState({f2: parseInt(text)})} placeholder='enter second number' />
<Text> result: {this.state.result.toFixed(2)} </Text>
<TouchableOpacity
onPress={this.compute}>
<Text> compute </Text>
</TouchableOpacity>
</View>
);
}
}
AppRegistry.registerComponent('calu', () => calu);
I have done small app of adding two numbers and displaying result. But I want to display result in another scene using navigator, so where can I add navigator and how to pass value to another scene? Anyone please help me and share code to me.
Thank you.
I am trying to make a slider menu in Android. Therefor I made TouchableNativeFeedback with a View parent and Icon and text children wrapped in. Problem is the whole component isn´t clickable. Only the first 10% from the left hand side is clickable.
I have tried deleting all styling and switch to TouchableOpacity, TouchableWithoutFeedback and TouchableHighlight, but problem still remains.
import React from 'react'
import {View,
Text,
StyleSheet,
TouchableOpacity,
Platform
} from "react-native";
var DrawerMenuItem = React.createClass({
propTypes: {
onClick: React.PropTypes.func,
text: React.PropTypes.string.isRequired,
iconName: React.PropTypes.string.isRequired
},
render: function() {
return(
name={this.props.iconName}
size={24}
color={colors.lightBlack}
/>
{this.props.text}
)
}
});
module.exports = DrawerMenuItem;`
And in DrawerContent.js:
import React from 'react'
import DrawerMenuItem from './DrawerMenuItem'
import {View,
Text,
StyleSheet,
TouchableOpacity,
TouchableNativeFeedback,
BackAndroid,
ScrollView,
Image,
Platform
} from "react-native";
var DrawerContent = React.createClass({
propTypes: {
onClick: React.PropTypes.func,
resetStack: React.PropTypes.func,
closeDrawer: React.PropTypes.func,
},
_onPress: function(viewToShow){
this.props.onClick(viewToShow);
this.props.closeDrawer();
},
render: function() {
return (
<View>
<View>
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}>
<Text>{reduxStore.getState().user.name}</Text>
</View>
<Image resizeMode='cover' source={require('../../resources/images/rf_logo_vit.png')}></Image>
</View>
<ScrollView showsVerticalScrollIndicator={false} style={styles.menu}>
<View>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='line-chart' text={'###'}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bar-chart' text={'###'}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bullseye' text={Localize('###')}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='phone' text={Localize('###')}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='file-text' text={Localize('###')}/>
</View>
</ScrollView>
</View>
);
}
});
DrawerContent is the slider menu and its working. But only the first 10% of the component is clickable. I wish to make the whole component clickable. I mean everything inside TouchableNativeFeedback. Right now it only half of the Icon.
React Native version: 0.31.0 Platform(s) Android (also same problem in
IOS) Operating System: macOS