How to implement Radio button with Reactive-Forms in React Native

[Dhirajbhujbal]

Actually, I want to implement the Radio button in React Native.

I tried to display Radio buttons on the UI and rendred under Field Control. but when I am selecting another radio button Form Control render is not re-rendred.

[bietkul]

Can you please share the code snippet?

[Dhirajbhujbal]

yes

`/*

• Filename: survey-view.component.tsx
• Description: This is Survey view */

import * as React from 'react'; import { StyleSheet, Text, View, Button, TextInput, Alert } from 'react-native'; import { FormBuilder, FieldGroup, FieldControl, Validators, AbstractControl, } from "react-reactive-form"; import { RadioButton } from 'react-native-paper';

/**

• @export
• @class XyzSurveyView

• @extends React.Component */ export class XyzSurveyView extends React.Component<{},{value : string}>{

  public loginFrom = FormBuilder.group({ userName: ['', Validators.required], password: ['', Validators.required], gender: [''] });

  constructor(public props: Readonly<{}>) { super(props); this.state = { value: 'first', }; }

  public render() { return(

      <>
          <FieldGroup 
          control={this.loginFrom}
          render={
              ({ invalid }) => {
                  return(
                      <>
  
                          <FieldControl 
                              name={'userName'}
                              render={ ({handler}) => <TextInput placeholder={'Enter Username'} {...handler()}/>}
                              meta={{ label: 'Username'}}
                         />
  
                         <FieldControl 
                              name={'password'}
                              render={ ({handler}) => <TextInput placeholder={'Enter Passwored'} {...handler()}/>}
                              meta={{ label: 'Password'}}
                         />
  
                         <FieldControl
                              name='gender'
                              render={({handler}) => (
                                  <>
                                      {/* here want to right the code for radio button
                                          but in React Native there is no any Native tag For Radio button
                                          So I need to create some custom components
                                          and need to maintain state here
                                          I called setState on click of the radio button but form is not re-rendered.
                                      */}
  
                                      <RadioButton.Group
                                          onValueChange={value =>{
                                              handler();
                                              this.setState({ value });
                                          } }
                                          value={this.state.value}
                                      >
                                          <View>
                                          <Text>First</Text>
                                          <RadioButton value='first' />
                                          </View>
                                          <View>
                                          <Text>Second</Text>
                                          <RadioButton value='second' />
                                          </View>
                                      </RadioButton.Group>
  
                                  </>
                              )}
                          />
                      </>
                  );
              }
          }
  
      />
  
      </>
  
  );

  } }

const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', backgroundColor: 'rgba(0,0,0,0.8)', borderBottomRightRadius: 30, }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, } }); `

[bietkul]

You can use it like that.

<FieldControl
    name='gender'
    render={({handler}) => {
        const inputHandler = handler('switch');
        (
        <>
            {/* here want to right the code for radio button
                but in React Native there is no any Native tag For Radio button
                So I need to create some custom components
                and need to maintain state here
                I called setState on click of the radio button but form is not re-rendered.
            */}

            <RadioButton.Group
                onValueChange={inputHandler.onChange}
                {...inputHandler}
            >
                <View>
                    <Text>First</Text>
                    <RadioButton value='first' />
                </View>
                <View>
                    <Text>Second</Text>
                    <RadioButton value='second' />
                </View>
            </RadioButton.Group>

        </>
    )
    }}
/>

[Dhirajbhujbal]

okay, I will check this. Also, I found one solution in which my issue is resolved, Instead of the field control, I have used Field Component provided by react-reactive-form by referring this (check last content for DatePickerIOS).

Thanks 👍