REACT NATIVE: How can i make calculation with the Value of TextInput - javascript

I want to make a Total by adding the Values from TextInput in RN:
Here is my TextInput
<TextInput style={styles.input}
placeholder=" Amount "
placeholderTextColor="#9a73ef"
keyboardType='numeric'
onChangeText={text => setText(text)}
value={text}
/>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
<Picker.Item value='' label='Select Option' />
<Picker.Item label="Food" value="Food" />
<Picker.Item label="Transport" value="Transport" />
<Picker.Item label="Rent" value="Rent" />
<Picker.Item label="Other" value="Other " />
</Picker>
</View>
And TOTALis where i want to put my total Value by adding Value of TextInputs
<Text>TOTAL : </Text>
<Button
title="Save"
color="#841584"
accessibilityLabel="Learn more about this purple button"
onPress={() => {
if (text && selectedValue) setData([...data, { name: text, selectedValue: selectedValue }
])
}} />
<View styles={styles.list}>
<FlatList
data={data}
renderItem={({ item }) => <React.Fragment>
<Text style={styles.item}> {item.name} Dollars to "{item.selectedValue}"</Text>
</React.Fragment>}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
)};
I tried adding them they are Strings , i used to parseInt() but didnt work?
Here is the ScreenShot of my App

declear variable for total Amount like this
const [totalAmount,setTotalAmount] = useState(0)
update totalAmount value on save button
<Button
title="Save"
color="#841584"
accessibilityLabel="Learn more about this purple button"
onPress={() => {
if (text && selectedValue) {
setData([...data, { name: text,
selectedValue: selectedValue }
])
setTotalAmount(totalAmount + parseInt(text))
}
}} />
and use this variable in your html
<Text>TOTAL : {totalAmount}</Text>

no I was talking about this. check here
<View styles={styles.list}>
(data.length > 0)?
<FlatList
data={data}
renderItem={({ item }) => <React.Fragment>
<Text style={styles.item}> {item.name} Dollars to "
{item.selectedValue}"</Text>
</React.Fragment>}
keyExtractor={(item, index) => index.toString()}
/>
: null
</View>

Related

Reset form button Rect Native

I'm trying to create a form with a reset button in order to clear all fields, I'm building a Class Component I don't like the idea of using setState in each field, do you know any better way to clear this form?
simplified code example:
class Registration extends React.Component {
constructor(){
super();
this.state= {}
}
render() {
return (
<View >
<View >
<TouchableOpacity
style={{ styles.button }}
onPress={ } >
<Text style={{ style.text }} >RESET</Text>
</TouchableOpacity>
</View>
<ScrollView>
<View >
<TextInput
ref={this.textInput}
style={{ styles.input }}
placeholder='Name'
onChangeText={(text) => { }}
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='Username'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='password'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='email'
/>
</View>
.
.
.
</ScrollView>
</View>
);
}
}

How can I clear Textinput after clicking on radiobutton?

whenever i click an option i want textinput to get cleared
i have tried implementing clearbuttonmod but it doesn't work
<View>
<RadioButton.Group
onValueChange={(value) => setValue(value)}
value={value}
>
<RadioButton.Item label="Hate speech" value="Hate speech" />
<RadioButton.Item
label="I just don't like it"
value="I just don't like it"
/>
</RadioButton.Group>
<Text
value=""
style={{
padding: "3%",
fontSize: 18,
}}
>
Others
</Text>
<TextInput
style={styles.input}
clearButtonMode="always"
placeholder="Report..."
onChangeText={(value) => setValue(value)}
/>
on the top, import useRef
import {useRef} from "react";
create a ref variable and use it in TextInput
const InputRef = useRef();
then in TextInput
<TextInput
style={styles.input}
ref={InputRef}
clearButtonMode="always"
placeholder="Report..."
onChangeText={(value) => setValue(value)}
/>
adn in RadioButton
<RadioButton.Group
onValueChange={(value) => {
setValue(value)
InputRef.current.clear()
}}
value={value}
>
Working Example Here

How to create a Button that Change Background Color onPress in react native?

How can i create a button/TouchableOpacity that change the background color of style={styles.view} ?
<View style={styles.view}>
{user &&
<>
<TouchableOpacity onPress={carregaUsuarioAnonimo}>
<Image
style={styles.avatar}
source={{ uri: user.picture }} />
</TouchableOpacity>
<Text style={styles.nome_usuario}>{user.name}</Text>
</>
}
<ScrollView style={styles.scrollview} ref={(view) => { setScrollview(view) }}>
{
mensagens.length > 0 && mensagens.map(item => (
<View key={item.id} style={styles.linha_conversa}>
<Image style={styles.avatar_conversa} source={{ uri: item.avatar }} />
<View style={{ flexDirection: 'column', marginTop: 5 }}>
<Text style={{ fontSize: 12, color: '#999' }}>{item.usuario}</Text>
{typeof (item.mensagem) == "string" ?
<Text>{item.mensagem}</Text>
:
<Text> </Text>
}
</View>
</View>
))
}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.input_mensagem}
onChangeText={text => setCaixaTexto(text)}
value={caixaTexto} />
<TouchableOpacity onPress={salvar}>
<Ionicons style={{ margin: 3 }} name="md-send" size={32} color={'#999'} />
</TouchableOpacity>
</View>
</View>)
you can make a condition inside the style, like that:
create a boolean inside your state and change it value to true when the button is clicked.
Inside your Touchable, drop the condition.
style={
this.state.buttonCliked ? styles.backgroundBlue :
styles.backgroundGreen
}
I hope it helps you.
This is an example:-
state={isClicked:false}
checkToChangeStyle=()=>{
this.setState({isClicked:!this.state.isClicked})
}
return(
<TouchableOpacity onPress={this.checkToChangeStyle}
style={this.state.isClicked ? styles.backGround1 : styles.backGround2}>
<Text>Your Button</Text>
</TouchableOpacity>
)
const styles=StylesSheet.create({
backGround1:{backgroundColor:'green'},
backGround2:{backgroundColor:'red'},
})

