Error: Text strings must be rendered within a <Text> component, occurs in android but works fine on web - react-native

Question

My code is working fine on web browser. But when I run it on the cell phone, it shows the error as shown in image. The error is pointed towards the div tags. Got stuck on the error for couple of hours. Also wrapped the div tags with and but none working for me. Any help would be highly appreciated. Here is the code:
import React, { Component } from 'react';
import paginate from 'paginate-array';
import { View,Text,TouchableOpacity,StyleSheet,FlatList,Platform,ActivityIndicator} from 'react-native';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
size: 5,
page: 1,
currPage: null
}
this.previousPage = this.previousPage.bind(this);
this.nextPage = this.nextPage.bind(this);
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
fetch(`https://jsonplaceholder.typicode.com/todos`)
.then(response => response.json())
.then(todos => {
const { page, size } = this.state;
const currPage = paginate(todos, page, size);
this.setState({
...this.state,
todos,
currPage
});
});
}
previousPage() {
const { currPage, page, size, todos } = this.state;
if (page > 1) {
const newPage = page - 1;
const newCurrPage = paginate(todos, newPage, size);
this.setState({
...this.state,
page: newPage,
currPage: newCurrPage
});
}
}
nextPage() {
const { currPage, page, size, todos } = this.state;
if (page < currPage.totalPages) {
const newPage = page + 1;
const newCurrPage = paginate(todos, newPage, size);
this.setState({ ...this.state, page: newPage, currPage: newCurrPage });
}
}
handleChange(e) {
const { value } = e.target;
const { todos, page } = this.state;
const newSize = +value;
const newPage = 1;
const newCurrPage = paginate(todos, newPage, newSize);
this.setState({
...this.state,
size: newSize,
page: newPage,
currPage: newCurrPage
});
}
render() {
const { page, size, currPage } = this.state;
return (
<div>
<div>page: {page}</div>
<div>size: {size}</div>
<div>
<label for="size">Size</label>
<select name="size" id="size" onChange={this.handleChange}>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
</select>
</div>
{currPage &&
<ul>
{currPage.data.map(todo => <li key={todo.id}>{todo.title}</li>)}
</ul>
}
<button onClick={this.previousPage}>Previous Page</button>
<button onClick={this.nextPage}>Next Page</button>
</div>
)
}
}
export default TodoList;

Answer 1

What I came to know is you want an infinite list, and also you are going towards wrong direction. You are using react instead of react-native. Try using this:
import React, {Component} from 'react';
import {View, Text, FlatList, Image} from 'react-native';
import {Card} from 'react-native-elements';
import axios from 'axios';
class Users extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
page: 1,
error: null,
};
}
componentDidMount() {
this.fetchUsers(this.state.page);
}
fetchMoreUsers = () => {
this.setState(
prevState => ({
page: prevState.page + 100,
}),
() => {
this.fetchUsers();
},
);
};
fetchUsers = () => {
const {page} = this.state;
axios
.get(`https://api.github.com/users?since=${page}&per_page=10`)
.then(response => {
this.setState({
users: this.state.users.concat(response.data),
});
})
.catch(error => {
this.setState({error: error});
});
};
render() {
return (
<FlatList
contentContainerStyle={{
backgroundColor: '#FBFBF8',
alignItems: 'center',
justifyContent: 'center',
marginTop: 15,
}}
data={this.state.users}
keyExtractor={user => user.id.toString()}
onEndReached={this.fetchMoreUsers}
onEndReachedThreshold={0.5}
initialNumToRender={10}
renderItem={({item}) => (
<View
style={{
marginTop: 10,
}}>
<Card>
<Image
style={{width: 200, height: 100}}
source={{uri: item.avatar_url}}
/>
<Text>{item.login}</Text>
</Card>
</View>
)}
/>
);
}
}
export default Users;