I am trying to include a VirtualListView in my ReactXP app. The web version is working as expected but when running the same app on android the list is not shown.
I created a minimal example using this basic steps:
Created the app using the create-rx-app command
Created a VirtualListView component by mainly using the example code provided here: https://microsoft.github.io/reactxp/docs/extensions/virtuallistview.html
Added the VirtualListView component to my Apps View
Started the App using npm run start:web and npm run start:android
Why is the list not showing up on android?
Here is how the result looks like on android and web:
App.tsx
import React from 'react';
import RX from 'reactxp';
import FruitListView from './FruitListView';
const _styles = {
main: RX.Styles.createViewStyle({
justifyContent: 'center',
alignItems: 'center',
flex: 1,
}),
title: RX.Styles.createTextStyle({
fontWeight: 'bold',
fontSize: 36,
textAlign: 'center',
}),
label: RX.Styles.createTextStyle({
marginTop: 10,
textAlign: 'center',
fontSize: 16,
}),
name: RX.Styles.createTextStyle({
fontWeight: 'bold',
fontSize: 36,
color: '#42B74F',
}),
links: RX.Styles.createViewStyle({
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
}),
link: RX.Styles.createLinkStyle({
textDecorationLine: 'underline',
paddingRight: 5,
paddingLeft: 5,
color: '#0070E0',
}),
};
export class App extends RX.Component {
public render() {
return (
<RX.View style={ _styles.main }>
<FruitListView/>
<RX.View>
<RX.Text style={ _styles.title }>Welcome to <RX.Text style={ _styles.name }>ReactXP</RX.Text></RX.Text>
<RX.Text style={ _styles.label }>To get started, edit /src/App.tsx</RX.Text>
</RX.View>
<RX.View style={ _styles.links }>
<RX.Link url={ 'https://github.com/Microsoft/reactxp' } style={ _styles.link }>GitHub</RX.Link>
<RX.Link url={ 'https://microsoft.github.io/reactxp' } style={ _styles.link }>Docs</RX.Link>
<RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/samples' } style={ _styles.link }>Samples</RX.Link>
<RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/extensions' } style={ _styles.link }>Extensions</RX.Link>
</RX.View>
</RX.View>
);
}
}
FruitListView.tsx
import * as React from 'react';
import * as RX from 'reactxp';
import { VirtualListView, VirtualListViewItemInfo }
from 'reactxp-virtuallistview';
// Extend VirtualListViewItemInfo to include display text
interface FruitListItemInfo extends VirtualListViewItemInfo {
text: string;
}
interface FruitListState {
items: FruitListItemInfo[];
}
const _headerItemHeight = 20;
const _fruitItemHeight = 32;
const _headerItemTemplate = 'header';
const _fruitItemTemplate = 'fruit';
export class FruitListView extends RX.Component<{}, FruitListState> {
constructor() {
super();
this.state = {
items: [{
key: 'header1',
height: _headerItemHeight,
text: 'Domstic Fruits',
template: _headerItemTemplate
}, {
key: 'bannana',
height: _fruitItemHeight,
text: 'Banana',
template: _fruitItemTemplate
}, {
key: 'apple',
height: _fruitItemHeight,
text: 'Apple',
template: _fruitItemTemplate
}]
};
}
public render() {
return (
<VirtualListView
itemList={ this.state.items }
renderItem={ this._renderItem }
animateChanges={ true }
skipRenderIfItemUnchanged={ true }
/>
);
}
private _renderItem(item: FruitListItemInfo, hasFocus?: boolean) {
const viewStyle = RX.Styles.createViewStyle({
height: item.height,
backgroundColor: item.template === _headerItemTemplate ?
'#ddd' : '#fff',
alignItems: 'center'
}, false);
return (
<RX.View style={ viewStyle }>
<RX.Text>
{ item.text }
</RX.Text>
</RX.View>
);
}
}
export default FruitListView;
Related
store.js
// Imports: Dependencies
import { createStore } from 'redux';
import employeeDetailReducer from './employeeDetailReducer';
// Middleware: Redux Persist Config
const store = createStore(employeeDetailReducer);
employeeDetailReducer.js
const initialState = {
employeeDetails: {
name: "",
schoolName: "",
companyName: ""
}
};
const employeeDetailReducer = (state = initialState, action) => {
switch (action.type) {
case "SAVE_EMPLOYEE_DETAIL": {
return {
...state,
employeeDetails: action.employeeDetails
}
}
default: {
return state;
}
}
}
export default employeeDetailReducer;
EmployeeDetails.js
import React from "react";
import { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableHighlight } from "react-native";
import { connect } from "react-redux"
import { saveEmployeeDetails } from "./saveEmployeeDetailAction"
class EmployeeDetails extends React.Component {
constructor(props) {
super(props)
this.state = {
name: "",
schoolName: "",
companyName: ""
}
}
render() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.mainView}>
<Text style={styles.mainTextStyle}>Submit Employee Details</Text>
<Text style={styles.textStyle}>Enter Your Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your Name"
onChangeText={name => {
this.setState({ name: name }, () => {
});
}}
/>
<Text style={styles.textStyle}>Enter Your School Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your School Name"
onChangeText={schoolName => {
this.setState({ schoolName: schoolName }, () => {
});
}}
/>
<Text style={styles.textStyle}>Enter Your Company Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your Company Name"
onChangeText={companyName => {
this.setState({ companyName: companyName }, () => {
});
}}
/>
<TouchableHighlight
underlayColor="transparent"
style={styles.buttonStyle}
onPress={() => {
var employeeDetails = {};
employeeDetails.name = this.state.name;
employeeDetails.schoolName = this.state.schoolName;
employeeDetails.companyName = this.state.companyName;
this.props.reduxSaveEmployeeDetail(employeeDetails)
this.props.navigation.navigate("ShowEmployeeDetail")
}}
>
<Text style={styles.buttonTextStyle}>Submit</Text>
</TouchableHighlight>
</View>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: "100%",
height: "100%",
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: "lightgray",
paddingBottom: 50
},
mainView: {
width: "100%",
height: "50%",
justifyContent: "flex-start",
alignItems: "center",
padding: 20,
},
textInputStyle: {
width: "100%",
height: 40,
backgroundColor: "white",
paddingHorizontal: 15,
marginBottom: 10,
marginTop: 10
},
textStyle: {
width: "100%",
height: 20,
textAlign: "left",
marginTop: 10,
fontSize: 15
},
mainTextStyle: {
width: "100%",
height: 40,
//paddingHorizontal:15,
textAlign: "center",
marginTop: 10,
marginBottom: 10,
fontSize: 20
},
buttonStyle: {
width: "100%",
height: 40,
borderRadius: 5,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginTop: 20
},
buttonTextStyle: {
width: "100%",
height: "100%",
textAlign: "center",
marginTop: 10,
fontSize: 18
},
})
const mapDispatchToProps = (dispatch) => {
return {
reduxSaveEmployeeDetail: (employeDetails) => dispatch(saveEmployeeDetails(employeDetails))
}
}
export default connect(
null,
mapDispatchToProps
)(EmployeeDetails);
App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store'
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import EmployeeDetali from './EmployeeDetali';
import ShowEmployeeDetail from './ShowEmployeeDetail';
export default App = () => {
return (
<Provider store={store}>
<AppNavigator />
</Provider>
);
};
const Stack = createNativeStackNavigator();
const AppNavigator = () => {
return (
<NavigationContainer initialState="EmployeeDetali">
<Stack.Screen name="EmployeeDetali" component={EmployeeDetali} />
<Stack.Screen name="ShowEmployeeDetail" component={ShowEmployeeDetail} />
</NavigationContainer>
)
}
Error
ERROR TypeError: store.getState is not a function. (In 'store.getState()', 'store.getState' is undefined)
This error is located at:
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in ReactNativeApp(RootComponent)
I don't know what is wrong here...
I'm also add store like this
import {store} from './store'
It also give me error so how can soul my error where is my error
I don't have any idea for adding redux in class component so how I can do this
I'm learning from here
I also learn redux
so anyone give me suggestion what happing in my code
Do,
export { store };
in store.js.
and,
import {store } from "./store";
in app.js
I am a noob at React Native and I am confused on how to program a floating button to open the react-native navigation drawer.
As of right now I am calling the button in MapScreen.js. The button is called FloatingButton.js.
I have running into the error of "ReferenceError: Can't Find variable: navigation" when I press the button.
A bit of preface, I have been using burger menus on headers to open the drawer menu.
App.js
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import useCachedResources from './hooks/useCachedResources';
//import BottomTabNavigator from './navigation/BottomTabNavigator';
//import LinkingConfiguration from './navigation/LinkingConfiguration';
import HomeScreen from './screens/HomeScreen';
import MapScreen from './screens/MapScreen';
import LinksScreen from './screens/LinksScreen';
//import FloatingButton from './components/FloatingButton';
const HomeStack = createStackNavigator();
const LinksStack = createStackNavigator();
const Drawer = createDrawerNavigator();
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#2a2a2a'
},
headerTintColor: '#fff'
}}>
<HomeStack.Screen name="Drive" component={HomeScreen} options={{
headerLeft: () => (
<Icon.Button name="ios-menu" size={25}
backgroundColor = "#2a2a2a" onPress={()=> navigation.openDrawer()}></Icon.Button>
)
}} />
</HomeStack.Navigator>
);
const LinkStackScreen = ({navigation}) => (
<LinksStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#2a2a2a'
},
headerTintColor: '#fff'
}}>
<LinksStack.Screen name="Links" component={LinksScreen} options={{
headerLeft: () => (
<Icon.Button name="ios-menu" size={25}
backgroundColor = "#2a2a2a" onPress={()=> navigation.openDrawer()}></Icon.Button>
)
}} />
</LinksStack.Navigator>
);
export default function App(props) {
const isLoadingComplete = useCachedResources();
if (!isLoadingComplete) {
return null;
} else {
return (
<View style={styles.container}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeStackScreen} />
<Drawer.Screen name="Drive" component={MapScreen} />
<Drawer.Screen name="Links" component={LinkStackScreen} />
</Drawer.Navigator>
</NavigationContainer>
<StatusBar style="auto" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#242C40',
}
});
MapScreen.js
import React, {useState} from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Maps from '../components/GoogleMaps';
import FloatingButton from '../components/FloatingButton';
export default class MapScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Maps
style={ styles.map }
/>
<FloatingButton style= {{bottom: 645, right: 380}} /> {/* broken button */}
</View>
);
}
}
function DevelopmentModeNotice() {
if (__DEV__) {
const learnMoreButton = (
<Text onPress={handleLearnMorePress} style={styles.helpLinkText}>
Learn more
</Text>
);
return (
<Text style={styles.developmentModeText}>
Development mode is enabled {learnMoreButton}
</Text>
);
} else {
return (
<Text style={styles.developmentModeText}>
You are not in development mode:
</Text>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#4B4B4B',
},
developmentModeText: {
marginBottom: 20,
color: '#BCBCBC',
fontSize: 14,
lineHeight: 19,
textAlign: 'center',
},
contentContainer: {
paddingTop: 30,
},
welcomeContainer: {
alignItems: 'center',
marginTop: 10,
marginBottom: 20,
},
welcomeImage: {
width: 100,
height: 80,
resizeMode: 'contain',
marginTop: 3,
marginLeft: -10,
},
getStartedContainer: {
alignItems: 'center',
marginHorizontal: 50,
},
homeScreenFilename: {
marginVertical: 7,
},
codeHighlightText: {
color: 'rgba(96,100,109, 0.8)',
},
codeHighlightContainer: {
backgroundColor: 'rgba(0,0,0,0.5)',
borderRadius: 3,
paddingHorizontal: 4,
},
getStartedText: {
fontSize: 17,
color: '#E2E2E2',
lineHeight: 24,
textAlign: 'center',
},
tabBarInfoContainer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
...Platform.select({
ios: {
shadowColor: 'black',
shadowOffset: { width: 0, height: -3 },
shadowOpacity: 0.1,
shadowRadius: 3,
},
android: {
elevation: 20,
},
}),
alignItems: 'center',
backgroundColor: '#5F5F5F',
paddingVertical: 20,
},
tabBarInfoText: {
fontSize: 17,
color: '#E2E2E2',
textAlign: 'center',
},
navigationFilename: {
marginTop: 5,
},
helpContainer: {
marginTop: 15,
alignItems: 'center',
},
helpLink: {
paddingVertical: 15,
},
helpLinkText: {
fontSize: 14,
color: '#2e78b7',
},
map: {
height: '100%',
width: '100%',
}
});
FloatingButton.js I think this is where the problem lies, I think I am calling navigation wrong or
onPress={()=> navigation.openDrawer()} wrong.
import * as React from 'react';
import { StyleSheet, View, Text, Animated, TouchableWithoutFeedback } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
const Drawer = createDrawerNavigator();
export default class FloatingButton extends React.Component ({navigation}) {
render() {
return (
<View style={[styles.container, this.props.style]}>
<TouchableWithoutFeedback onPress={()=> navigation.openDrawer()}>
<Animated.View style={[styles.button, styles.menu]}>
<Icon name="ios-menu" size={25} color = "#fff" />
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
position: "absolute"
},
button: {
position:"absolute",
width: 45,
height: 45,
borderRadius: 60/2,
alignItems: "center",
justifyContent: "center",
shadowRadius: 10,
shadowColor: "#2a2a2a",
shadowOpacity: 0.3,
shadowOffset: {height: 10}
},
menu:{
backgroundColor:"#2a2a2a",
}
});
Here's what the MapScreen looks like
The error I get when I press the button
Drawer menu
Home screen
First option
In the map you can pass the navigation reference in a props like:
<FloatingButton
style= {{bottom: 645, right: 380}}
navigation={this.props.navigation}/>
then in your button component you can get the reference via the props and do:
this.props.navigation.openDrawer()
Second option
you can pass a callback to you component like:
<FloatingButton
style= {{bottom: 645, right: 380}}
isPressed={() => this.props.navigation.openDrawer()}/>
and call you callback like this in the button component
<TouchableWithoutFeedback onPress={()=> this.props.isPressed()}>
if your button is not in navigation stack, so you have not navigation as props then useNavigation is a good solution for you :
import { useNavigation } from '#react-navigation/native';
in your component:
const navigation = useNavigation();
then :
<TouchableOpacity onPress={() => navigation.openDrawer()}>
// your icon
</TouchableOpacity>
I'm trying to display some fetched data in app using FlatList . It works but there is a bloody big space between items!
Here is my FlatList code:
<View style={styles.showresp}>
<FlatList
data={this.state.responsjson}
renderItem={({ item }) =>
<View style={styles.weatherview}>
<Text style={styles.city}>{item.name}</Text>
<Text style={styles.country}>{item.country}</Text>
<Text style={styles.temp}>{item.temp_c}</Text>
</View>}/>
</View>
this is what i see in screen
and it is styles :
showresp: {
backgroundColor: '#fffa',
height: 315,
marginRight: '10%',
marginLeft: '10%',
marginTop: '15%',
borderRadius: 15
},
weatherview:{
alignItems: 'center',
justifyContent: 'center',
flex :1
},
city: {
fontFamily :'Wonderbar Demo',
fontSize:40,
color:'#880e4f',
},
country:{
fontSize:20,
fontFamily:'Samim-Bold',
backgroundColor:'red',
},
temp:{
fontFamily :'Wonderbar Demo',
fontSize : 40,
backgroundColor:'green',
},
I set the background color for up and down Texts to find the problem but i don't have any bloody idea about it.
could you guide me on this matter?ಠ_ಠ
I made an example for you. Look at this. The difference between you and me is no margin.
And I have my parents as a flatist.
You don't have to put View aside like this. You can put the view in the item you want.
import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
const users = [
{
name: 'Cathy Gilliam',
company: 'EXOVENT',
email: 'cathygilliam#exovent.com',
},
{
name: 'Norton Potts',
company: 'COREPAN',
email: 'nortonpotts#corepan.com',
},
{
name: 'Kelly Collins',
company: 'SECURIA',
email: 'kellycollins#securia.com',
},
];
export default class App extends Component {
render() {
return (
<FlatList
data={users}
renderItem={({ item }) => (
<View
style={{
borderBottomWidth: 1,
borderBottomColor: 'grey',
padding: 10
}}>
<View>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>{item.name}</Text>
<Text>{item.company}</Text>
<Text>{item.email}</Text>
</View>
</View>
)}
/>
);
}
}
It should work:
import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
responsjson: [{
name: 'Name1',
country: 'Country1',
temp_c: '45'
},
{
name: 'Name2',
country: 'Country2',
temp_c: '45'
}]
};
}
render() {
return (
<View style={styles.showresp}>
<FlatList
data={this.state.responsjson}
renderItem={({ item }) =>
<View style={styles.weatherview}>
<Text style={styles.city}>{item.name}</Text>
<Text style={styles.country}>{item.country}</Text>
<Text style={styles.temp}>{item.temp_c}</Text>
</View>} />
</View>
);
}
}
const styles = StyleSheet.create({
showresp: {
backgroundColor: '#fffa',
height: 315,
marginRight: '10%',
marginLeft: '10%',
marginTop: '15%',
borderRadius: 15
},
weatherview: {
alignItems: 'center',
justifyContent: 'center',
flex: 1
},
city: {
fontFamily: 'Wonderbar Demo',
fontSize: 40,
color: '#880e4f',
},
country: {
fontSize: 20,
fontFamily: 'Samim-Bold',
backgroundColor: 'red',
},
temp: {
fontFamily: 'Wonderbar Demo',
fontSize: 40,
backgroundColor: 'green',
},
});
Image:
I have a error when I using react-native-textinput-effects .
This is my error message:
fontFamily 'Arial' is not a system font and has not been loaded
through Expo.Font.loadAsync.
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
in diffProperties
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Expo.Font.loadAsync.
node_modules\expo\src\Font.js:34:10 in processFontFamily
node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
in diffProperties
... 30 more stack frames from framework internals
This is my code:
import React, { Component } from 'react'
import { StyleSheet, View, Text, TextInput, Image, TouchableOpacity } from 'react-native'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Font } from "expo";
import { Fumi} from 'react-native-textinput-effects';
class Login extends React.Component {
render() {
return (
<View style={styles.main_container}>
<View style={styles.subview_container}>
<View style={[styles.card2, { backgroundColor: '#a9ceca' }]}>
<Text style={styles.title}>Fumi</Text>
<Fumi
label={'Course Name'}
labelStyle={{ color: '#a3a3a3' }}
inputStyle={{ color: '#f95a25' }}
iconClass={FontAwesomeIcon}
iconName={'university'}
iconColor={'#f95a25'}
iconSize={15}
/>
<Fumi
style={styles.input}
label={'Degree'}
iconClass={FontAwesomeIcon}
iconName={'graduation-cap'}
iconColor={'#77116a'}
/>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#555500',
},
subview_container: {
},
card2: {
padding: 16,
},
input: {
marginTop: 4,
},
title: {
paddingBottom: 16,
textAlign: 'center',
color: '#404d5b',
fontSize: 20,
fontWeight: 'bold',
opacity: 0.8,
}
})
export default Login
I tried to load the Arial font using this code but without success :
componentDidMount() {
Font.loadAsync({
'Arial': require('./assets/fonts/Arial.ttf'),
});
}
Can you help me?
check this, it is work correctly code for app.js, just adapt for your case
import React from "react";
import { AppLoading, Font } from "expo";
import { StyleSheet, Text, View } from "react-native";
export default class App extends React.Component {
state = {
loaded: false,
};
componentWillMount() {
this._loadAssetsAsync();
}
_loadAssetsAsync = async () => {
await Font.loadAsync({
diplomata: require("./assets/fonts/DiplomataSC-Regular.ttf"),
});
this.setState({ loaded: true });
};
render() {
if (!this.state.loaded) {
return <AppLoading />;
}
return (
<View style={styles.container}>
<Text style={styles.info}>
Look, you can load this font! Now the question is, should you use it?
Probably not. But you can load any font.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
padding: 30,
},
info: {
fontFamily: "diplomata",
textAlign: "center",
fontSize: 14,
},
});
I am making a simple ListView by fetching books details from an API. The app runs well but I get a warning and some ReferenceError. You can have a look at the error here. I have also provided the code below.
Code for index.android.js:
import React, {Component} from 'react';
import {StyleSheet,Image,View,ListView,AppRegistry} from 'react-native';
import BookItem from './BookItem.js';
class dhrumil extends Component{
constructor(){
super();
var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2});
this.state={
dataSource: ds.cloneWithRows([])
}
}
componentDidMount(){
fetch('http://api.nytimes.com/svc/books/v3/lists/hardcover-fiction?response-format=json&api-key=73b19491b83909c7e07016f4bb4644f9:2:60667290')
.then((response) => response.json())
.then((rjson) => {
this.setState({
dataSource: ds.cloneWithRows(rjson.results.books)
});
})
.catch((error)=>{
console.warn(error);
});
}
render(){
return(
<ListView style={styles.container}
dataSource= {this.state.dataSource}
renderRow={(rowData)=> {
return <BookItem style={styles.row}
coverURL={rowData.book_image}
title={rowData.title}
author={rowData.author}
/>;
}
}
/>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
paddingTop: 24
},
row: {
flex: 1,
height: 44,
fontSize: 24,
padding: 42,
borderWidth: 1,
borderColor: '#DDDDDD'
}
});
AppRegistry.registerComponent('dhrumil',()=> dhrumil);
Code for BookItem.js:
import React,{Component} from 'react';
import {StyleSheet,View,Text,Image,AppRegistry} from 'react-native';
class BookItem extends Component{
propTypes:{
coverURL: React.PropTypes.string.isRequired,
author: React.PropTypes.string.isRequired,
title: React.PropTypes.string.isRequired
}
render(){
return(
<View style={styles.bookItem}>
<Image style={styles.cover} source={this.props.coverURL}/>
<View style={styles.info}>
<Text style={styles.author}>{this.props.author}</Text>
<Text style={styles.title}>{this.props.title}</Text>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
bookItem:{
flex: 1,
flexDirection: 'row',
backgroundColor: '#FFFFFF',
borderBottomColor: '#AAAAAA',
borderBottomWidth: 2,
},
cover:{
flex: 1,
height: 150,
resizeMode: 'contain'
},
info:{
flex: 3,
alignItems: 'flex-end',
flexDirection: 'column',
alignSelf: 'center',
padding: 20
},
author:{
fontSize: 18
},
title:{
fontSize: 18,
fontWeight: 'bold'
}
});
AppRegistry.registerComponent("BookItem",()=> BookItem);
What could possibly be wrong and how do I solve it?
Well the warning already say it all. Just add enableEmptySections to your listview component and the warning is gone.