I am using andSubject function to set the subject in the parent component but it's not working can someone help me how can I call addSubject when I press the RoundedButton?
...
const [tempItem, setTempItem] = useState(null);
.....
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onSubmitEditing={({ nativeEvent }) => {
setTempItem(nativeEvent.text);
// addSubject(nativeEvent.text);
}}
/>
<RoundedButton
title="+"
size={50}
onPress={() => addSubject(tempItem)}
/>
</View>
...
I guess you are looking for something like this :
const [tempItem, setTempItem] = React.useState("");
const [addSubject , setAddSubject] = React.useState("");
...
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<Text>this text bellow will show after pressing on the button :</Text>
<Text>{addSubject}</Text>
<TextInput
style={styles.textInput}
onChangeText={setTempItem}
/>
<Button
title="+"
size={50}
onPress={() => setAddSubject(tempItem)}
/>
</View>
</View>
);
}
...
demo
You have to pass the function to children by props.
parent.js
function setAddSubject(item){
console.log(item)
}
<YourForm call={(item)=>setAddSubject(item) } />
YourForm.js
export default =(props)=>{
const [tempItem, setTempItem] = useState(null);
return (
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onSubmitEditing={({ nativeEvent }) => {
setTempItem(nativeEvent.text);
// addSubject(nativeEvent.text);
}}
/>
<RoundedButton
title="+"
size={50}
onPress={() => props.call(tempItem)}
/>
</View>
);
}
Related
I am building app using react native and I faced an error.
I added newly screen by copying certain page on the same project and reload app but occur an error
I try to solve this issue by restarting metro and restart nox(emulator) but this issue is not fixed.
import { AuthContext } from '../AuthProvider';
import ProfileScreen from '../containers/Profile';
import LifeSpanScreen from '../containers/LifeSpan';
import TopWishInScreen from '../containers/TopWishIn';
import aaa from '../containers/TopWishOut';
const Stack = createNativeStackNavigator();
const MainNavigator = () => {
const { user, userProfile } = useContext(AuthContext);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 3000);
}, []);
if (isLoading) {
return <SplashScreen/>
}
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{
userProfile ? (
<>
<Stack.Screen name="Home" component={HomeNavigator} />
<Stack.Screen name="Chat" component={ChatScreen}/>
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="LifeSpan" component={LifeSpanScreen} />
<Stack.Screen name="TopWishIn" component={TopWishInScreen} />
<Stack.Screen name="TopWishOut" component={aaa} />
</>
)
}
</Stack.Navigator>
</NavigationContainer>
);
};
export default MainNavigator;
And TopWishOut.js is like this:
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { AuthContext } from '../../AuthProvider';
import OutlineButton from '../../components/OutlineButton';
import AuthInput from '../../components/AuthInput';
import { styles } from './styles';
const TopWishOutScreen = ({ navigation }) => {
const { loading, login } = useContext(AuthContext);
const [userName, setUserName] = useState("");
const [eventHint, setEventHint] = useState('To put in perspective 24 years ago was 1998. What appened in that year ? ');
const [shareMessage, setShareMessage] = useState('Share what you are planning to do over the next 24 years')
return (
<View style={styles.container}>
<KeyboardAwareScrollView style={{ flex: 1 }} contentContainerStyle={{ flex: 1 }}>
<View style={styles.containerInner}>
<View style={styles.message}>
<Text style={styles.notetext}>{"With just 24 years remaining, what are you going to do with that time?"}</Text>
<Text style={styles.plannote}>{"Plan out your time left by focusing on what is most important."}</Text>
</View>
<View style={styles.topwishlist}>
<View>
<AuthInput
placeholder='Get vp title'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Bora Bora'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Go to 170lbs'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Help poor with electrtcity'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Take Grandkids to Desney world'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
</View>
<View style={styles.divider}/>
<View style={styles.loginWrapper}>
<OutlineButton
title="Next"
loading={loading}
onPress={() => {
navigation.navigate('');
}}
/>
</View>
</View>
</KeyboardAwareScrollView>
</View>
);
};
export default TopWishOutScreen;
Error message is like this
I am using nox player as emulator.
I want to show the Text Input field which should be shown when the drop-down item is selected in react native
I use simple logic. I make a function with trying to pass the selected value to the function but the selected item is not found
export class ThirdPage extends Component{
static navigationOptions ={
title:"Register",
header:null
};
state = {
// user:'',
username: '',
phn: '',
address:'',
password:'',
// isLoggingIn: false,
text:''
};
displayacoountForm = (text)=>{
if({text} === "user"){
return <TextInput style={[styles.input]}
placeholder="Enter your phone number"
// underlineColorAndroid="transparent"
numberOfLines = {1}
onChangeText={(phn) => this.setState({ phn })}
/>
}
if({text} === "doctor"){
return <TextInput style={[styles.input]}
placeholder="Enter your password"
secureTextEntry={true}
// underlineColorAndroid="transparent"
numberOfLines = {1}
onChangeText={(password) => this.setState({ password })}
/>
}
if({text} === "clinic"){
<TextInput style={[styles.input]}
placeholder="Enter your phone clinic"
// underlineColorAndroid="transparent"
numberOfLines = {1}
onChangeText={(phn) => this.setState({ phn })}
/>
}
}
render(){
const data = [["user", "doctor", "clinic"]];
return(
<View style={[styles.wholecontainer,styles.verticalFlex,styles.backgroundColor1]}>
<Image
style={[styles.container1,styles.backgroundColor1,styles.position1]}
source={require('Finalapp/Images/createacc.png')}
/>
<Text style={[styles.headText,styles.position2]}>Create Your Account</Text>
<ScrollView style={[styles.backgroundColor1]}>
<View style={[styles.container2]}>
<TextInput style={[styles.input]}
placeholder="Enter your Name"
// underlineColorAndroid="transparent"
numberOfLines = {1}
onChangeText={(username) => this.setState({ username })}
/>
<TextInput style={[styles.input]}
placeholder="Enter your address"
// underlineColorAndroid="transparent"
numberOfLines = {1}
onChangeText={(address) => this.setState({address})}
/>
<TextInput style={[styles.input]}
placeholder="Enter your phone number"
// underlineColorAndroid="transparent"
numberOfLines = {1}
onChangeText={(phn) => this.setState({ phn })}
/>
<TextInput style={[styles.input]}
placeholder="Enter your password"
secureTextEntry={true}
// underlineColorAndroid="transparent"
numberOfLines = {1}
onChangeText={(password) => this.setState({ password })}
/>
<View style={[styles.container3]}>
<DropdownMenu
// style={[styles.container4]}
bgColor={'white'}
tintColor={'#666666'}
activityTintColor={'green'}
// arrowImg={}
// checkImage={}
// optionTextStyle={{color: '#333333'}}
// titleStyle={{color: '#333333'}}
// maxHeight={300}
handler={(selection, row) => this.setState({text: data[selection][row]})}
data={data}
>
<View style={[styles.backgroundColor1]}>
{this.displayacoountForm({this.state.text})}
</View>
</DropdownMenu>
</View>
<View style={[styles.button2]}>
<Button
// class="button"
onPress={()=>this.props.navigation.navigate('Login')}
title="Submit"
color="#29468f"
/>
</View>
</View>
</ScrollView>
</View>
)};
}
The issue is you are not sending parameter properly to displayacoountForm.
Change this
<View style={[styles.backgroundColor1]}>
{this.displayacoountForm({this.state.text})}
</View>
to
<View style={[styles.backgroundColor1]}>
{this.displayacoountForm(this.state.text)}
</View>
And replace your displayacoountForm function with this one.
displayacoountForm = (text) => {
switch (text) {
case 'user':
return (
<TextInput
style={[styles.input]}
placeholder="Enter your phone number"
// underlineColorAndroid="transparent"
numberOfLines={1}
onChangeText={phn => this.setState({ phn })}
/>
);
case 'doctor':
return (
<TextInput
style={[styles.input]}
placeholder="Enter your password"
secureTextEntry
// underlineColorAndroid="transparent"
numberOfLines={1}
onChangeText={password => this.setState({ password })}
/>
);
case 'clinic':
return (
<TextInput
style={[styles.input]}
placeholder="Enter your phone clinic"
// underlineColorAndroid="transparent"
numberOfLines={1}
onChangeText={phn => this.setState({ phn })}
/>
);
default:
return undefined;
}
};
When I click 1 checkbox, all values checkbox are checked too, then my question is how to separate it according to the value of the array?
render () {
const { data } = this.props
const { checked, statusChecked, unhide } = this.state
const checkBoxCourier = data.map((item, index) => {
return (
<Card key={index} style={globalStyle.padDefault}>
<Item>
<Text>
{'[LOGO] '}
</Text>
<Text style={styles.bold}>{item.courier_name.toUpperCase()}</Text>
</Item>
{
item.services.map((item2, index) => (
<ListItem
key={index}
>
<CheckBox
checked={checked}
onPress={() => this.onCheckBoxPress(item2.courier_service_id, item2.status)}
/>
<View style={styles.row}>
<Body>
<Text style={styles.textStyle}>{item2.service_name}</Text>
<Text style={styles.textStyle}>{item2.service_description}</Text>
</Body>
</View>
</ListItem>
))
}
</Card>
)
})
return (
<Container>
<ScrollView>
{checkBoxCourier}
</ScrollView>
</Container>
)
you do by this way
checked={index+item2.courier_service_id == this.state.Selected ? checked :uncheck}
onPress={() => this.onCheckBoxPress(item2,index)}
/>
and in onCheckBoxPress
onCheckBoxPress(){
this.setState({Selected:index+item2.courier_service_id})
}
I hope this will help you
You need to pass a flag to the checkbox that is specific to the service item rather than the component, something like this:
render(){
const {data} = this.props
const {checked, statusChecked, unhide} = this.state
const checkBoxCourier = data.map((item, index) => {
return (
<Card key={index} style={globalStyle.padDefault}>
<Item>
<Text>
{'[LOGO] '}
</Text>
<Text style={styles.bold}>{item.courier_name.toUpperCase()}</Text>
</Item>
{
item.services.map((item2, index) => (
<ListItem
key={index}
>
<CheckBox
checked={item2.isChecked} // Save the value here
onPress={() => this.onCheckBoxPress(item2.courier_service_id, item2.status)}
/>
<View style={styles.row}>
<Body>
<Text style={styles.textStyle}>{item2.service_name}</Text>
<Text style={styles.textStyle}>{item2.service_description}</Text>
</Body>
</View>
</ListItem>
))
}
</Card>
)
})
I need focus the next field input in react native, in android platform.
But the focus() function, not exists in android react native, only in IOS.
How make this ? I use react native with typescript.
The focus function works just fine.
<View style={{flexDirection: 'row'}}>
<Text style={{flex: 1}}>Enter Name: </Text>
<TextInput ref="name" onChangeText={(name) => this.setState({name})} style={{flex: 1}}
onSubmitEditing={() => this.refs.age.focus()}/>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={{flex: 1}}>Enter Age: </Text>
<TextInput ref="age" keyboardType="numeric" onChangeText={(age) => this.setState({age})} style={{flex: 1}}
onSubmitEditing={() => this.refs.sport.focus()}/>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={{flex: 1}}>Enter Favourite Sport: </Text>
<TextInput ref="sport" onChangeText={(sport) => this.setState({sport})} style={{flex: 1}}/>
</View>
Hope this helps. This is for android.
You have to user ref on Inputs where you want to focus on:
<Input
ref={(node) => { this.myInput = node }}
value={this.state.myInput.toString()}
onSubmitEditing={() => { this.myOtherInput.focus() }}/>
<Input
ref={(node) => { this.myOtherInput = node }}
value={this.state.myOtherInput.toString()}/>
You can see that when you submit the editing on the first input you will focus on the second one. you can use this.MY_CUSTOM_REF.focus() wherever you want.
This work for me:
<Input
blurOnSubmit={false}
returnKeyType="next"
onSubmitEditing={() => {
this.passwordInput.wrappedInstance.focus();
}}
/>
<Input
secureTextEntry
ref={(input) => {
this.passwordInput = input;
}}
/>
I insert the function in my customize component.
public focus(){
this.input.focus()
}
Have a look at this article, this might be handy react-native inputs
//Helper function
focusNextField(nextField) {
this.refs[nextField].focus();
}
<TextInput
ref='1'
style={styles.otpInputStyle}
keyboardType='numeric'
secureTextEntry
value={this.props.otp1}
maxLength={1}
onChangeText={(num) => {
this.props.otpCode1(num); //action call
if (num && num.length === 1) {
this.focusNextField('2'); //function call. '2' ref to next input ref
}
}}
/>
import React, { useRef } from 'react';
...
export default function YourFuctionalComponent() {
const input1 = useRef(null);
const imput2 = useRef(null);
const doSomething = () => {}
return(
<>
<TextInput
autoFocus
ref={input1}
onSubmitEditing={() => { imput2.current.focus(); }}
returnKeyType="next"
/>
<TextInput
ref={input2}
onSubmitEditing={() => doSomething()}
returnKeyType="done"
/>
</>
);
}
https://i.stack.imgur.com/W6dvs.gif
When I start typing the placeholder disappears but I still can't see what I type only. I can only see it when I click out of the field or submit it. I literally can't see the text that I'm typing only after I'm done which is very frustrating.
// Scene
export default class Authentication extends Component {
constructor(props) {
super(props);
this.state = { email: '', password: '' };
}
render() {
return (
<ViewContainer>
<StatusbarBackground/>
<View style={styles.container}>
<View>
<View style={styles.logoContainer}>
<Image source={require('../Resources/logo.png')} style={styles.logo}/>
</View>
<TextInput
style={styles.TextInput}
onChangeText={(text) => this.setState({email: text})}
value={this.state.email}
onFocus={this.onFocus}
autoCorrect={false}
returnKeyType="next"
keyboardType="email-address"
placeholder="EMAIL"
placeholderTextColor="white"
/>
<View style={styles.inputBorder} />
<View style={styles.inputBorder} />
<TextInput
style={styles.TextInput}
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
onFocus={this.onFocus}
autoCorrect={false}
returnKeyType="done"
placeholder="PASSWORD"
secureTextEntry={true}
placeholderTextColor="white"
/>
<View style={styles.inputBorder} />
<View style={styles.inputBorder} />
<View style={styles.buttons}>
<Button style={styles.login} title="Login" color="green" onPress={login}/>
<Button style={styles.signup} title="Signup" color="green" onPress={signup} />
</View>
</View>
</View>
</ViewContainer>
);
}
}