Native-Base not loading elements - react-native

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

I think you should wrap your code in
<Container>
<Content>
// your code
<Button>
<Text>Click Me! </Text>
</Button>
</Content>
</Container>

Answer 2

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 :)