checkboxes not changing react native elements - javascript

Hi I am doing a form like the component with checkboxes on react native that marks if the user is female or male, but I can't make it work it appears and looks like I want but I can't make the mark change from one option to the other one nor can I pass the value to submit
any help is appreciated
Note: that I am using the library react-native-elements for the <CheckBox /> component.
this is my code
import React, { useContext,useState} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
ScrollView,
} from 'react-native';
import MyDatePicker from './MyDatePicker';
import { CheckBox } from 'react-native-elements';
const PersonalForm = ({onSubmit, errorMessage}) => {
const [vName, setvName] = useState('');
const [vSecondName, setvSecondName] = useState('');
const [selectedValue, setSelectedValue] = useState(true);
return (
<ScrollView>
<View style={styles.buttonContainer}>
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
placeholder="Nombre"
underlineColorAndroid='transparent'
onChangeText={newvName => setvName(newvName)}
value={vName}
autoCorrect={false}
autoCapitalize='characters'
/>
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
placeholder="Segundo nombre"
underlineColorAndroid='transparent'
onChangeText={newvSecondName => setvSecondName(newvSecondName)}
value={vSecondName}
autoCorrect={false}
autoCapitalize='characters'
/>
</View>
</View>
<CheckBox
containerStyle={styles.checkbox}
textStyle={styles.checkboxTxt}
uncheckedColor={'#b3b4b5'}
checkedColor={"#911830"}
key={4}
title="Male"
value={4}
value="4"
checkedIcon="stop"
checked={selectedValue}
onChange={()=>setSelectedValue(true)}
/>
<CheckBox
containerStyle={styles.checkbox}
textStyle={styles.checkboxTxt}
uncheckedColor={'#b3b4b5'}
checkedColor={"#911830"}
key={3}
title="Female"
value={3}
value="3"
checkedIcon="stop"
checked={!selectedValue}
onChange={()=>setSelectedValue(false)}
/>
<View>
<MyDatePicker />
</View>
<View style={styles.buttonContainer2}>
<TouchableOpacity
style={ styles.logout}
onPress={() => onSubmit(vName, vSecondName, vGender, vEmail)}
>
<Text style={styles.loginText}>GUARDAR</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
};

Your are using the callback wrong. As mentioned in the docs, the callback you are looking for is onPress instead of onChange.
Change it to this:
<CheckBox
containerStyle={styles.checkbox}
textStyle={styles.checkboxTxt}
uncheckedColor={'#b3b4b5'}
checkedColor={"#911830"}
key={4}
title="Male"
value={4}
value="4"
checkedIcon="stop"
checked={selectedValue}
onPress={()=>setSelectedValue(true)}
/>
<CheckBox
containerStyle={styles.checkbox}
textStyle={styles.checkboxTxt}
uncheckedColor={'#b3b4b5'}
checkedColor={"#911830"}
key={3}
title="Female"
value={3}
value="3"
checkedIcon="stop"
checked={!selectedValue}
onPress={()=>setSelectedValue(false)}
/>

Related

How to switch radio button and title in react native paper radio button

i use react native paper radio button but it shows the text on the left and the radio button on the right like: "Text ✓",
i want the button to be on the left and the text on the right
i want it to be: "✓ Text"
this is my code below
<RadioButton.Group
onValueChange={handleChange('i_am')}
value={values.i_am}
>
<RadioButton.Item
label="1"
value="1"
color="#1E6DAD"
/>
<RadioButton.Item
label="2"
value="2"
color="#1E6DAD"
/>
</RadioButton.Group>
The solution is by using flexDirection =>
<RadioButton.Item
label="1"
value="1"
color="#1E6DAD"
style={{ flexDirection: 'row-reverse', alignSelf: 'flex-start' }}
/>
<RadioButton.Group
onValueChange={()=>handleChange(//here set the value of "1" or "2")}
value={values.i_am}
>
<RadioButton.Item
label="1"
value="1"
color="#1E6DAD"
/>
<RadioButton.Item
label="2"
value="2"
color="#1E6DAD"
/>
</RadioButton.Group>
You can customize it like this by using your own custom views.
Here is the code example.
import * as React from "react";
import { View, StyleSheet } from "react-native";
import { RadioButton, Text } from "react-native-paper";
const MyComponent = () => {
const [value, setValue] = React.useState(1);
return (
<RadioButton.Group
onValueChange={(newValue) => setValue(newValue)}
value={value}
>
<View style={styles.buttonContainer}>
<RadioButton value={1} />
<Text style={styles.label}>1</Text>
</View>
<View style={styles.buttonContainer}>
<RadioButton value={2} />
<Text style={styles.label}>2</Text>
</View>
</RadioButton.Group>
);
};
const styles = StyleSheet.create({
buttonContainer: {
flexDirection: "row",
alignItems: "center",
},
label: { flex: 1, textAlign: "right", marginRight: 16 },
});
export default MyComponent;
It will be shown like this
I hope this help you out

How can I show a new screen after a button is pressed in a component in react native?

I have a created a Carousel component Splash and at the last view/page of it, I have a TextInput and button.On Press, I want this button to open a new screen with BottomNav component where I can do by other stuffs. I just want this Splash as a landing page. But when on running this code I get Splash and BottomNav mounted in same screen.
My Apps.js:
export class App extends Component {
render() {
return (
<PaperProvider>
<Splash />
<BottomNav />
</PaperProvider>
)
}
}
export default App
Splash.js:
render() {
return (
<View style={styles.container} onLayout={this._onLayoutDidChange} >
<Carousel
style={this.state.size}
currentPage={0}
autoplay
isLooped={false}
bulletStyle={{borderColor:'#02101a'}}
bullets
chosenBulletStyle={{backgroundColor:'#02101a'}}
>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Sanitize Your Hands Properly
</Text>
<Animated.View>
<Image source={require('../src/sanitizehand.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Use an alcohol-based hand sanitizer that contains at least 60% alcohol to disinfect your hand at regular basis.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Practice Social Distancing
</Text>
<Animated.View>
<Image source={require('../src/socialdistancing.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Practice social distancing and maintain space between yourself and others to prevent infection and its spread.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<TextInput
label='Phone No.'
value={this.state.text}
placeholder='Enter here'
onChangeText={text => this.setState({ text })}
style={styles.textinput}
/>
<Button mode="contained" onPress={() => console.warn('Press')} icon='arrow-right'>
Register
</Button>
</View>
</Carousel>
</View>
);
}
BottomNav.js:
render() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feeds" component={Feeds} />
<Tab.Screen name="Global" component={Global} />
<Tab.Screen name="FAQ" component={Faq} />
</Tab.Navigator>
</NavigationContainer>
)
}
}

React Native Keyboard Avoiding view with Native base

I'm using native base in screen, and I'm trying to add but it is not working properly as keyboard still hides the text inputs
render() {
return (
<Container>
<Header style={styles.header}>
<Left style={styles.left}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("Welcome")}
>
<FontAwesome
name={I18nManager.isRTL ? "angle-right" : "angle-left"}
size={30}
color="#6f6f6f"
/>
</TouchableOpacity>
</Left>
<Body style={styles.body} />
<Right style={styles.right} />
</Header>
<View style={styles.signuplogosec}>
<Image source={Logo} style={styles.signuplogostyle} />
</View>
<KeyboardAvoidingView behavior="padding" enabled>
<Form style={styles.form}>
<Item rounded style={styles.inputStyle}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="First Name"
onChangeText={(first_name) => { this.setState({ first_name }) }}
style={styles.inputmain}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Last Name"
style={styles.inputmain}
onChangeText={(last_name) => { this.setState({ last_name }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Email"
style={styles.inputmain}
autoCapitalize='none'
onChangeText={(email) => { this.setState({ email }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(password) => { this.setState({ password }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Confirm Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(confirm_password) => { this.setState({ confirm_password }) }}
/>
</Item>
<TouchableOpacity
info
style={styles.signInbtn}
onPress={this.signIn}
>
<Text autoCapitalize="words" style={styles.buttongetstarted}>
Sign Up
</Text>
</TouchableOpacity>
</Form>
</KeyboardAvoidingView>
<View style={styles.signupbottomView}>
<TouchableOpacity
style={styles.fbButton}
onPress={() => alert("Facebook button Clicked")}
>
<View iconRight style={styles.fbview}>
<Ionicons name="logo-linkedin" size={30} color="white" />
<Text autoCapitalize="words" style={styles.fbButtonText}>
Sign Up with LinkedIn
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupbottomText}
onPress={()=>{this.props.navigation.navigate('SignIn')}}>
<Text style={styles.bottomText01}>
Do you have an account?{" "}
<Text style={styles.bottomText02}>Sign In</Text>
</Text>
</TouchableOpacity>
</View>
</Container>
);
}
}
export default SignUpScreen;
I have tried to add different views inside form tag but it is still not working, I have tried to create different form tags but failed.
My requirement is simple I want to use the KeyboardAvoidingView inside Native base components, I'm wrong some where but I don't know where
Just import KeyboardAvoidingView from react-native using with
behavior='position'
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, KeyboardAvoidingView} from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<KeyboardAvoidingView behavior='position'>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
}
import { Image,KeyboardAvoidingView } from 'react-native';
import { Container, Content, Text, Card, CardItem, Button, Icon, Form, Item, Input, Spinner } from 'native-base';
//https://github.com/GeekyAnts/NativeBase/issues/1163
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<Content>...</Content>
</KeyboardAvoidingView>;

Why the icon disapear if I use TouchableOpacity on ReactNative and NativeBase?

I'm using React Native and NativeBase.
I just try to show an icon next to an entry and add TouchableOpacity to after trigger a function, but the icon disapear
This is my code:
<Item floatingLabel>
<Label>Password</Label>
<Input
autoCorrect={false}
autoCapitalize='none'
secureTextEntry={ this.state.securePass }
onChangeText = { value => this.updateInput('password', value)}
value = { this.state.form.password.value }
type = { this.state.form.password.type }
/>
<TouchableOpacity>
<Icon name='eye' type="FontAwesome" style={ styles.iconFont } />
</TouchableOpacity>
</Item>
If I put this code outside the Item of nativeBase works but no inside:
<TouchableOpacity>
<Icon name='eye' type="FontAwesome" style={ styles.iconFont } />
</TouchableOpacity>
I hope you can helpme!
Thanks!!
<View style={{flexDirection: 'row'}}>
<TouchableOpacity>
<Icon name='eye' type="FontAwesome" style={ styles.iconFont } />
</TouchableOpacity>
<Item floatingLabel>
<Label>Password</Label>
<Input
autoCorrect={false}
autoCapitalize='none'
secureTextEntry={ this.state.securePass }
onChangeText = { value => this.updateInput('password', value)}
value = { this.state.form.password.value }
type = { this.state.form.password.type }
/>
</Item>
</View>

Whole text is copied to the right side in react native code

Now it is on the left side. How to copy the same text to the right even
and how can I style the button and style the text input more colorful and fonts bigger?
Here the example of what I want:
Here is what I have tried
<View style={StyleSheet.row}>
<Text>GAME 10</Text>
<TextInput
placeholder="GAME 10"
underlineColorAndroid="transparent"
style={StyleSheet.TextInputStyleClass}
/>
</View>
<View style={StyleSheet.row}>
<Text>TOTAL TEAM 1:</Text>
<TextInput
placeholder="TOTAL"
underlineColorAndroid="transparent"
style={StyleSheet.TextInputStyleClass}
/>
</View>
<TouchableOpacity onPress={this._onButtonPress}>
<Text>ADD</Text>
</TouchableOpacity>
You can move the text into a component, then just render the component twice:
export default class Text extends React.Component {
render() {
return (
<View>
<View style={StyleSheet.row}>
<Text>
GAME 10
</Text>
<TextInput placeholder="GAME 10" underlineColorAndroid='transparent' style={StyleSheet.TextInputStyleClass} />
</View>
<View style={StyleSheet.row}>
<Text>
TOTAL TEAM 1:
</Text>
<TextInput
placeholder="TOTAL"
underlineColorAndroid='transparent'
style={StyleSheet.TextInputStyleClass}
/>
</View>
<TouchableOpacity onPress={this._onButtonPress}>
<Text>ADD</Text>
</TouchableOpacity>
</View>
)
}
}
class Parent extends React.Component {
render() {
return (
<View>
<View className="left">
<Text />
</View>
<View className="right">
<Text />
</View>
</View>
)
}
}

Categories