0

Error:

error message

I get this error when I try to use the installed radioButton Package both on snak.expo.io and the expo client on my android device. I have searched online for solution but to no avail.

App.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  AppRegistry,
  StatusBar,
} from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23
import UCI from './screens/UCI';


class App extends React.Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} />
        <View style={styles.boxContainer}>
          <View style={[styles.boxContainer, styles.boxOne]}>
            <Text style={styles.paragraph}>Adinkra</Text>
          </View>

          <View style={styles.boxContainerToggle}>
            <TouchableOpacity
              style={[styles.boxContainer, styles.boxThree]}
              onPress={() => this.props.navigation.navigate('UCI')}>
              <Text style={styles.paragraph}>BEGIN</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  boxContainer: {
    flex: 1, // 1:3
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },

  boxContainerToggle: {
    flex: 1,
    flexDirection: 'row',
    padding: 20,
  },
  boxOne: {
    flex: 6, // 5:6
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  boxThree: {
    flex: 1, // 1:6
    flexDirection: 'row',
    backgroundColor: 'skyblue',
    width: '50%',
    height: '100%',
  },

  paragraph: {
    margin: 24,
    fontSize: 27,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

const appScreens = StackNavigator({
  Index: { screen: App },
  UCI: { screen: UCI },
});

AppRegistry.registerComponent('Adinkra', () => appScreens);
export default appScreens;

UCI.js

import React, { Component } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
import { RadioGroup, RadioButton } from 'react-radio-buttons'; // 1.2.1

export default class UCI extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={{height: 40}}
          placeholder="Full Name"
          onChangeText={(text) => this.setState({text})}
        />
        
        <RadioGroup onChange={ this.onChange } horizontal>
          <RadioButton value="Male">Male</RadioButton>
          <RadioButton value="Female">Female</RadioButton>
        </RadioGroup>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});
3

1 Answer 1

2

react-radio-buttons uses divs internally, therefore you cannot use it for React Native.

Check out the Source: https://github.com/fedosejev/radio-buttons-react/blob/master/source/js/components/Application.jsx

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.