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.
Related
I used useState hook. onSubmitEditing i.e. pressing enter the command setTmpItem should run and should set the value of inputBox in the variable tmpItem.
addSubject prop passed is also a hook, which can be seen in 2nd code(app.js)
But when I press the RoundedButton, it is not console logging neither 1 nor 2 and also addSubject(tmpItem) not working.
Focus.js below
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { TextInput } from 'react-native-paper';
import { RoundedButton } from '../../components/RoundedButton';
export const Focus = ({ addSubject }) => {
const [tmpItem, setTmpItem] = useState(null);
return (
<View style={styles.container}>
<View>
<Text> What would you like to focus on? </Text>
<View>
<TextInput
onSubmitEditing={({ nativeEvent: { text } }) => {
setTmpItem(text);
}}
/>
<RoundedButton
size={50}
title="+"
onPress={() => {
console.log("1");
addSubject(tmpItem);
console.log("2");
}}
/>
</View>
</View>
</View>
);
};
App.js below
//App.js is the central point to glue everything
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Focus } from './src/features/focus/Focus';
export default function App() {
const [focusSubject, setFocusSubject] = useState(null);
return (
<View>
{focusSubject ? (
<Text>Where am I going to build a timer</Text>
) : (
<Focus addSubject = {setFocusSubject}/>
)}
<Text>{focusSubject}</Text>
</View>
);
}
RoundedButton.js below
import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
export const RoundedButton = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return (
<TouchableOpacity>
<Text>{props.title}</Text>
</TouchableOpacity>
);
};
You need to handle your TextInput for Focus.js by passing the value and onChangeText props in TextInput component like:
export const Focus = ({ addSubject }) => {
const [tmpItem, setTmpItem] = useState(null);
const onSubmit = () => {
//and handle this onSubmit function the way you want to
//or pass the addSubject props
addSubject(tmpItem);
}
return (
<View style={styles.container}>
<View>
<Text> What would you like to focus on? </Text>
<View>
<TextInput
onChangeText={setTmpItem}
value={tmpItem}
onSubmitEditing={() => onSubmit()}
/>
<RoundedButton
size={50}
title="+"
onPress={() => {
addSubject(tmpItem);
}}
/>
</View>
</View>
</View>
);
};
Also, the reason why console.log not working in RoundedButton is, you're not passing that onPress prop to your TouchableOpacity of RoundedButton. In RoundedButton.js do it like this:
import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
export const RoundedButton = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return (
<TouchableOpacity onPress={props.onPress}>
<Text>{props.title}</Text>
</TouchableOpacity>
);
};
props.onPress is what you're missing.
Hope this works for you.
I am new in react native, making a basic app that will find no of cases of corona in every country
so i have made 2 component both on separate file. how to switch from child to child component ?
Now i want to switch between them when i click on a button using stack navigator
App.js
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Splash from './scenes/splash';
import Corona from './scenes/corona';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Corona" component={Corona} />
</Stack.Navigator>
</NavigationContainer>
);
}
splash.js
import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';
export default function splash({navigation}) {
return (
<View style={styles.container}>
<Image
source={require('../assets/corona.jpg')}
resizeMode="cover" style={styles.img} />
<Text style={styles.txt}>
Track the current status {"\n"}
of the COVID-19 and{"\n"}
stay up to date.</Text>
<Text
style={styles.btn}
onPress={() => this.props.navigation.navigate('Corona')}
>Continue</Text>
</View>
)
}
corona.js (navigate to here)
import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';
export default function corona({navigation}) {
return (
<div>
<View>
<Text>Hello next screen</Text>
</View>
</div>
)
}
In splash.js
change
<Text style={styles.btn}
onPress={() => this.props.navigation.navigate('Corona')}>Continue</Text>
to
<Text style={styles.btn}
onPress={() => navigation.navigate('Corona')}>Continue</Text>
And in corona.js
Remove <div> tags in return, react-native doesn't support div tags
Hope this helps!
Thanks for your reading,I am a beginner into React Native,I find a similar question title on this site, but my question is different from that.
I use TouchableHighlight to press to open a new screen,I have succeeded. But the button did not change color. is that normal?
There are some of my try:
I try to use TouchableOpacity:The button will change it opacity and then open new screen
I also try to use TouchableNativeFeedback:The button behaves normally once，when i tap second time it has no behavior unless i have a long press.
when i use the button to do something else, not to open a new screen, it behaves correctly.
Here is my code:
import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
} from 'react-native';
import MyInfoOrder from './MyInfoOrder';
export default class MyInfo extends React.Component{
_onPress(){
console.log("tap");
}
_onPressMessage(){
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'order',
component: MyInfoOrder,
})
}
}
render(){
return(
<View style={styles.btnGroup}>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPressMessage.bind(this)}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/message.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/friends.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/col.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
</View>
)
}
}
const styles = StyleSheet.create({
btnGroup:{
marginBottom:30,
borderRadius:10,
backgroundColor:'#FFFFFF',
},
btnItem:{
height:104,
borderRadius:10,
},
btnItemView:{
borderRadius:10,
backgroundColor:'#FFFFFF',
height:106,
flexDirection:'row',
alignItems:'center',
},
btnItemViewImage:{
width:48,
height:48,
marginLeft:24,
marginRight:24
},
btnItemViewText:{
flex:1,
fontSize:32,
color:'#333333',
},
btnItemViewArrow:{
width:30,
height:30,
marginRight:30
},
})
I use:
"react": "15.4.2",
"react-native": "0.41.2",
platform：android 6.0
Adjust "delayPressIn" props in TouchableHighlight to 0 and everything work as expected.
if you want change color of TouchableHighlight when pressed you need to add
underlayColor in props
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);
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