React-native How to use radioButton in Listview

Question

I am new to react-native and i want use radioButton in listview(for both ios and android). I have used 'react-native-flexi-radio-button' library to add radioButton. I want to select only one radiobutton at a time from listview. If any one did such example please let me know. Thanks in advance.

Answer 1

Check this example, this will help you.

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'

export default class FlatListBasics extends Component {

  _renderItem = ({item}) => (
    <View style={styles.listItem}>
    <RadioGroup>
        <RadioButton value={'item1'} >
          <Text>{item.key1}</Text>
        </RadioButton>

        <RadioButton value={'item2'}>
          <Text>{item.key2}</Text>
        </RadioButton>

        <RadioButton value={'item3'}>
          <Text>{item.key3}</Text>
        </RadioButton>
      </RadioGroup>
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key1: 'Devin', key2: 'Jackson', key3:'James'},
            {key1: 'Joel', key2: 'Jimmy', key3:'Jillian'},
            {key1: 'Jillian', key2: 'Jackson', key3:'James'},
            {key1: 'Devin', key2: 'Joel', key3:'Jimmy'},
            {key1: 'Julie', key2: 'Jackson', key3:'James'},
          ]}
          renderItem={ this._renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  listItem: {
    marginTop:10,
    backgroundColor:'gray'
  }
})

AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);