Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Radio Button dinâmico

Estou com um probleminha aqui em relação a radio buttons

Preciso pegar as perguntas de um json dinamicamente e pra cada pergunta criar as opções de resposta, o problema é que não estou setando corretamente, e sempre que clico numa opção, todas as outras respostas iguais são selecionadas.

A lib que estou usando é a "react-native-paper/radio-button

Se alguém puder dar uma luz, agradeço.

Segue em anexo o código

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import { RadioButton, Text } from 'react-native-paper';
import { ScrollView, TouchableHighlight } from 'react-native-gesture-handler';

import questions from './data';

const Leader = () => {

  const scrollRef = useRef();



  const [value, setValue] = React.useState(0);

  return (

    <ScrollView ref={scrollRef} showsVerticalScrollIndicator={false}>
      <View >
        { questions.map(data =>(
          <View key={data.key} style={{margin:10}}> 
            <Text style={{fontWeight:'bold'}}> 
              {data.quest}
            </Text>
            <RadioButton.Group  onValueChange={newValue => setValue(newValue)} value={value} >
          <View style={styles.radioBtn}>
            <Text>Sempre</Text>
            <RadioButton value={1} />
          </View>
          <View style={styles.radioBtn}>
            <Text>Na maioria das vezes</Text>
            <RadioButton value={2} />
          </View>
          <View style={styles.radioBtn}>
            <Text>Medianamente</Text>
            <RadioButton value={3} />
          </View>
          <View style={styles.radioBtn}>
            <Text>Poucas Vezes</Text>
            <RadioButton value={4} />
          </View>
          <View style={styles.radioBtn}>
            <Text>Nunca</Text>
            <RadioButton  value={5} />
          </View>

        </RadioButton.Group>
           </View>
        )) }


      </View>
    </ScrollView>



  );
};

export default Leader;

const styles = StyleSheet.create({
  radioBtn:{
    flexDirection: 'row', padding:5, justifyContent:"space-between"


  }
})
2 respostas

Fala ai Kleber, de boa?

Cara vi que sua dúvida tá aberta faz um tempo, queria saber contigo se já conseguiu resolver ?

As vezes quando o problema são em libs mais especificas a galera acaba não sabendo o que falar por nunca ter mexido com ela.

solução!

Consegui resolver graças a esse tópico no stack overflow

https://stackoverflow.com/questions/63366794/how-to-create-a-radio-button-section-with-a-data-table-in-react-native