We Keep Coding

I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even

Now i have used state hook to hide the Form when the page loads. And upon the click or toggle of the radio I'm able to show the Form, But if i toggle the radio again, the form is not hiding.
This is what i have implemented:
const WelcomeTab = () => {
const [toggle, settoggle] = useState(false);
return (
<React.Fragment>
<Tab.Pane
style={{
borderRadius: '7px',
padding: '30px',
}}
attached={false}
>
<Grid>
<Grid.Row>
<Grid.Column floated="left" width={8}>
<Header
style={{
fontSize: '18px',
fontFamily: 'Nunito-Regular',
color: '#4F4F4F',
}}
>
Welcome Screen
</Header>
</Grid.Column>
<Grid.Column floated="right" width={4}>
<Header
as="h4"
style={{
display: 'flex',
justifyContent: 'space-around',
marginLeft: '30px',
}}
>
Customize
<Radio toggle onChange={() => settoggle({ toggle: !toggle })} />
</Header>
</Grid.Column>
</Grid.Row>
</Grid>
{toggle ? (
<Form style={{ paddingTop: '20px' }}>
<Form.Field>
<label style={lableStyle}>Title</label>
<input style={{ marginBottom: '20px' }} />
<label style={lableStyle}>Message</label>
<TextArea />
</Form.Field>
</Form>
) : null}
</Tab.Pane>
</React.Fragment>
);
};
const lableStyle = {
fontFamily: 'Nunito-Regular',
fontWeight: 400,
color: '#4F4F4F',
fontSize: '15px',
display: 'inline-block',
marginBottom: '10px',
};
export default WelcomeTab;

try to add useEffect hook along with change like below,
you no longer need to {} this is old syntax of setState, using hooks we directly make the changes, hope this helps
useEffect(()=>{},[toggle])
replace this wrong syntax code, i can see its not json its boolean value
<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>
as this is old syntax not work with hooks, try to implment this instead,
<Radio toggle onChange={()=>settoggle(!toggle)}/>

How to properly distance two radio buttons or checkboxes in the same row?

