Invariant Violation:View config not found for name div

Question

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',
  },
});

React visual components does not work with react-native since regular html tags and components doesn't exist in react-native. More info can be found [HERE](https://stackoverflow.com/questions/34641582/what-is-difference-between-react-native-vs-react) — bennygenel, Feb 24 '18 at 18:29
Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Feb 25 '18 at 19:50
First comment explains why you got the error. You basically just have to use a React Native radio button lib such as: https://www.npmjs.com/package/react-native-simple-radio-button — Shan, Aug 02 '18 at 20:44

score 2 · Answer 1 · edited Aug 15 '21 at 14:52

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

edited Aug 15 '21 at 14:52

Dave Yu

315
4
15

answered Jun 28 '18 at 11:27

andyrandy

72,880
8
113
130

Invariant Violation:View config not found for name div

1 Answers1