React native elements ButtonGroup keeps crashing in expo android

Expo Development Tools
1

Hello, below code works fine in Expo iOS, but keeps crashing in Expo Android, any idea why?

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
import {Icon , ButtonGroup} from 'react-native-elements';

class PickerExample extends Component {
constructor () {
  super()
  this.state = {
    selectedIndex: 0,
    textToShow: 'none'
  }
  this.updateIndex = this.updateIndex.bind(this)
}
updateIndex (selectedIndex) {
  let textToShow = 'none';
  switch (selectedIndex){
    case 0:
    textToShow = 'Near Me'
    break;
    case 1:
    textToShow = 'Popular'
    break;
    case 2:
    textToShow = 'Favourites'
    break;    
  }
  this.setState({selectedIndex, textToShow})
  
}

render () {
const component1 = () => <View style={{flexDirection: 'row', alignItems: 'center'}}> <Icon type='evilicon' name='location' /><Text> Near Me</Text></View>
const component2 = () => <View style={{flexDirection: 'row', alignItems: 'center'}}> <Icon type='simple-line-icon' name='fire' /><Text> Popular</Text></View>
const component3 = () => <View style={{flexDirection: 'row', alignItems: 'center'}}> <Icon name='favorite-border' /><Text>Favourites</Text></View>
  const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
  const { selectedIndex } = this.state
  return (
    <View style={{paddingTop:40, flex:1, alignItems:'center'}}>
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={selectedIndex}
      buttons={buttons}
      containerStyle={{height: 40}} />
  <Text style={{alignItems:'center', fontSize:40}}>{this.state.selectedIndex} {this.state.textToShow}</Text>
      </View>
  )
}
}
export default PickerExample
2

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.