Native-Base not loading elements

Question

I am using native-base version 2.0.2, react-native version 0.40.0.

I am following a tutorial to make a GithHub Repo Search using native-base & integrate it with my functionalities to make something different, but all of the components are not properly loaded. The Header & Footer example from the docs worked fine, but when I add things like searchbar rounded property or the icon classes, it does not get reflected.

When I add the button component I get the following error.

The Code in question is

var constants = require("../constants")

var React = require('react');
var ReactNative = require('react-native');
var t = require('tcomb-form-native');

var authenticate = require("../services/authenticate")

import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body,Picker,InputGroup,Icon,Input,Item } from 'native-base';

var {
  AppRegistry,
  AsyncStorage,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Alert,
  ListView,
  Image,
} = ReactNative;

var Form = t.form.Form;
var getFeatured = require("../services/get_featured");
var getCategory = require("../services/get_categories");
var search = require("../services/search");

var Query;


const options = {
  fields: {
      category: {
          order: 'asc',
          nullOption: {value: '', text: 'Anything'}
        }
  }
}

class SplashPage extends React.Component{

  constructor() {
    super();
    this.set_initial_state()
    //this.set_categories();
    //this.get_featured();
  }

  set_initial_state(){
      this.state ={
          hasResult: false,
          hasCategory:false,
          noResult: false,
          isLoading: true,
          isLoadingCat:true,
          searchResult:false,
          categories : [],
          searchText:"",
          searchCat:"",
          filterCat:"",
          articles:[],
      }
  }

  set_categories() {
    var par = this;
    getCategory().then(function(catData){
      par.setState({
        isLoadingCat:false,
        hasCategory:true,
        categories:catData,
      });

      console.error("till here");

    });

  }

  get_categories(){
    const cats = this.state.categories;
    const CatItems = cats.map((cat,i)=>{
      return (
        <Picker.item key={i} label={cat} value={cat} />
      );
    });
    return CatItems;

  }

  openRecipe(data){
    this.props.navigator.push({
      id: 'RecipePage',
      name: 'Recipe',      
      recipe_id:data.id,
    });
  }

  get_featured(){
    var par = this;
    getFeatured().then(function(articles){
        par.setState(
            {
                articles:articles,
                hasResult: true,
                isLoading:false,
                searchResult:false,
            }
        )
    }).catch(function(error) {
        console.error(error);
    });

  }

  perform_search(){
    var value = this.state.searchText;
    var par = this;
    if(value){
      par.setState(
            {
                hasResult: false,
                isLoading:true,
            }
        )

      var category = value.category;
      var ingredient = value.ingredient.toString().split(',').join(' ');
      search(ingredient,category).then((articles) => {
        par.setState(
            {
                articles:articles,
                hasResult: true,
                isLoading:false,
                searchResult:true
            }
        )
      }).catch(function(error) {
        console.error(error);
      });

      }
  }

  render() {

    return (

      <Header searchBar rounded>                            
    <InputGroup>                        
        <Icon name="ios-search" />                        
        <Input placeholder="Search" value={this.state.searchText}  onChangeText={(text) => this.setState({searchText:text})} onSubmitEditing={()=>this.search()}/>
        <Picker
                        iosHeader="Select one"
                        mode="dropdown"
                        selectedValue={this.state.searchCat}
                        onValueChange={(cat) => this.setState({searchCat:cat})}>

                        <Item label="Cats" value="key0" />
                        <Item label="Cats2" value="key02" />

        </Picker>
    </InputGroup>                    
    <Button transparent onPress={()=>this.search()}>Go</Button>                
</Header>


    );
  }
}

module.exports =  SplashPage;

I checked the dependencies and everything is installed.

Answer 1

there's something wrong i think in your Button on onPress. your code is onPress={()=>this.search()} but i don't see search() method, i just find perform_search() method

if your problem came after you add <Button> tag, you can change this one :

<Button transparent onPress={()=>this.search()}>Go</Button>   

to this one :

<Button transparent onPress={()=>this.perform_search()}><Text>Go</Text></Button> 

and also this one : onSubmitEditing={()=>this.search()}

to this one : onSubmitEditing={()=>this.perform_search()}

and don't forget to import Text in native-base, hope can solve your problem :)

Answer 2

I think you should wrap your code in

<Container>
  <Content>
        // your code
      <Button>
         <Text>Click Me! </Text>
        </Button>
   </Content>
</Container>