React Native Picker: Set and Get different Picker Values

I am working with React Native Picker and I have created two states: userType and name.
However, there are two userType: Freelancer, Client. There are also two name for each userType, and these are: Freelancer 1, Freelancer 2, and Client 1, Client 2.
Currently, I have two pickers. One has the userType and the other has name. Regardless of the userType selected, the 2nd picker shows all the name i.e Freelancer 1, Freelancer 2, Client 1, Client 2.
But this is what I am trying to achieve:
HOW TO: Instead of showing all the name, I want to show specific name depending on the userType selected. For example: if userType === Freelancer, then name picker should display only Freelancer 1, Freelancer 2. And, if userType === Client, then name picker should display only Client 1, Client 2.
Code snippet Provided Below:
constructor(props) {
super(props);
this.state = {
userType: '',
name: '',
}
}
render() {
return (
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>User Type</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.userType}
onValueChange={(itemValue, itemIndex) =>
this.setState({ userType: itemValue })
}>
<Picker.Item label="Select User Type" value="" />
<Picker.Item label="Freelancer" value="Freelancer" />
<Picker.Item label="Client" value="Client" />
</Picker>}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>Name</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.name}
onValueChange={(itemValue, itemIndex) =>
this.setState({ name: itemValue })
}>
<Picker.Item label="Please Select" value="" />
<Picker.Item label="Freelancer 1" value="Freelancer 1" />
<Picker.Item label="Freelancer 2" value="Freelancer 2" />
<Picker.Item label="Client 1" value="Client 1" />
<Picker.Item label="Client 2" value="Client 2" />
</Picker>}
</View>
</View>
</View>
);
};
App Screenshot:
you should have function that return usernames based on user type
renderUserNames() {
if(this.state.userType=='Freelancer'){
return [<Picker.Item label="Freelancer 1" value="Freelancer 1" />,
<Picker.Item label="Freelancer 2" value="Freelancer 2" />]
}else{
return [<Picker.Item label="Client 1" value="Client 1" />,
<Picker.Item label="Client 2" value="Client 2" />]
}
}
then inside render function you can call i like
render() {
let options=this.renderUserNames();
return (
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>User Type</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.userType}
onValueChange={(itemValue, itemIndex) =>
this.setState({ userType: itemValue })
}>
<Picker.Item label="Select User Type" value="" />
<Picker.Item label="Freelancer" value="Freelancer" />
<Picker.Item label="Client" value="Client" />
</Picker>}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.titleStyle}>Name</Text>
<View style={styles.pickerStyle}>
{<Picker
mode='dropdown'
selectedValue={this.state.name}
onValueChange={(itemValue, itemIndex) =>
this.setState({ name: itemValue })
}>
<Picker.Item label="Please Select" value="" />
{options}
</Picker>}
</View>
</View>
</View>
);
};

How can set menu size fixed in react native?

I am setting option menu when click on icon,but it show menu sizes different rather than same. I am setting this menu as flat list item, and using react-native-popup-menu library, and any other way to display menu.I want to use menu options with fixed height and width of each of them.
Here is my code :-
_renderItem = ({item}) => {
return(
<TouchableOpacity onPress={() => this.handleListItemPress(item)}>
<View >
<View >
<View style={{flexDirection:'row',marginBottom:2}}>
<ImageView
image={item.pictures[0]}
style={[{marginRight:2},styles.imageStyle]}
/>
<ImageView
image={item.pictures[1]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
<View style={{flexDirection:'row',marginTop:2}}>
<ImageView
style={[{marginRight:2},styles.imageStyle]}
image={item.pictures[2]}
/>
<ImageView
image={item.pictures[3]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
</View>
<View>
<TextViewNonClickable
textViewText={item.name}
/>
<TextViewNonClickable
textViewText={item.description}
/>
</View>
<MenuProvider>
<Menu style={{position:'absolute',top:8,right:8}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions >
<MenuOption >
<Text >edit</Text>
</MenuOption>
<MenuOption>
<Text >delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>
</View>
</TouchableOpacity>
)
}
Please pass customStyles as a prop to MenuOptions and MenuOption.
<MenuOptions optionsContainerStyle={{width:100,height:60}}>
<MenuOption customStyles={{width:100,height:30}}/>
</MenuOptions>
I have done it,but i could not show menus overs the text
and here is my new code :-
<MenuProvider>
<Menu style={{position:'absolute',top:0,right:0}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions optionsContainerStyle=
{{paddingLeft:8,height:96,width:100}}>
<MenuOption customStyles={{height:48,width:100}}>
<Text
style={{fontWeight:'bold',paddingTop:8}}
onPress={() =>
this.openAddOrUpdateModal('update',item)}
>edit</Text>
</MenuOption>
<MenuOption customStyles={{height:48,width:100}}>
<Text style=
{{fontWeight:'bold',paddingTop:8}}>delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>

Categories

Resources