Develop Reference

React Native image takes up all vertical space available

I am new to react-native (started 2 days ago) but I picked it up quickly because I already knew regular react. I'm trying to write a real world app and I can't figure out how to place an image correctly, I want my Image tag to take up all horizontal space on the screen, but I also want it to stay at the very top of the screen and keep its aspect ratio (which I can't hardcode because I will also display other pictures of licence plates, including european ones that are not 2/1 like in north america), all while not having the actual image take up all available vertical space.
Here is a GIMP edit of what my code renders and what I actually want:
https://ibb.co/XJgrhkC
Here is my render function:
export default class App extends Component {
...
render() {
return (
<View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
<Image
source={require(`./resources/images/north_america/original/alaska.jpg`)}
style={{ flex: 1, width: screenWidth }}
resizeMode="contain" />
<Button title="Random state" onPress={this.getRandomState} />
</View>
);
}
}
I am familiar with css's layout options but react-native seems to be different and I can't wrap my head around all the combinations of widths, flex and resizeModes.

typically, upon applying flex to the <View /> tag enclosing the <Image /> and the <Button />, the children of the parent component will have the same flex prop applied. so, you can remove the flex prop under <Image />.
having dealt with <Image /> in react-native for some time, i must say that specifying values for both height and width is important for an <Image /> to be displayed properly.
you can try it out on my Expo example here.
render() {
return (
<View style={{
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center'
}}>
<Image
source={require(`./resources/images/north_america/original/alaska.jpg`)}
style={{
width: screenWidth,
height: 200,
}}
resizeMode="contain"
/>
<Button
title="Random state"
onPress={this.getRandomState}
/>
</View>
);
}
also, since you are new to react-native, may i suggest you change <Button /> to <TouchableOpacity />? it provides a visual aid when user presses it on a mobile device.

When you use flex, you can see the image automatically occupying a lot of space when you add {borderWidth: 2, borderColor: 'red'}. Instead, you have to specify the height manually. If you want it to be scaled properly, you can try this:
import React from "react";
import { View, Image, Button, Dimensions } from "react-native";
class App extends React.Component {
state = {
imgWidth: 0,
imgHeight: 0
};
componentDidMount() {
Image.getSize("https://i.ibb.co/HgsfWpH/sc128.jpg", (width, height) => {
// Calculate image width and height
const screenWidth = Dimensions.get("window").width;
const scaleFactor = width / screenWidth;
const imageHeight = height / scaleFactor;
this.setState({ imgWidth: screenWidth, imgHeight: imageHeight });
});
}
render() {
return (
<View
style={{ flex: 1, justifyContent: "flex-start", alignItems: "center" }}
>
<Image
style={{
flex: 1,
width: Dimensions.get("window").width,
borderColor: "red",
borderWidth: 2
}}
source={{
uri: "https://i.ibb.co/HgsfWpH/sc128.jpg"
}}
resizeMode="contain"
/>
<Button title="Random state" onPress={this.getRandomState} />
</View>
);
}
}
export default App;

Right is Left on React Native

Trying to display a List item within renderRow.
I already implemented RTL in my project as defined on react native documentation, and I am getting a positive for console.log(I18nManager.isRTL ? 'yes' : 'no').
I am trying to present a designed table cell, so it's an image, on top of which I am trying to layout my items.
So the logo is defined in styles like this:
var styles = StyleSheet.create({
logo:{
position: 'absolute',
top:11,
right:11,
width: 26,
height: 26
}
frame: {
flex: 1,
flexDirection: 'row',
margin: 5,
},
txtFirstName:{
position:'absolute',
top:7,
right:40,
marginRight:36,
color:'white',
fontSize:PixelRatio.get()*4/PixelRatio.getFontScale(),
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl'
},
txtSecondName:{
position:'absolute',
top:17,
right:40,
marginRight:36,
color:'white',
fontSize:PixelRatio.get()*3/PixelRatio.getFontScale(),
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl'
},
txtMainText:{
position:'absolute',
marginRight:36,
color:'white',
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl',
fontSize:PixelRatio.getPixelSizeForLayoutSize(3),
},
});
renderRow(rowData, sectionID, rowID) {
return(
<TouchableOpacity onPress={()=>this.showBusiness(rowData)}>
<View style={{flex:1}}>
<Image style={styles.logo} resizeMode = 'cover' source=}require('../images/logo.png’){/>
<Image source={require('../images/mainFrame.png’){ style={styles.frame}/>
<Text style={[styles.txtMainText,styles.txtFirstName]}>
טקסט
</Text>
<Text style={[styles.txtMainText,styles.txtSecondName]}>
מיושר לימין
</Text>
</View>
</TouchableOpacity>
);
}
The result is disappointing.
Here's how it should look like:
and here's how it is right now:
What bothers me most is that it used to look okay, and I am not sure what blew it this way.
Also, the "Loading" text shows on the right of the window when the app starts.

As according to the documentation: "we map the left/right styles from the JS side to start/end, all left in code for RTL layout becomes "right" on screen, and right in code becomes "left" on screen."... Have you considered using left instead of right for your positioning? Alternatively, consider using flex-start or flex-end for the desired result.

React-native Listview inside Scrollview not scrolling in android

In our React-native project, We have a screen which is having a parent Scrollview(with pull to refresh) and with in scrollview we have Listview (as chilld view).
In iOS we are able to scroll Scrollview(Parent) as well as Listview(child view).
But in android, We are not able to scroll the Child Listview. When we try to scroll the child Listview, The Parent view is getting scrolled. The child view is not getting the Touch.
Is this related to React-native issue? Can anyone tell me how to solve this issue?
Code snippet:
<ScrollView contentContainerStyle={styles.contentContainerStyle} refreshControl={this.getRefreshControl()}>
<View> Some header </View>
<MyComponent> </MyComponent>
<ListView /* This list view is not scrolling in Android */
dataSource={dataSource}
initialListSize={10}
renderRow={this.renderRow}
renderSeparator={this.renderSeparator}/>
</ScrollView>

I've done a ListView which is scrollable if you want !
ListBillScreen.js
export default class ListBillScreen extends React.Component{
/*Constructor*/
render() {
return (
<ScrollView style = {styles.container}>
<View style ={styles.header}>
<Text style = {styles.textHeader}> Title</Text>
</View>
<ListView
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={(data) => <Row {...data} navigator={this.props.navigator} />}
renderSeparator={(sectionId, rowId) => <View key={rowId} style=
{styles.separator} />}
/>
<AndroidBackButton
onPress={this.popIfExists.bind(this)}
/>
</ScrollView>
);
}
}
Styles
import { StyleSheet } from 'react-native'
import { Colors, Metrics } from '../../Themes'
export default StyleSheet.create({
container: {
paddingTop: 20,
backgroundColor: Colors.background
},
separator: {
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
textHeader: {
color: Colors.steel,
textAlign: 'center',
},
image: {
height:64,
width: 64,
},
listView: {
paddingTop: 10,
paddingBottom: 20
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
})
It's fully scrollable even if you add some rows =) (My rows are created with a JSon File, with the Row.js)
Enjoy !

i think ur listview is small . Try setting flex: 1 or height: 587 on your ListView's style property. –

Both listview and scrollview touch events are conflicting.
Try using below code in your fragment/activity
listview.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});

You need to set nestedScrollEnabled = true for ListView.

How to design screens in react native compatible for all devices

I am trying to design this design react-native. This is what I have coded for this but this is not what I want. This works on one screen only, if I change screen size then things are not working.
This looks like absolute layout. What changes should I make to make it in such a way so that it will work on all screen sizes.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
Text,
Button,
StyleSheet
} from "react-native";
class SplashScreen extends Component {
render() {
console.disableYellowBox = true;
return (
<View style={styles.container}>
<Image
source={require("./img/talk_people.png")}
style={{ width: 300, height: 300 }}
/>
<Text style={{ fontSize: 22, textAlign: "center", marginTop: 30 }}>
Never forget to stay in touch with the people that matter to you.
</Text>
<View style={{ marginTop: 60, width: 240 }}>
<Button title="CONTINUE" color="#FE434C" />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#FFFFFF",
margin: 50,
alignItems: "center",
flex: 1,
flexDirection: "column"
}
});
AppRegistry.registerComponent("Scheduled", () => SplashScreen);
Expected State:
Current State:
Nexus 4 - 768x1280
Nexus 6P - 1440x2560

The quick answer is to use flex within your outer container, such that you have, say:
<View style={{flex: 1}}>
<View style={{flex: 2}}>
<.../>//Image
</View>
<View style={{flex: 1}}>
<.../>//Text
</View>
<View style={{flex: 1}}>
<.../>//Button
</View>
</View>
which will divide the container into quarters and give the top half of the screen to the image and the other two quarters to the text and button; you can use padding and margins with these as you like, and use any ratio you want.
What further needs to be considered, though, is screen pixel density, which can really wreak havoc with display sizes. I've found it handy to have an outside
import React from 'react';
import { PixelRatio } from 'react-native';
let pixelRatio = PixelRatio.get();
export const normalize = (size) => {
switch (true){
case (pixelRatio < 1.4):
return size * 0.8;
break;
case (pixelRatio < 2.4):
return size * 1.15;
break;
case (pixelRatio < 3.4):
return size * 1.35;
break;
default:
return size * 1.5;
}
}
export const normalizeFont = (size) => {
if (pixelRatio < 1.4){
return Math.sqrt((height*height)+(width*width))*(size/175);
}
return Math.sqrt((height*height)+(width*width))*(size/100);
}
module which I use as
import { normalize, normalizeFont } from '../config/pixelRatio';
const {width, height} = require('Dimensions').get('window');
...and for an image, say:
<Image source={ require('../images/my_image.png') } style={ { width: normalize(height*.2), height: normalize(height*.2) } } />
and a font:
button_text: {
fontSize: normalizeFont(configs.LETTER_SIZE * .7),
color: '#ffffff'
},
Hope this helps!
Edit: The module above has worked for me for devices I've deployed to, but it should be expanded to allow for pixelRatio values of from 1 to 4 with some decimal (e.g. 1.5) values in there, too. There's a good chart at this link that I'm working from to try to finish this out, but so far what has worked best is as I've posted above.

Another great way of creating dynamic layout is by using the Dimensions, Personally I hate flex (couldn't understand it at times) Using Dimensions You could get the screen width and height. After which you could divide the result and assign them to top level components
import React, { Component } from "react";
import {
View,
StyleSheet,
Dimensions
} from "react-native";
const styles = StyleSheet.create({
container: {
backgroundColor: "#FFFFFF",
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
//height:Dimensions.get('window').height*0.5// 50% of the screen
margin: 50,
alignItems: "center",
flex: 1,
flexDirection: "column"
}
});
Also adding to this, came across this library that supports media queries, if you are comfy with css styles just give it a try

Image cannot go full-width in react-native

I want to make a screen with a full-width Android screen image, but however, for some reason I cannot do it. I have done every single solution available in SO but it still persists.
Here is my code:
<View style={styles.loginContainer}>
<Image
style={styles.background}
source={require('./image.png')}
//source={{uri: 'http://previews.123rf.com/images/background.jpg'}}
opacity={0.8}
>
<Login navigator={navigator} />
</Image>
</View>
and my Stylesheet:
var styles = StyleSheet.create({
loginContainer: {
alignSelf: 'stretch',
flex: 1,
alignItems: 'stretch'
},
background: {
alignSelf: 'stretch',
flex: 1,
alignItems: 'stretch'
},
});
For some reason it worked just fine when I used network images, but when I used static images, it will only cover 2/3 width but full height. I have also tried source={{uri: 'image.png', isStatic: true}}, but it gives me null error. Any solution is much appreciated. Thanks.

Yes, there is an open issue on Github.
First of all, I would suggest using the resizeMode property, for instance:
<Image
style={styles.background}
source={require('./image.png')}
opacity={0.8}
resizeMode="contain"
>
Then, for network images, this would work:
var styles = StyleSheet.create({
loginContainer: {
flex: 1,
},
background: {
flex: 1,
},
});
For 'required' images, it does not work, as you pointed out, so you can either specify the width yourself:
var width = require('Dimensions').get('window').width;
var styles = StyleSheet.create({
loginContainer: {
flex: 1,
},
background: {
flex: 1,
width: width,
},
});
Or even set it to null:
var styles = StyleSheet.create({
loginContainer: {
flex: 1,
},
background: {
flex: 1,
width: null,
},
});

You can use react-native-scalable-image. The following example will give you a full screen width image:
import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';
const image = <Image width={Dimensions.get('window').width} source={{uri: '<image uri>'}} />;

try this android:scaleType="fitXY"
<ImageView
android:id="#+id/image_view_full"
android:layout_width="fill_parent"
android:scaleType="fitXY"
android:layout_height="fill_parent" />