I'm a newbie in React Native and I'm working on a form to register an animal for adoption. Some fields are filled by choosing radio buttons and checkboxes, but in order to organize the form's layout I need to distance those elements of the form that are displayed in a row.
I tried to use:
justify-content: 'space around' - which didn't work because the label gets distanced from the button/box;
paddingLeft, paddingRight - kind of worked but as the buttons and boxes have labels with different numbers of characters, I can't get them aligned vertically like in the picture bellow without wasting a lot of time trying to set the correct padding.
Is there an easier way to do this?
Here is my code:
<Text>SEXO</Text>
<View style = {{flexDirection: 'row', alignSelf: "auto"}}>
<RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
<Text style={{marginRight: 20}}>Macho</Text>
<RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/>
<Text>Femea</Text>
</View>
<Text>PORTE</Text>
<View style = {{flexDirection: 'row'}}>
<RadioButton checked={pequenoCheck} onPress={radioPorteHandlerPequeno}/>
<Text style={{paddingRight: 20}}>Pequeno</Text>
<RadioButton checked={medioCheck} onPress={radioPorteHandlerMedio}/>
<Text style={{paddingRight: 20}}>Medio</Text>
<RadioButton checked={grandeCheck} onPress={radioPorteHandlerGrande}/>
<Text>Grande</Text>
</View>
<Text>IDADE</Text>
<View style = {{flexDirection: 'row'}}>
<RadioButton checked={filhoteCheck} onPress={radioIdadeHandlerFilhote}/>
<Text style={{paddingRight: 20}}>Filhote</Text>
<RadioButton checked={adultoCheck} onPress={radioIdadeHandlerAdulto}/>
<Text style={{paddingRight: 20}}>Adulto</Text>
<RadioButton checked={idosoCheck} onPress={radioIdadeHandlerIdoso}/>
<Text>Idoso</Text>
</View>
<Text>TEMPERAMENTO</Text>
<View style={{flexDirection: "row"}}>
<CheckBox style = {{height: 25}}
disabled={false}
value={brincalhao}
onValueChange={(newValue) => setBrincalhao(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Brincalhão</Text>
<CheckBox style = {{height: 25}}
disabled={false}
value={timido}
onValueChange={(newValue) => setTimido(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Tímido</Text>
<CheckBox style = {{height: 25}}
disabled={false}
value={calmo}
onValueChange={(newValue) => setCalmo(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Calmo</Text>
</View>

you could do something like this,
like each item is wrapped in a fragment tag.
<View style = {{flexDirection: 'row', padding:5, justifyContent:"space-between"}}>
<>
<RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
<Text style={{marginRight: 20}}>Macho</Text>
</>
<>
<RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/
<Text>Femea</Text>
</>
</View>

How to solve margin problem between two components inside a Modal in React-Native?

In my react-native project inside modal, I am using two buttons in a View. But the problem is - no margin is working between them.
Here's the code
<View style={styles.container}>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.ModalVisibleStatus}
onRequestClose={() => { console.log("Modal has been closed.") }}
>
{/*All views of Modal*/}
{/*Animation can be slide, slide, none*/}
<View style={styles.modal}>
<Text style={styles.text}>Modal is open!</Text>
<View style={styles.inputContainerEmail}>
<Image style={styles.inputIcon} source={{ uri: this.state.catImage }} />
<TextInput style={styles.inputs}
placeholder="Email Address"
keyboardType="email-address"
underlineColorAndroid='transparent'
onChangeText={(text) => this.updateValue(text, 'email')} />
</View>
<View style={{ flexDirection: 'row' }}>
<Button style={{ marginRight: 10 }} title="Save" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
<Button style={{ marginLeft: 10 }} title="Close" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
</View>
</Modal>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#DCDCDC',
},
modal: {
flex: 1,
alignItems: 'center',
backgroundColor: '#aaaa',
padding: 100
},
text: {
color: '#3f2949',
marginTop: 10
}
)}
After running these code it's getting following output-
So how can I add margin between these two buttons?

The React-Native Button is very limited in what you can do, and doesn't support a style property as far as I know. I would suggest looking into using TouchableOpacity or TouchableNativeFeedback to customize your needs.
A potentially dirtier solution would be to wrap both Buttons inside a separate individual parent View component and applying your margin property to these parent View components instead. Alternatively, you could perhaps specify justifyContent:'space-between' on your parent View Component as is and seeing if that gives the desired result too. For example, the multiple view approach might look something like the following:
<View style={{flexDirection: 'row'}}>
<View style={{flex:1 , marginRight:10}} >
<Button title="Save" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
<View style={{flex:1}} >
<Button title="Close" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
</View>
Hopefully that helps!

Add justifyContent:"space-between" in your button view code as
<View style={{ flex:1, flexDirection: 'row' , justifyContent:"space-between"}}>
<Button style={{ flex:1}} title="Save" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
<Button style={{ flex:2 }} title="Close" onPress={() => {
this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
}} />
</View>
Link for reference https://css-tricks.com/almanac/properties/j/justify-content/

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

KeyboardAvoidingView not working with Expo

I cannot seem to get the keyboard to push the content up in my React-Native Expo app. I am testing this from the expo App by publishing it from my development machine.
Try as I might, nothing seems to push the view up when the keyboard comes into focus, is there a specific order of components, or some property I am missing; I have included the versions, the render block and the style blocks I think which are relevant.
I am using the following versions (latest);
"expo": "^29.0.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
For the login page, the render code looks like the following;
render() {
return (
<SafeAreaView style={styles.flexContainer}>
<KeyboardAvoidingView
style={styles.flexContainer}
behavior="padding"
>
<Image style={styles.image} source={require('../../assets/images/backgroundWelcome.png')} role="presentation" />
<View style={styles.container}>
<View style={[styles.row, styles.border]}>
<TextInput
placeholder='Email'
style={styles.input}
onChangeText={(input) => this.setState({email: input})}
value={this.state.email}
/>
</View>
<View style={[styles.row, styles.border]}>
<TextInput
placeholder='Password'
style={styles.input}
secureTextEntry={true}
onChangeText={(input) => this.setState({password: input})}
value={this.state.password}
/>
</View>
<View style={styles.row}>
<StyledButton callback={this.handleLogin} title='Log In'/>
</View>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
)
}
These are the styles that are relevant;
root: {
flex: 1,
alignItems: 'center',
backgroundColor: '#fff',
},
flexContainer: {
flex: 1,
},
container: {
paddingHorizontal: 40,
paddingBottom: 22,
alignItems: 'center',
flex: -1
},
row: {
flexDirection: 'row',
marginVertical: 10,
},

I ultimately could not find a full solution to the above directly, but I did find a npm module called.
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
I then nested this inside a ScrollView and included the View and Form inside it.
<ScrollView
<KeyboardAwareScrollView>
<View>
<!-- stuff -->
<View
<KeyboardAwareScrollView>
<ScrollView>
The module can be found here;
react-native-keyboard-aware-scroll-view
At the time of writing appears a very popular module with ~30k downloads a week. I have no affiliation to this module, but it works for me.

I had the same issue adding flex: 1 to KeyboardAvoidingView fixed my problem:
<KeyboardAvoidingView style={{ flex: 1 }} behavior={"padding"} >
<ScrollView >
<Card>
<CardItem header bordered>
<Text>Personal Information</Text>
</CardItem>
<CardItem bordered>
<Body>
<Item floatingLabel style={styles.item}>
<Label>Full Name</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Headline</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Location</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Email</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
</Body>
</CardItem>
</Card>
<ListItem>
<Left>
<Text>Make my Profile Public</Text>
</Left>
<Right>
<Switch value={this.state.publicProfileRadioValue}
onValueChange={(value) => this.setState({ publicProfileRadioValue: value })}
/>
</Right>
</ListItem>
</ScrollView>
</KeyboardAvoidingView>

Add minHeight property to the root view style.
<KeyboardAvoidingView
behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
style={styles.container}>
{//content }
</KeyboardAvoidingView>
minHeight: Math.round(Dimensions.get('window').height),
Do not forget to import Dimensions form react native
import { Dimensions } from 'react-native';

for anyone else who ran into this when testing on Android, make sure the element you want to be keyboard avoided also has flex: 1.
this will not work:
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<TextInput style={{ height: 300 }} />
</KeyboardAvoidingView>
this will:
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<TextInput style={{ flex: 1 }} />
</KeyboardAvoidingView>
without flex 1, the target element will not resize its height accordingly to avoid the keyboard

I could achieve the right behavior with this implementation:
Removed KeyboardAvoidingView component.
Added this to the app.json file:
"android": {
"softwareKeyboardLayoutMode": "pan"
}
Hope it works for you guys as well!