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
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
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>
)
}
}
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>;
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>
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>
)
}
}