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>
);
};
Related
how i can pass a function navigation.goBack() to component child
Next code:
Parent
<SafeAreaView style={{ flex: 1 }}>
<ModalLoading visible={loading} />
<KeyboardAwareScrollView
innerRef={ref => scrollRef}
contentContainerStyle={{ flexGrow: 1 }}
style={styles.container}>
<HeaderCadastro
navigation={() => navigation.goBack()}
/>
Child
<Pressable onPress={navigation} style={style.backButton}>
<Icon name='chevron-back' size={moderateScale(30)} />
</Pressable>
Change your parent and child as this:
parent:
<HeaderCadastro navigation={navigation.goBack} />
child :
<Pressable onPress={() => navigation()} style={style.backButton}>
<Icon name='chevron-back' size={moderateScale(30)} />
</Pressable>
explanation :
There were only syntax errors, not major issues.
You just to have to remember how to call it and how to pass it.
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>
);
}
}
I implemented Drawer code and installed Drawer from its original docs and added Drawer into my Project, but I can't see drawer, tried playing with flex but in vain
Here are my code, any and every help is highly appreciated
Thank you
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View >
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
const [selectedValue, setSelectedValue] = useState(' ');
const [text, setText] = useState('');
const [data, setData] = useState(['']);
const [totalAmount, setTotalAmount] = useState(0)
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={styles.container}>
<View >
<Header />
<View style={styles.row}>
<TextInput style={styles.input}
underlineColorAndroid="transparent"
placeholder=" Amount "
placeholderTextColor="#9a73ef"
autoCapitalize="none"
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 here i put my DRAWER
<Text>TOTAL : {totalAmount}</Text>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
<Button
title="Save"
color="#841584"
accessibilityLabel="Learn more about this purple button"
onPress={() => {
if (text == 0 ) {
alert('Please enter the Amount ')
}
if (text && selectedValue != " "){
setData([...data, { name: text, selectedValue: selectedValue }
])
setTotalAmount(totalAmount + parseInt(text))
}}
}
/>
<View styles={styles.list}>
<FlatList
data={data}
renderItem={({ item }) => <React.Fragment>
<Text style={styles.item}> {item.name}$ Spend on "
{item.selectedValue}"</Text>
</React.Fragment>}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
)};
Here is the styles for my project
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
input: {
margin: 15,
height: 40,
borderColor: 'black',
borderWidth: 2,
width: 80,
flex: 1,
},
input2: {
margin: 15,
height: 40,
borderColor: 'black',
borderWidth: 2,
width: 80,
flex: 1,
},
row: {
flexDirection: 'row'
},
item: {
textAlign: 'center',
marginTop: 20,
padding: 20,
fontSize: 20,
backgroundColor: 'steelblue'
},
list: {
marginTop: 20,
flex: 1
},
button: {
}
});
also in , i have header file
export default function Header() {
return (
<View style={styles.header}>
<Text style={styles.title}>Мои расходы </Text>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 80,
paddingTop: 38,
backgroundColor: 'red'
},
title: {
textAlign: 'center',
color: '#fff',
fontSize: 20,
fontWeight: 'bold'
}
})
Swipe Left to Right, Just check Your Drawer Came out or not. If Not then Your Drawer is not set up as mentioned in the document. Make a button on your header and onPress Method just call {() => this.props.navigation.openDrawer()}
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>
If I need to use <Picker>..</Picker> more than once within a <View>..</View> how can I pick the selected VALUE of different <Picker> as this.state.PickerValue gives the selected value.
Try something like this
Constructor
constructor(props) {
super(props);
this.state = {
language: '',
level: '',
};
}
You render method
<View style={styles.container}>
<Picker
selectedValue={this.state.language}
style={{ height: 50, width: '100%' }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ language: itemValue })}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
<Picker
selectedValue={this.state.level}
style={{ height: 50, width: '100%' }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ level: itemValue })}>
<Picker.Item label="Beginner" value="beginner" />
<Picker.Item label="Intermediate" value="intermediate" />
<Picker.Item label="Professional" value="professional" />
</Picker>
</View>
Check out the live demo here
Read more about Picker API here
Use different state values, one for each picker.
import React, { Component } from 'react';
import { View, Picker } from 'react-native';
class PickersComp extends Component {
state = {
val1 : '',
val2: '',
val3: '',
}
render(){
return (
<View>
<Picker
selectedValue={this.state.val1}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue, itemIndex) => this.setState({ val1: itemValue })}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
<Picker
selectedValue={this.state.val2}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue, itemIndex) => this.setState({ val2: itemValue })}>
<Picker.Item label="foo" value="foo" />
<Picker.Item label="bar" value="bar" />
</Picker>
<Picker
selectedValue={this.state.val3}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue, itemIndex) => this.setState({ val3: itemValue })}>
<Picker.Item label="test" value="test" />
<Picker.Item label="test2" value="js" />
</Picker>
</View>
);
}
};