Develop Reference

Images getting cropped with FlatList

The images are getting croped how can i prevent that from happening? Notice that only appears half of the image. This is a Android device. Idont know if this happens in IOS too. But a fix for android would be great
My FlatList component
import React from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';
const shows_first = [
{
key: 1,
name: 'Suits',
image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/2432.jpg'
},
{
key: 2,
name: 'Modern Family',
image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/628.jpg'
},
]
const renderItem = (item) => {
return (
<Image style={{ width: 120, height: 100 }} source={{ uri: item.image }} />
)
}
const List = () => {
return (
<View style={{ flex: 1, marginTop: 110 }}>
<FlatList
horizontal={true}
ItemSeparatorComponent={() => <View style={{ width: 5 }}></View>}
renderItem={({ item }) => renderItem(item)}
data={shows_first}
></FlatList>
</View>
)
}
export default List;

You should use a resize mode to chose how you want to display your image.
If you are sure that all your images are going to be posters better give a height and width that suits the image.
Check the code below
const renderItem = (item) => {
return (
<Image style={{ width: 80, height: 120 ,resizeMode: 'center'}} source={{ uri: item.image }} />
)
}

You will need to style your image to fit as per aspect ration so to do that you will have to add resizeMode='contain'
Working example: https://snack.expo.io/#msbot01/cranky-scones
import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Image} 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';
const DATA = [
{
key: 1,
name: 'Suits',
image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/2432.jpg'
},
{
key: 2,
name: 'Modern Family',
image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/628.jpg'
}
];
export default function App() {
return (
<View style={styles.container}>
<FlatList
data={DATA}
horizontal={true}
renderItem={({ item }) =>
<View style={styles.item}>
<Image style={{ width: 120, height: 100 }} source={{ uri: item.image }} resizeMode='contain'/>
</View>
}
keyExtractor={item => item.id}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

ReactXP VirtualListView not shown on Android

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;

fontFamily 'Arial' is not a system font using react-native-textinput-effects

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,
},
});

Warning: Empty section headers will be rendered - React Native

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.

Rendering a list on initial page using react-native for Android

Hi everyone,
I am new to Android development using react-native and I got this error which I have no idea where this come from because I am not using ScrollView at all!
I am trying to render a list on the initial screen and its data is coming from an api call.
My code is
import React, { Component } from 'react';
import {
Image,
ListView,
TouchableHighlight,
Text,
View,
StyleSheet
} from 'react-native';
import Api from '../../Utils/api';
import CategoryRow from './CategoryRow';
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 12,
flexDirection: 'row',
alignItems: 'center',
},
text: {
marginLeft: 12,
fontSize: 16,
},
photo: {
height: 40,
width: 40,
borderRadius: 20,
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
}
});
class Main extends React.Component {
constructor(props){
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
}
}
componentDidMount(){
Api.getCategories()
.then((res) => {
this.setState({
dataSource: ds.cloneWithRows(res)
})
})
.catch();
}
render() {
return(
<ListView
style={styles.container}
dataSource = {this.state.dataSource}
renderRow={(data) => <CategoryRow {...data} />}
/>
)
}
}
module.exports = Main;
And the code for categoryRow is:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 12,
flexDirection: 'row',
alignItems: 'center',
},
text: {
marginLeft: 12,
fontSize: 16,
},
photo: {
height: 40,
width: 40,
borderRadius: 20,
},
});
const CategoryRow = (props) => (
<View style={styles.container}>
<Text style={styles.text}>
${props.name}
</Text>
</View>
);
export default CategoryRow;
Example of data :
[
{
"categoryId": 1,
"code": "15",
"name": "Photography",
"description": "Are you a photo junkie? Then join the “snap pack” and travel to some of the most photogenic places on earth. Our photography trips put you on an itinerary specially geared towards getting the perfect pic, with a group of like-minded travellers. Learn new tricks, share your knowledge, and never worry about taking the time to get the shot. Bonus: someone always has an extra lens cap.",
"categoryTypeId": 1,
"categoryType": {
"categoryTypeId": 1,
"name": "Activity"
}
}
]
Can someone please help me to find out where is the problem and how to resolve this error?

I think ListView uses the ScrollView props. See here http://facebook.github.io/react-native/releases/0.35/docs/listview.html#scrollview
From the error, it seems you should specify alignItems: 'center' in the contentContainerStyle prop of the ListView. Remove it from styles.container
<ListView contentContainerStyle={{alignItems: 'center'}}>
....
</ListView>

render() {
return(
<View style={{
alignItems: 'center'
}}>
<ListView
style={styles.container}
dataSource = {this.state.dataSource}
renderRow={(data) => <CategoryRow {...data} />}
/>)
</View>
}